From b43ecd84661e576e4fca4d2c4cf865af0e21c925 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Sun, 22 Aug 2021 15:58:56 +0800
Subject: [PATCH] Switch from dual-pane to multirow

per feedback
---
 static/app-strings.json                   |  7 ++-
 ui/component/settingContent/view.jsx      |  4 +-
 ui/component/settingSystem/view.jsx       | 70 +++++++++++++----------
 ui/component/settingWalletServer/view.jsx | 10 ++--
 4 files changed, 51 insertions(+), 40 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index 5e7edab7f..f786b48e7 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -494,7 +494,7 @@
   "Automatic dark mode": "Automatic dark mode",
   "24-hour clock": "24-hour clock",
   "Hide wallet balance in header": "Hide wallet balance in header",
-  "Max Connections": "Max Connections",
+  "Max connections": "Max connections",
   "For users with good bandwidth, try a higher value to improve streaming and download speeds. Low bandwidth users may benefit from a lower setting. Default is 4.": "For users with good bandwidth, try a higher value to improve streaming and download speeds. Low bandwidth users may benefit from a lower setting. Default is 4.",
   "Show All": "Show All",
   "LBRY names cannot contain spaces or reserved symbols": "LBRY names cannot contain spaces or reserved symbols",
@@ -512,7 +512,7 @@
   "Read more": "Read more",
   "Multi-language support is brand new and incomplete. Switching your language may have unintended consequences, like glossolalia.": "Multi-language support is brand new and incomplete. Switching your language may have unintended consequences, like glossolalia.",
   "Tailor your experience.": "Tailor your experience.",
-  "Save Password": "Save Password",
+  "Save wallet password": "Save wallet password",
   "Automatically unlock your wallet on startup": "Automatically unlock your wallet on startup",
   "Dark": "Dark",
   "light": "light",
@@ -710,7 +710,8 @@
   "Failed to copy RSS URL.": "Failed to copy RSS URL.",
   "Text copied": "Text copied",
   "Rewards Disabled": "Rewards Disabled",
-  "Wallet servers are used to relay data to and from the LBRY blockchain. They also determine what content shows in trending or is blocked. %learn_more%.": "Wallet servers are used to relay data to and from the LBRY blockchain. They also determine what content shows in trending or is blocked. %learn_more%.",
+  "Wallet server": "Wallet server",
+  "Wallet servers are used to relay data to and from the LBRY blockchain. They also determine what content shows in trending or is blocked. %learn_more%": "Wallet servers are used to relay data to and from the LBRY blockchain. They also determine what content shows in trending or is blocked. %learn_more%",
   "Your Tags": "Your Tags",
   "All Content": "All Content",
   "Accepted": "Accepted",
