From 91d2a5ae014dd8498cb9d3284904db333fb2bf5d Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Thu, 16 May 2024 22:00:22 +0200
Subject: [PATCH] feat(settings): add expand all button

---
 .../settings-modal/settings-modal.module.css        | 13 +++++++++++++
 src/components/settings-modal/settings-modal.tsx    | 13 ++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/settings-modal/settings-modal.module.css b/src/components/settings-modal/settings-modal.module.css
index 80250ab7..3cc1b106 100644
--- a/src/components/settings-modal/settings-modal.module.css
+++ b/src/components/settings-modal/settings-modal.module.css
@@ -89,6 +89,19 @@
   background-image: var(--settings-modal-close-button-background-image);
 }
 
+.expandAllSettings {
+  text-align: center;
+}
+
+.expandAllSettings span {
+  color: var(--button-desktop-text-color);
+}
+
+.expandAllSettings span:hover {
+  color: var(--button-desktop-text-color-hover);
+  cursor: pointer;
+}
+
 .languageSettings {
   display: inline-block;
 }
diff --git a/src/components/settings-modal/settings-modal.tsx b/src/components/settings-modal/settings-modal.tsx
index a05b13fc..c53190cd 100644
--- a/src/components/settings-modal/settings-modal.tsx
+++ b/src/components/settings-modal/settings-modal.tsx
@@ -124,7 +124,15 @@ const SettingsModal = () => {
   const [showAccountSettings, setShowAccountSettings] = useState(false);
   const [showCryptoAddressSetting, setShowCryptoAddressSetting] = useState(false);
   const [showCryptoWalletSettings, setShowCryptoWalletSettings] = useState(false);
-  // const [showPlebbitOptionsSettings, setShowPlebbitOptionsSettings] = useState(false);
+  const [expandAll, setExpandAll] = useState(false);
+
+  const handleExpandAll = () => {
+    const newExpandState = !expandAll;
+    setExpandAll(newExpandState);
+    setShowAccountSettings(newExpandState);
+    setShowCryptoAddressSetting(newExpandState);
+    setShowCryptoWalletSettings(newExpandState);
+  };
 
   return (
     <>
@@ -144,6 +152,9 @@ const SettingsModal = () => {
           <span className={styles.title}>{t('settings')}</span>
           <span className={styles.closeButton} title='close' onClick={closeModal} />
         </div>
+        <div className={styles.expandAllSettings}>
+          [<span onClick={handleExpandAll}>{expandAll ? 'Collapse All Settings' : 'Expand All Settings'}</span>]
+        </div>
         <div className={styles.setting}>
           {t('update')}: <CheckForUpdates />
         </div>