From 93ff9217bd557c1dce5ccc2f268482b19a1b66cf Mon Sep 17 00:00:00 2001
From: alexsparkes <alexsparkes@gmail.com>
Date: Fri, 27 Sep 2024 20:59:36 +0100
Subject: [PATCH] refactor: convert more to new settings layout

---
 .../quicklinks/options/QuickLinksOptions.jsx  | 29 +++++++++------
 src/features/quote/options/Custom.jsx         | 31 ++++++++--------
 src/features/quote/options/QuoteOptions.jsx   | 35 +++++++++++++------
 src/features/stats/options/StatsOptions.jsx   | 30 ++++++++--------
 4 files changed, 76 insertions(+), 49 deletions(-)

diff --git a/src/features/quicklinks/options/QuickLinksOptions.jsx b/src/features/quicklinks/options/QuickLinksOptions.jsx
index 78ec6361..6b40ef82 100644
--- a/src/features/quicklinks/options/QuickLinksOptions.jsx
+++ b/src/features/quicklinks/options/QuickLinksOptions.jsx
@@ -3,6 +3,7 @@ import { PureComponent, createRef } from 'react';
 import { MdAddLink, MdLinkOff } from 'react-icons/md';
 import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
 import { Checkbox, Dropdown } from 'components/Form/Settings';
+import { Hero, Preview, Controls } from 'components/Layout/Settings/Hero';
 import { Button } from 'components/Elements';
 import Modal from 'react-modal';
 
@@ -38,7 +39,7 @@ class QuickLinksOptions extends PureComponent {
       items: data,
     });
 
