feat(settings): add expand all button

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;
 }

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>