feat: Settings subsections (#573)

* redesign settings page to match suggestions in #524 * add tests to match new settings page format
joinmarket-webui · Dec 3, 2022 · 495dc2b · 495dc2b
1 parent 24a7ad6
commit 495dc2b
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 43 deletions.
diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx
@@ -92,7 +92,7 @@ export default function Settings({ wallet, stopWallet }) {
   return (
     <div className={styles.settings}>
       <div className="d-flex flex-column gap-3">
-        <div className={styles['section-title']}>{t('settings.title')}</div>
+        <div className={styles['section-title']}>{t('settings.section_title_display')}</div>
         {alert && <Alert {...alert} />}
         <ConfirmModal
           isShown={showConfirmLockModal}
@@ -161,28 +161,23 @@ export default function Settings({ wallet, stopWallet }) {
               </rb.Dropdown.Item>
             </rb.Dropdown.Menu>
           </rb.Dropdown>
-
-          <rb.Button
-            variant="outline-dark"
-            className={styles['settings-btn']}
-            onClick={(e) => setShowingFeeConfig(true)}
-          >
-            <Sprite symbol="coins" width="24" height="24" />
-            {t('settings.show_fee_config')}
-          </rb.Button>
-          {showingFeeConfig && <FeeConfigModal show={showingFeeConfig} onHide={() => setShowingFeeConfig(false)} />}
-
-          {showLogsEnabled && (
-            <>
-              <rb.Button variant="outline-dark" className={styles['settings-btn']} onClick={() => setShowingLogs(true)}>
-                <Sprite symbol="console" width="24" height="24" />
-                {t('settings.show_logs')}
-              </rb.Button>
-              <LogOverlay currentWallet={wallet} show={showingLogs} onHide={() => setShowingLogs(false)} />
-            </>
-          )}
         </div>
+        <div className={styles['section-title']}>{t('settings.section_title_market')}</div>
+        <rb.Button variant="outline-dark" className={styles['settings-btn']} onClick={(e) => setShowingFeeConfig(true)}>
+          <Sprite symbol="coins" width="24" height="24" />
+          {t('settings.show_fee_config')}
+        </rb.Button>
+        {showingFeeConfig && <FeeConfigModal show={showingFeeConfig} onHide={() => setShowingFeeConfig(false)} />}
 
+        {showLogsEnabled && (
+          <>
+            <rb.Button variant="outline-dark" className={styles['settings-btn']} onClick={() => setShowingLogs(true)}>
+              <Sprite symbol="console" width="24" height="24" />
+              {t('settings.show_logs')}
+            </rb.Button>
+            <LogOverlay currentWallet={wallet} show={showingLogs} onHide={() => setShowingLogs(false)} />
+          </>
+        )}
         <div className={styles['section-title']}>{t('settings.section_title_wallet')}</div>
         <div className={styles['settings-group-container']}>
           <rb.Button variant="outline-dark" className={styles['settings-btn']} onClick={(e) => setShowingSeed(true)}>
@@ -233,23 +228,6 @@ export default function Settings({ wallet, stopWallet }) {
 
         <div className={styles['section-title']}>{t('settings.section_title_community')}</div>
         <div className={styles['settings-links']}>
-          <a href="https://jamdocs.org" target="_blank" rel="noopener noreferrer" className="link-dark">
-            <div className="d-flex align-items-center">
-              <Sprite symbol="file" width="24" height="24" className="me-2" />
-              {t('settings.documentation')}
-            </div>
-          </a>
-          <a
-            href="https://github.com/joinmarket-webui/jam"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="link-dark"
-          >
-            <div className="d-flex align-items-center">
-              <Sprite symbol="github" width="24" height="24" className="me-2 p-1" />
-              {t('settings.github')}
-            </div>
-          </a>
           <a
             href="https://matrix.to/#/%23jam:bitcoin.kyoto"
             target="_blank"
@@ -280,6 +258,26 @@ export default function Settings({ wallet, stopWallet }) {
             </div>
           </a>
         </div>
+        <div className={styles['section-title']}>{t('settings.section_title_dev')}</div>
+        <div className={styles['settings-links']}>
+          <a href="https://jamdocs.org" target="_blank" rel="noopener noreferrer" className="link-dark">
+            <div className="d-flex align-items-center">
+              <Sprite symbol="file" width="24" height="24" className="me-2" />
+              {t('settings.documentation')}
+            </div>
+          </a>
+          <a
+            href="https://github.com/joinmarket-webui/jam"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="link-dark"
+          >
+            <div className="d-flex align-items-center">
+              <Sprite symbol="github" width="24" height="24" className="me-2 p-1" />
+              {t('settings.github')}
+            </div>
+          </a>
+        </div>
       </div>
     </div>
   )

diff --git a/src/components/Settings.test.jsx b/src/components/Settings.test.jsx
@@ -26,7 +26,7 @@ describe('<Settings />', () => {
       })
     )
 
-    expect(screen.getByText('settings.title')).toBeVisible()
+    expect(screen.getByText('settings.section_title_display')).toBeVisible()
     expect(screen.queryByText(/settings.(show|hide)_balance/)).toBeVisible()
     expect(screen.queryByText(/settings.use_(sats|bitcoin)/)).toBeVisible()
     expect(screen.queryByText(/settings.use_(dark|light)_theme/)).toBeVisible()
@@ -37,8 +37,11 @@ describe('<Settings />', () => {
     expect(screen.queryByText(/settings.button_switch_wallet/)).toBeVisible()
 
     expect(screen.getByText('settings.section_title_community')).toBeVisible()
-    expect(screen.queryByText(/settings.github/)).toBeVisible()
     expect(screen.queryByText(/settings.telegram/)).toBeVisible()
     expect(screen.queryByText(/settings.jm_twitter/)).toBeVisible()
+
+    expect(screen.getByText('settings.section_title_community')).toBeVisible()
+    expect(screen.queryByText(/settings.documentation/)).toBeVisible()
+    expect(screen.queryByText(/settings.github/)).toBeVisible()
   })
 })
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -140,9 +140,11 @@
     "account_heading_internal_addresses": "Internal Addresses"
   },
   "settings": {
-    "title": "Settings",
+    "section_title_display": "Display",
+    "section_title_market": "Market",
     "section_title_wallet": "Wallet",
     "section_title_community": "Community",
+    "section_title_dev": "Development & Documentation",
     "show_balance": "Show balance",
     "hide_balance": "Hide balance",
     "use_sats": "Display amounts in sats",

diff --git a/src/i18n/locales/fr/translation.json b/src/i18n/locales/fr/translation.json
@@ -131,7 +131,11 @@
     "account_heading_internal_addresses": "Adresses internes"
   },
   "settings": {
-    "title": "Paramètres",
+    "section_title_display": "Écran",
+    "section_title_market": "Marché",
+    "section_title_wallet": "Portefeuille",
+    "section_title_community": "Communauté",
+    "section_title_dev": "Développement & Documentation",
     "show_balance": "Afficher le solde",
     "hide_balance": "Cacher le solde",
     "use_sats": "Afficher les montants en sats",
@@ -144,9 +148,26 @@
     "show_seed": "Afficher la phrase graine",
     "hide_seed": "Cacher la phrase graine",
     "reveal_seed": "Révéler la phrase graine",
+    "show_logs": "Afficher les journaux",
+    "show_fee_config": "Ajuster les limites de frais",
+    "button_lock_wallet": "Verrouiller le portefeuille",
+    "button_locking_wallet": "Verrouillant...",
+    "button_create_wallet": "Créer un nouveau portefeuille",
     "button_switch_wallet": "Changer de porte-monnaie",
     "error_loading_seed_failed": "Impossible de récupérer la phrase graine.",
-    "seed_modal_info_text": "Veuillez noter votre phrase graine et votre mot de passe ! Sans ces informations, vous ne serez pas en mesure d'accéder à votre portefeuille !"
+    "seed_modal_info_text": "Veuillez noter votre phrase graine et votre mot de passe ! Sans ces informations, vous ne serez pas en mesure d'accéder à votre portefeuille !",
+    "documentation": "Documentation",
+    "github": "GitHub",
+    "matrix": "Matrix",
+    "telegram": "Telegram",
+    "jm_twitter": "JoinMarket Twitter",
+    "jam_twitter": "Jam Twitter",
+    "confirm_locking_modal_title": "Verrouiller le Portefeuille",
+    "fees": {
+      "text_button_cancel": "Annuler",
+      "text_button_submit": "Sauvegarder",
+      "text_button_submitting": "Sauvant..."
+    }
   },
   "send": {
     "loading": "Chargement",