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 = () => { {t('settings')} +