diff --git a/ui/component/settingContent/view.jsx b/ui/component/settingContent/view.jsx
index 4f3d287a7..11e770df7 100644
--- a/ui/component/settingContent/view.jsx
+++ b/ui/component/settingContent/view.jsx
@@ -168,12 +168,12 @@ export default function SettingContent(props: Props) {
             </SettingsRow>
 
             {/* @if TARGET='app' */}
-            <SettingsRow title={__('Max purchase price')} subtitle={__(HELP.MAX_PURCHASE_PRICE)} useVerticalSeparator>
+            <SettingsRow title={__('Max purchase price')} subtitle={__(HELP.MAX_PURCHASE_PRICE)} multirow>
               <MaxPurchasePrice />
             </SettingsRow>
             {/* @endif */}
 
-            <SettingsRow title={__('Purchase and tip confirmations')} useVerticalSeparator>
+            <SettingsRow title={__('Purchase and tip confirmations')} multirow>
               <FormField
                 type="radio"
                 name="confirm_all_purchases"
diff --git a/ui/component/settingSystem/view.jsx b/ui/component/settingSystem/view.jsx
index 7f4bbd138..529dfb1ee 100644
--- a/ui/component/settingSystem/view.jsx
+++ b/ui/component/settingSystem/view.jsx
@@ -185,7 +185,7 @@ export default function SettingSystem(props: Props) {
                   <Button button="link" label={__('Learn more')} href="https://lbry.com/privacypolicy" />
                 </React.Fragment>
               }
-              useVerticalSeparator
+              multirow
             >
               <FormField
                 type="checkbox"
@@ -295,48 +295,57 @@ export default function SettingSystem(props: Props) {
             {/* @endif */}
 
             {/* @if TARGET='app' */}
-            <SettingsRow title={__('Wallet security')}>
+            <SettingsRow
+              title={__('Encrypt my wallet with a custom password')}
+              subtitle={
+                <React.Fragment>
+                  <I18nMessage
+                    tokens={{
+                      learn_more: (
+                        <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/account-sync" />
+                      ),
+                    }}
+                  >
+                    Wallet encryption is currently unavailable until it's supported for synced accounts. It will be
+                    added back soon. %learn_more%.
+                  </I18nMessage>
+                  {/* {__('Secure your local wallet data with a custom password.')}{' '}
+                   <strong>{__('Lost passwords cannot be recovered.')} </strong>
+                   <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/wallet-encryption" />. */}
+                </React.Fragment>
+              }
+            >
               <FormField
                 disabled
                 type="checkbox"
                 name="encrypt_wallet"
                 onChange={() => onChangeEncryptWallet()}
                 checked={walletEncrypted}
-                label={__('Encrypt my wallet with a custom password')}
-                helper={
-                  <React.Fragment>
-                    <I18nMessage
-                      tokens={{
-                        learn_more: (
-                          <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/account-sync" />
-                        ),
-                      }}
-                    >
-                      Wallet encryption is currently unavailable until it's supported for synced accounts. It will be
-                      added back soon. %learn_more%.
-                    </I18nMessage>
-                    {/* {__('Secure your local wallet data with a custom password.')}{' '}
-                         <strong>{__('Lost passwords cannot be recovered.')} </strong>
-                         <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/wallet-encryption" />. */}
-                  </React.Fragment>
-                }
               />
+            </SettingsRow>
 
-              {walletEncrypted && storedPassword && (
+            {walletEncrypted && storedPassword && (
+              <SettingsRow
+                title={__('Save wallet password')}
+                subtitle={__('Automatically unlock your wallet on startup')}
+              >
                 <FormField
                   type="checkbox"
                   name="save_password"
                   onChange={onConfirmForgetPassword}
                   checked={storedPassword}
-                  label={__('Save Password')}
-                  helper={<React.Fragment>{__('Automatically unlock your wallet on startup')}</React.Fragment>}
                 />
-              )}
-            </SettingsRow>
+              </SettingsRow>
+            )}
             {/* @endif */}
 
             {/* @if TARGET='app' */}
-            <SettingsRow title={__('Experimental settings')} useVerticalSeparator>
+            <SettingsRow
+              title={__('Max connections')}
+              subtitle={__(
+                'For users with good bandwidth, try a higher value to improve streaming and download speeds. Low bandwidth users may benefit from a lower setting. Default is 4.'
+              )}
+            >
               {/* Disabling below until we get downloads to work with shared subscriptions code */}
               {/*
             <FormField
@@ -355,10 +364,6 @@ export default function SettingSystem(props: Props) {
                 <FormField
                   name="max_connections"
                   type="select"
-                  label={__('Max Connections')}
-                  helper={__(
-                    'For users with good bandwidth, try a higher value to improve streaming and download speeds. Low bandwidth users may benefit from a lower setting. Default is 4.'
-                  )}
                   min={1}
                   max={100}
                   onChange={(e) => setDaemonSetting('max_connections_per_download', e.target.value)}
@@ -371,8 +376,13 @@ export default function SettingSystem(props: Props) {
                   ))}
                 </FormField>
               </fieldset-section>
+            </SettingsRow>
 
+            <SettingsRow title={__('Wallet server')} multirow>
               <SettingWalletServer />
+            </SettingsRow>
+
+            <SettingsRow title={__('Comments server')} multirow>
               <SettingCommentsServer />
             </SettingsRow>
             {/* @endif */}
diff --git a/ui/component/settingWalletServer/view.jsx b/ui/component/settingWalletServer/view.jsx
index 2d96cdf39..3f2b962d4 100644
--- a/ui/component/settingWalletServer/view.jsx
+++ b/ui/component/settingWalletServer/view.jsx
@@ -24,7 +24,7 @@ type DaemonStatus = {
 
 type Props = {
   getDaemonStatus: () => void,
-  setCustomWalletServers: any => void,
+  setCustomWalletServers: (any) => void,
   clearWalletServers: () => void,
   customWalletServers: ServerConfig,
   saveServerConfig: (Array<ServerTuple>) => void,
@@ -115,7 +115,7 @@ function SettingWalletServer(props: Props) {
           name="default_wallet_servers"
           checked={!advancedMode}
           label={__('Use official lbry.tv wallet servers')}
-          onChange={e => {
+          onChange={(e) => {
             if (e.target.checked) {
               doClear();
             }
@@ -125,7 +125,7 @@ function SettingWalletServer(props: Props) {
           type="radio"
           name="custom_wallet_servers"
           checked={advancedMode}
-          onChange={e => {
+          onChange={(e) => {
             setAdvancedMode(e.target.checked);
             if (e.target.checked && customWalletServers.length) {
               setCustomWalletServers(stringifyServerParam(customWalletServers));
@@ -140,7 +140,7 @@ function SettingWalletServer(props: Props) {
             }}
           >
             Wallet servers are used to relay data to and from the LBRY blockchain. They also determine what content
-            shows in trending or is blocked. %learn_more%.
+            shows in trending or is blocked. %learn_more%
           </I18nMessage>
         </p>
 
@@ -150,7 +150,7 @@ function SettingWalletServer(props: Props) {
               serverConfig.map((entry, index) => {
                 const [host, port] = entry;
                 const available = activeWalletServers.some(
-                  s => s.host === entry[0] && String(s.port) === entry[1] && s.availability
+                  (s) => s.host === entry[0] && String(s.port) === entry[1] && s.availability
                 );
 
                 return (