fix SettingsModal buttons position

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'}`}
+            <span className={`${expanded.includes(2) ? 'minus' : 'plus'}`}
-            onClick={() => toggleExpanded(2)}
+              onClick={() => toggleExpanded(2)}
-          />
+            />
-          <span className="settings-pointer" style={{cursor: "pointer"}}
+            <span className="settings-pointer" style={{cursor: "pointer"}}
-            onClick={() => toggleExpanded(2)}
+              onClick={() => toggleExpanded(2)}
-          >Plebbit Options</span>
+            >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>
   );

src/components/styled/SettingsModal.styled.jsx

@@ -89,16 +89,14 @@ export const StyledModal = styled(Modal)`
     text-align: center;
   }
 
-  .center {
+  .plebbit-options-buttons {
-    margin: auto;
-    margin-bottom: 5px;
     display: block;
-    text-align: center;
+    position: relative;
+    float: right;
 
     button {
-      display: inline-block;
+      margin-right: 3px;
-      margin-right: 5px;
+      margin-left: 3px;
-      margin-left: 5px;
     }
   }
 
@@ -168,9 +166,6 @@ export const StyledModal = styled(Modal)`
   }
 
 
-
-
-
   ${({ selectedStyle }) => {
     switch (selectedStyle) {
       case 'Yotsuba':