From f732f3d04290974958c32312b1b26ce512f43a90 Mon Sep 17 00:00:00 2001
From: plebbitor <mottoes_recap0u@icloud.com>
Date: Wed, 19 Apr 2023 13:56:38 +0200
Subject: [PATCH] finished settings UI

---
 src/components/SettingsModal.jsx              | 27 +++++++++++++++----
 .../styled/SettingsModal.styled.jsx           | 23 +++++++++++-----
 2 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/src/components/SettingsModal.jsx b/src/components/SettingsModal.jsx
index bc059459..0f8e0d3f 100644
--- a/src/components/SettingsModal.jsx
+++ b/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>
-            <li className="settings-tip">Optional URL of an IPFS gateway</li>
+              IPFS Gateways URLs</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>
diff --git a/src/components/styled/SettingsModal.styled.jsx b/src/components/styled/SettingsModal.styled.jsx
index 79322d8b..a5107f8e 100644
--- a/src/components/styled/SettingsModal.styled.jsx
+++ b/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;
-    top: 50%;
+    left: 28px;
+    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;
-    top: calc(50% - 8px);
+    left: 28px;
+    top: 1px; /* Change this value according to your needs */
   }
 
 
 
+
+
   ${({ selectedStyle }) => {
     switch (selectedStyle) {
       case 'Yotsuba':