From 59c525034762b4cf3d5a9f10570047d0766b73f6 Mon Sep 17 00:00:00 2001
From: plebbitor <mottoes_recap0u@icloud.com>
Date: Wed, 19 Apr 2023 16:33:49 +0200
Subject: [PATCH] fix SettingsModal buttons position

---
 src/components/SettingsModal.jsx              | 22 ++++++++++---------
 .../styled/SettingsModal.styled.jsx           | 15 +++++--------
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/components/SettingsModal.jsx b/src/components/SettingsModal.jsx
index 9e0c0e23..bed7413d 100644
--- a/src/components/SettingsModal.jsx
+++ b/src/components/SettingsModal.jsx
@@ -119,12 +119,18 @@ const SettingsModal = ({ isOpen, closeModal }) => {
         </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>
+            <span className={`${expanded.includes(2) ? 'minus' : 'plus'}`}
+              onClick={() => toggleExpanded(2)}
+            />
+            <span className="settings-pointer" style={{cursor: "pointer"}}
+              onClick={() => toggleExpanded(2)}
+            >Plebbit Options</span>
+            <div className="plebbit-options-buttons"
+              style={{ display: expanded.includes(2) ? 'block' : 'none' }}
+            >
+              <button className="save-button">Save</button>
+              <button className="reset-button">Reset</button>
+             </div>
           </li>
           <ul className="settings-cat" style={{ display: expanded.includes(2) ? 'block' : 'none' }}>
             <li className="settings-option disc">
@@ -179,10 +185,6 @@ const SettingsModal = ({ isOpen, closeModal }) => {
           Clear Cache
         </button>
         </div>
-        <div className="center">
-          <button className="save-button">Save</button>
-          <button className="reset-button">Reset</button>
-        </div>
       </div>
     </StyledModal>
   );
diff --git a/src/components/styled/SettingsModal.styled.jsx b/src/components/styled/SettingsModal.styled.jsx
index 7de1c5aa..0540482f 100644
--- a/src/components/styled/SettingsModal.styled.jsx
+++ b/src/components/styled/SettingsModal.styled.jsx
@@ -89,16 +89,14 @@ export const StyledModal = styled(Modal)`
     text-align: center;
   }
 
-  .center {
-    margin: auto;
-    margin-bottom: 5px;
+  .plebbit-options-buttons {
     display: block;
-    text-align: center;
+    position: relative;
+    float: right;
 
     button {
-      display: inline-block;
-      margin-right: 5px;
-      margin-left: 5px;
+      margin-right: 3px;
+      margin-left: 3px;
     }
   }
 
@@ -168,9 +166,6 @@ export const StyledModal = styled(Modal)`
   }
 
 
-
-
-
   ${({ selectedStyle }) => {
     switch (selectedStyle) {
       case 'Yotsuba':