-    variables.stats.postEvent('feature', 'quicklink' ,'delete');
+    variables.stats.postEvent('feature', 'quicklink', 'delete');
   }
 
   async addLink(name, url, icon) {
@@ -199,24 +200,32 @@ class QuickLinksOptions extends PureComponent {
 
     return (
       <>
-        <Header
+        {/* <Header
           title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)}
           setting="quicklinksenabled"
           category="quicklinks"
           element=".quicklinks-container"
           zoomSetting="zoomQuicklinks"
           visibilityToggle={true}
-        />
-        <PreferencesWrapper
-          setting="quicklinksenabled"
-          category="quicklinks"
-          visibilityToggle={true}
-          zoomSetting="zoomQuicklinks"
-        >
+        /> */}
+        <Hero>
+          <Controls
+            setting="quicklinksenabled"
+            category="quicklinks"
+            visibilityToggle={true}
+            zoomSetting="zoomQuicklinks"
+          />
+        </Hero>
+        <PreferencesWrapper>
           <AdditionalSettings />
+        </PreferencesWrapper>
+        <PreferencesWrapper>
           <StylingOptions />
+        </PreferencesWrapper>
+        <PreferencesWrapper>
           <AddLink />
-
+        </PreferencesWrapper>
+        <PreferencesWrapper>
           {this.state.items.length === 0 && (
             <div className="photosEmpty">
               <div className="emptyNewMessage">
diff --git a/src/features/quote/options/Custom.jsx b/src/features/quote/options/Custom.jsx
index 12a86fbc..7f1f897e 100644
--- a/src/features/quote/options/Custom.jsx
+++ b/src/features/quote/options/Custom.jsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { MdCancel, MdAdd, MdOutlineFormatQuote } from 'react-icons/md';
 import TextareaAutosize from '@mui/material/TextareaAutosize';
 
-import { Row, Content, Action } from 'components/Layout/Settings';
+import { Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
 import { Button } from 'components/Elements';
 
 function CustomSettings() {
@@ -42,21 +42,22 @@ function CustomSettings() {
 
   return (
     <>
-      <Row final={true}>
-        <Content
-          title={variables.getMessage(`${QUOTE_SECTION}.custom`)}
-          subtitle={variables.getMessage(`${QUOTE_SECTION}.custom_subtitle`)}
-        />
-        <Action>
-          <Button
-            type="settings"
-            onClick={() => modifyCustomQuote('add')}
-            icon={<MdAdd />}
-            label={variables.getMessage(`${QUOTE_SECTION}.add`)}
+      <PreferencesWrapper>
+        <Row final={true}>
+          <Content
+            title={variables.getMessage(`${QUOTE_SECTION}.custom`)}
+            subtitle={variables.getMessage(`${QUOTE_SECTION}.custom_subtitle`)}
           />
-        </Action>
-      </Row>
-
+          <Action>
+            <Button
+              type="settings"
+              onClick={() => modifyCustomQuote('add')}
+              icon={<MdAdd />}
+              label={variables.getMessage(`${QUOTE_SECTION}.add`)}
+            />
+          </Action>
+        </Row>
+      </PreferencesWrapper>
       {customQuote.length !== 0 ? (
         <div className="messagesContainer">
           {customQuote.map((_url, index) => (
diff --git a/src/features/quote/options/QuoteOptions.jsx b/src/features/quote/options/QuoteOptions.jsx
index 1787ff44..19500df3 100644
--- a/src/features/quote/options/QuoteOptions.jsx
+++ b/src/features/quote/options/QuoteOptions.jsx
@@ -15,6 +15,7 @@ import {
 import { Checkbox, Dropdown } from 'components/Form/Settings';
 
 import { useTab } from 'components/Elements/MainModal/backend/TabContext';
+import { Hero, Preview, Controls } from 'components/Layout/Settings/Hero';
 
 import CustomSettings from './Custom';
 
@@ -107,7 +108,7 @@ const QuoteOptions = () => {
 
   return (
     <>
-      {subSection === 'source' ? (
+      {/* {subSection === 'source' ? (
         <Header
           title={variables.getMessage(`${QUOTE_SECTION}.title`)}
           secondaryTitle={variables.getMessage('settings:sections.background.source.title')}
@@ -122,17 +123,31 @@ const QuoteOptions = () => {
           zoomSetting="zoomQuote"
           visibilityToggle={true}
         />
+      )} */}
+      {subSection === '' && (
+        <Hero>
+          <Controls
+            title={variables.getMessage(`${QUOTE_SECTION}.title`)}
+            setting="quote"
+            category="quote"
+            element=".quotediv"
+            zoomSetting="zoomQuote"
+            visibilityToggle={true}
+          />
+        </Hero>
       )}
       {subSection === 'source' && (
-        <Row final={true}>
-          <Content
-            title={variables.getMessage('settings:sections.background.source.title')}
-            subtitle={variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)}
-          />
-          <Action>
-            <SourceDropdown />
-          </Action>
-        </Row>
+        <PreferencesWrapper>
+          <Row final={true}>
+            <Content
+              title={variables.getMessage('settings:sections.background.source.title')}
+              subtitle={variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)}
+            />
+            <Action>
+              <SourceDropdown />
+            </Action>
+          </Row>
+        </PreferencesWrapper>
       )}
 
       {subSection !== 'source' && (
diff --git a/src/features/stats/options/StatsOptions.jsx b/src/features/stats/options/StatsOptions.jsx
index 663c1b2f..a3a56f1e 100644
--- a/src/features/stats/options/StatsOptions.jsx
+++ b/src/features/stats/options/StatsOptions.jsx
@@ -6,7 +6,7 @@ import { toast } from 'react-toastify';
 import Modal from 'react-modal';
 
 import { Button } from 'components/Elements';
-import { Header, CustomActions } from 'components/Layout/Settings';
+import { Header, CustomActions, PreferencesWrapper } from 'components/Layout/Settings';
 import { ClearModal } from './ClearModal';
 
 import { saveFile } from 'utils/saveFile';
@@ -169,19 +169,21 @@ const Stats = () => {
             })}
           </div>
           <span className="title">{variables.getMessage(`${STATS_SECTION}.locked`)}</span>
-          <div className="achievementsGrid preferencesInactive">
-            {achievements.map((achievement, index) => {
-              if (!achievement.achieved) {
-                return (
-                  <AchievementElement
-                    key={index}
-                    id={achievement.id}
-                    achieved={achievement.achieved}
-                  />
-                );
-              }
-            })}
-          </div>
+          <PreferencesWrapper>
+            <div className="achievementsGrid preferencesInactive">
+              {achievements.map((achievement, index) => {
+                if (!achievement.achieved) {
+                  return (
+                    <AchievementElement
+                      key={index}
+                      id={achievement.id}
+                      achieved={achievement.achieved}
+                    />
+                  );
+                }
+              })}
+            </div>
+          </PreferencesWrapper>
         </div>
       </div>
     </>