finished settings UI

src/components/SettingsModal.jsx

@@ -111,10 +111,16 @@ const SettingsModal = ({ isOpen, closeModal }) => {
           </li>
           <ul className="settings-cat" style={{ display: expanded.includes(2) ? 'block' : 'none' }}>
             <li className="settings-option disc">
-              IPFS Gateway URL</li>
+              IPFS Gateways URLs</li>
-            <li className="settings-tip">Optional URL of an IPFS gateway</li>
+            <li className="settings-tip">Optional URLs of IPFS gateways</li>
             <div className="settings-input">
-              <input type="text" placeholder="IPFS Gateway URL" />
+              <textarea placeholder="IPFS Gateways URLs"
+                defaultValue={[
+                  "https://ipfs.io",
+                  "https://ipfsgateway.xyz",
+                  "https://cloudflare-ipfs.com"
+                ].join("\n")}
+              />
             </div>
           </ul>
           <ul className="settings-cat" style={{ display: expanded.includes(2) ? 'block' : 'none' }}>
@@ -122,7 +128,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
               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" />
+              <textarea placeholder="IpfsHttpClientOptions" />
             </div>
           </ul>
           <ul className="settings-cat" style={{ display: expanded.includes(2) ? 'block' : 'none' }}>
@@ -130,10 +136,21 @@ const SettingsModal = ({ isOpen, closeModal }) => {
               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" />
+              <textarea placeholder="pubsubHttpClientOptions" defaultValue="https://pubsubprovider.xyz/api/v0" />
+            </div>
+          </ul>
+          <ul className="settings-cat" style={{ display: expanded.includes(2) ? 'block' : 'none' }}>
+            <li className="settings-option disc">
+              Data Path (Node Only)</li>
+            <li className="settings-tip">(Node only) Optional folder path to create/resume the user and subplebbit databasesr</li>
+            <div className="settings-input">
+              <textarea placeholder="dataPath" />
             </div>
           </ul>
         </ul>
+        <div>
+          <button className="cache-button">Clear Cache</button>
+        </div>
         <div className="center">
           <button className="save-button">Save</button>
           <button className="reset-button">Reset</button>

src/components/styled/SettingsModal.styled.jsx

@@ -68,9 +68,10 @@ export const StyledModal = styled(Modal)`
     margin: 5px;
   }
 
-  input {
+  textarea {
     width: 80%;
     margin-left: 7%;
+    min-height: 50px;
   }
 
   .all-div {
@@ -86,9 +87,17 @@ export const StyledModal = styled(Modal)`
     button {
       display: inline-block;
       margin-right: 5px;
+      margin-left: 5px;
     }
   }
 
+  .cache-button {
+    margin: auto;
+    margin-bottom: 10px;
+    display: block;
+    text-align: center;
+  }
+
   .settings-option {
     margin: 5px 0 5px 0;
     padding-left: 23px;
@@ -132,23 +141,25 @@ export const StyledModal = styled(Modal)`
     height: 1px;
     background-color: currentColor;
     position: absolute;
-    left: 25px;
+    left: 28px;
-    top: 50%;
+    top: 13px; /* Change this value according to your needs */
   }
 
   .settings-input::after {
     content: '';
     display: block;
     width: 1px;
-    height: 8px;
+    height: 12px;
     background-color: currentColor;
     position: absolute;
-    left: 25px;
+    left: 28px;
-    top: calc(50% - 8px);
+    top: 1px; /* Change this value according to your needs */
   }
 
 
 
+
+
   ${({ selectedStyle }) => {
     switch (selectedStyle) {
       case 'Yotsuba':