added settings UI

src/components/SettingsModal.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { StyledModal } from "./styled/SettingsModal.styled";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import Modal from "react-modal";
@@ -14,6 +14,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
   const selectedStyle = useGeneralStore(state => state.selectedStyle);
   const navigate = useNavigate();
   const location = useLocation();
+  const [expanded, setExpanded] = useState([]);
 
   const handleCloseModal = () => {
     closeModal();
@@ -25,6 +26,28 @@ const SettingsModal = ({ isOpen, closeModal }) => {
     }
   };
 
+  const toggleExpanded = (index) => {
+    setExpanded((prevExpanded) => {
+      const newExpanded = [...prevExpanded];
+      if (newExpanded.includes(index)) {
+        newExpanded.splice(newExpanded.indexOf(index), 1);
+      } else {
+        newExpanded.push(index);
+      }
+      return newExpanded;
+    });
+  };
+
+  const expandAll = () => {
+    if (expanded.length === 3) {
+      setExpanded([]);
+    } else {
+      setExpanded([0, 1, 2]);
+    }
+  };
+  
+  
+  
   return (
     <StyledModal
       isOpen={isOpen}
@@ -32,6 +55,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
       contentLabel="Settings"
       style={customOverlayStyles}
       selectedStyle={selectedStyle}
+      expanded={expanded}
     >
       <div className="panel">
         <div className="panel-header">
@@ -40,8 +64,80 @@ const SettingsModal = ({ isOpen, closeModal }) => {
             <span className="icon" title="close" />
           </Link>
         </div>
-        <h4>Plebbit Options</h4>
-        <p>Coming soon...</p>
+        <div className="all-div">
+          [
+          <button className="all-button" 
+          onClick={expandAll} style={{all: "unset", cursor: "pointer"}}>
+            {expanded.length === 3 ? "Collapse All Settings" : "Expand All Settings"}
+          </button>
+          ]
+        </div>
+        <ul>
+          <li className="settings-cat-lbl">
+          <span className={`${expanded.includes(0) ? 'minus' : 'plus'}`}
+            onClick={() => toggleExpanded(0)}
+          />
+          <span className="settings-pointer" style={{cursor: "pointer"}}
+            onClick={() => toggleExpanded(0)}
+          >Account</span>
+          </li>
+          <ul className="settings-cat" style={{ display: expanded.includes(0) ? 'block' : 'none' }}>
+            <li>
+            </li>
+          </ul>
+        </ul>
+        <ul>
+          <li className="settings-cat-lbl">
+          <span className={`${expanded.includes(1) ? 'minus' : 'plus'}`}
+            onClick={() => toggleExpanded(1)}
+          />
+          <span className="settings-pointer" style={{cursor: "pointer"}}
+            onClick={() => toggleExpanded(1)}
+          >Profile</span>
+          </li>
+          <ul className="settings-cat" style={{ display: expanded.includes(1) ? 'block' : 'none' }}>
+            <li>
+            </li>
+          </ul>
+        </ul>
+        <ul>
+          <li className="settings-cat-lbl">
+          <span className={`${expanded.includes(2) ? 'minus' : 'plus'}`}
+            onClick={() => toggleExpanded(2)}
+          />
+          <span className="settings-pointer" style={{cursor: "pointer"}}
+            onClick={() => toggleExpanded(2)}
+          >Plebbit Options</span>
+          </li>
+          <ul className="settings-cat" style={{ display: expanded.includes(2) ? 'block' : 'none' }}>
+            <li className="settings-option disc">
+              IPFS Gateway URL</li>
+            <li className="settings-tip">Optional URL of an IPFS gateway</li>
+            <div className="settings-input">
+              <input type="text" placeholder="IPFS Gateway URL" />
+            </div>
+          </ul>
+          <ul className="settings-cat" style={{ display: expanded.includes(2) ? 'block' : 'none' }}>
+            <li className="settings-option disc">
+              IPFS HTTP Client Options</li>
+            <li className="settings-tip">Optional URL of an IPFS API or IpfsHttpClientOptions, http://localhost:5001 to use a local IPFS node</li>
+            <div className="settings-input">
+              <input type="text" placeholder="IpfsHttpClientOptions" />
+            </div>
+          </ul>
+          <ul className="settings-cat" style={{ display: expanded.includes(2) ? 'block' : 'none' }}>
+            <li className="settings-option disc">
+              PubSub HTTP Client Options</li>
+            <li className="settings-tip">Optional URL or IpfsHttpClientOptions used for pubsub publishing when ipfsHttpClientOptions isn't available, like in the browser</li>
+            <div className="settings-input">
+              <input type="text" placeholder="pubsubHttpClientOptions" />
+            </div>
+          </ul>
+        </ul>
+        <div className="center">
+          <button className="save-button">Save</button>
+          <button className="reset-button">Reset</button>
+        </div>
       </div>
     </StyledModal>
   );

src/components/styled/SettingsModal.styled.jsx

@@ -40,6 +40,115 @@ export const StyledModal = styled(Modal)`
     margin: 10px 0 5px;
   }
 
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 10px;
+  }
+
+  .settings-cat-lbl {
+    font-weight: 700;
+    margin: 10px 0 5px;
+    padding-left: 5px;
+  }
+
+  .plus, .minus {
+    vertical-align: text-bottom;
+    margin-right: 5px;
+    cursor: pointer;
+    width: 18px;
+    height: 18px;
+    background-repeat: no-repeat;
+    background-position: center;
+    display: inline-block;
+  }
+
+  .settings-cat {
+    display: ${({ expanded }) => index => (expanded.includes(index) ? "block" : "none")};
+    margin: 5px;
+  }
+
+  input {
+    width: 80%;
+    margin-left: 7%;
+  }
+
+  .all-div {
+    text-align: center;
+  }
+
+  .center {
+    margin: auto;
+    margin-bottom: 5px;
+    display: block;
+    text-align: center;
+
+    button {
+      display: inline-block;
+      margin-right: 5px;
+    }
+  }
+
+  .settings-option {
+    margin: 5px 0 5px 0;
+    padding-left: 23px;
+    display: inline-block;
+  }
+
+  .settings-tip {
+    font-size: 0.85em;
+    margin: 0 0 5px 0;
+    padding-left: 23px;
+  }
+
+  .settings-option.disc::before {
+    content: '';
+    display: inline-block;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background-color: currentColor;
+    position: absolute;
+    margin-left: -15px;
+    margin-top: 6px;
+  }
+
+  .settings-option {
+    margin: 5px 0 5px 0;
+    padding-left: 23px;
+    display: inline-block;
+    position: relative;
+  }
+
+  .settings-input {
+    position: relative;
+    padding-left: 23px;
+  }
+
+  .settings-input::before {
+    content: '';
+    display: block;
+    width: 10px;
+    height: 1px;
+    background-color: currentColor;
+    position: absolute;
+    left: 25px;
+    top: 50%;
+  }
+
+  .settings-input::after {
+    content: '';
+    display: block;
+    width: 1px;
+    height: 8px;
+    background-color: currentColor;
+    position: absolute;
+    left: 25px;
+    top: calc(50% - 8px);
+  }
+
+
+
   ${({ selectedStyle }) => {
     switch (selectedStyle) {
       case 'Yotsuba':
@@ -54,6 +163,22 @@ export const StyledModal = styled(Modal)`
 
         .icon {
           background-image: url(/assets/buttons/cross_red.png);
+        }
+        
+        .plus {
+          background-image: url(/assets/buttons/post_expand_plus_red.png);
+        }
+        
+        .minus {
+          background-image: url(/assets/buttons/post_expand_minus_red.png);
+        }
+        
+        .all-button {
+          color: #00e !important;
+          
+          :hover {
+            color: red !important;
+          }
         }`;
 
       case 'Yotsuba-B':
@@ -68,6 +193,22 @@ export const StyledModal = styled(Modal)`
         
         .icon {
           background-image: url(/assets/buttons/cross_blue.png);
+        }
+        
+        .plus {
+          background-image: url(/assets/buttons/post_expand_plus_blue.png);
+        }
+        
+        .minus {
+          background-image: url(/assets/buttons/post_expand_minus_blue.png);
+        }
+        
+        .all-button {
+          color: #34345c !important;
+          
+          :hover {
+            color: #d00 !important;
+          }
         }`;
 
       case 'Futaba':
@@ -82,6 +223,22 @@ export const StyledModal = styled(Modal)`
         
         .icon {
           background-image: url(/assets/buttons/cross_red.png);
+        }
+        
+        .plus {
+          background-image: url(/assets/buttons/post_expand_plus_red.png);
+        }
+        
+        .minus {
+          background-image: url(/assets/buttons/post_expand_minus_red.png);
+        }
+        
+        .all-button {
+          color: #00e !important;
+          
+          :hover {
+            color: red !important;
+          }
         }`;
 
       case 'Burichan':
@@ -96,6 +253,22 @@ export const StyledModal = styled(Modal)`
         
         .icon {
           background-image: url(/assets/buttons/cross_blue.png);
+        }
+        
+        .plus {
+          background-image: url(/assets/buttons/post_expand_plus_blue.png);
+        }
+        
+        .minus {
+          background-image: url(/assets/buttons/post_expand_minus_blue.png);
+        }
+        
+        .all-button {
+          color: #34345c !important;
+          
+          :hover {
+            color: #d00 !important;
+          }
         }`;
 
       case 'Tomorrow':
@@ -110,6 +283,26 @@ export const StyledModal = styled(Modal)`
         
         .icon {
           background-image: url(/assets/buttons/cross_dark.png);
+        }
+        
+        .plus {
+          background-image: url(/assets/buttons/post_expand_plus_dark.png);
+        }
+        
+        .minus {
+          background-image: url(/assets/buttons/post_expand_minus_dark.png);
+        }
+        
+        .all-button {
+          color: #81a2be !important;
+          
+          :hover {
+            color: #5f89ac !important;
+          }
+        }
+        
+        button {
+          filter: brightness(80%);
         }`;
 
       case 'Photon':
@@ -124,6 +317,22 @@ export const StyledModal = styled(Modal)`
         
         .icon {
           background-image: url(/assets/buttons/cross_photon.png);
+        }
+        
+        .plus {
+          background-image: url(/assets/buttons/post_expand_plus_photon.png);
+        }
+        
+        .minus {
+          background-image: url(/assets/buttons/post_expand_minus_photon.png);
+        }
+        
+        .all-button {
+          color: #f60 !important;
+          
+          :hover {
+            color: #f30 !important;
+          }
         }`;
       
     }