From 9a1787866187497baf9f38f97c5e93f93e501252 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Mon, 9 Aug 2021 10:22:16 +0800
Subject: [PATCH] Change style for card title

I think it looks better to not place the title within the card's border when there are multiple cards in a page, like in the case of the new Settings Layout. Otherwise, it's hard to differentiate between title and settings-row.

The proper method is to style Card itself, but this is a quick fix for the Settings Page PR. Will come back to it later.
---
 ui/component/settingAccount/view.jsx    | 103 ++---
 ui/component/settingAppearance/view.jsx |  97 ++---
 ui/component/settingContent/view.jsx    | 251 ++++++------
 ui/component/settingSystem/view.jsx     | 483 ++++++++++++------------
 4 files changed, 473 insertions(+), 461 deletions(-)

diff --git a/ui/component/settingAccount/view.jsx b/ui/component/settingAccount/view.jsx
index f8a94230e..c0593a09b 100644
--- a/ui/component/settingAccount/view.jsx
+++ b/ui/component/settingAccount/view.jsx
@@ -34,62 +34,65 @@ export default function SettingAccount(props: Props) {
         }
       });
     }
-    // enterSettings(); @KP need to do this at each component, or just at Settings Page?
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
-    <Card
-      id={SETTINGS_GRP.ACCOUNT}
-      title={__('Account')}
-      subtitle=""
-      isBodyList
-      body={
-        <>
-          {isAuthenticated && (
+    <>
+      <div className="card__title-section">
+        <h2 className="card__title">{__('Account')}</h2>
+      </div>
+
+      <Card
+        id={SETTINGS_GRP.ACCOUNT}
+        isBodyList
+        body={
+          <>
+            {isAuthenticated && (
+              <div className="card__main-actions">
+                <SettingAccountPassword />
+              </div>
+            )}
+
+            {/* @if TARGET='app' */}
             <div className="card__main-actions">
-              <SettingAccountPassword />
+              <SyncToggle disabled={walletEncrypted && !storedPassword && storedPassword !== ''} />
             </div>
-          )}
+            {/* @endif */}
 
-          {/* @if TARGET='app' */}
-          <div className="card__main-actions">
-            <SyncToggle disabled={walletEncrypted && !storedPassword && storedPassword !== ''} />
-          </div>
-          {/* @endif */}
+            {/* @if TARGET='web' */}
+            {user && getStripeEnvironment() && (
+              <SettingsRow
+                title={__('Bank Accounts')}
+                subtitle={__('Connect a bank account to receive tips and compensation in your local currency')}
+              >
+                <Button
+                  button="secondary"
+                  label={__('Manage')}
+                  icon={ICONS.SETTINGS}
+                  navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`}
+                />
+              </SettingsRow>
+            )}
+            {/* @endif */}
 
-          {/* @if TARGET='web' */}
-          {user && getStripeEnvironment() && (
-            <SettingsRow
-              title={__('Bank Accounts')}
-              subtitle={__('Connect a bank account to receive tips and compensation in your local currency')}
-            >
-              <Button
-                button="secondary"
-                label={__('Manage')}
-                icon={ICONS.SETTINGS}
-                navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`}
-              />
-            </SettingsRow>
-          )}
-          {/* @endif */}
-
-          {/* @if TARGET='web' */}
-          {isAuthenticated && getStripeEnvironment() && (
-            <SettingsRow
-              title={__('Payment Methods')}
-              subtitle={__('Add a credit card to tip creators in their local currency')}
-            >
-              <Button
-                button="secondary"
-                label={__('Manage')}
-                icon={ICONS.SETTINGS}
-                navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`}
-              />
-            </SettingsRow>
-          )}
-          {/* @endif */}
-        </>
-      }
-    />
+            {/* @if TARGET='web' */}
+            {isAuthenticated && getStripeEnvironment() && (
+              <SettingsRow
+                title={__('Payment Methods')}
+                subtitle={__('Add a credit card to tip creators in their local currency')}
+              >
+                <Button
+                  button="secondary"
+                  label={__('Manage')}
+                  icon={ICONS.SETTINGS}
+                  navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`}
+                />
+              </SettingsRow>
+            )}
+            {/* @endif */}
+          </>
+        }
+      />
+    </>
   );
 }
diff --git a/ui/component/settingAppearance/view.jsx b/ui/component/settingAppearance/view.jsx
index be62e926d..436e390b5 100644
--- a/ui/component/settingAppearance/view.jsx
+++ b/ui/component/settingAppearance/view.jsx
@@ -24,62 +24,65 @@ export default function SettingAppearance(props: Props) {
   const { clock24h, searchInLanguage, isAuthenticated, hideBalance, setClientSetting, setSearchInLanguage } = props;
 
   return (
-    <Card
-      id={SETTINGS_GRP.APPEARANCE}
-      title={__('Appearance')}
-      subtitle=""
-      isBodyList
-      body={
-        <>
-          {homepages && Object.keys(homepages).length > 1 && (
-            <SettingsRow title={__('Homepage')} subtitle={__('Tailor your experience.')}>
-              <HomepageSelector />
+    <>
+      <div className="card__title-section">
+        <h2 className="card__title">{__('Appearance')}</h2>
+      </div>
+      <Card
+        id={SETTINGS_GRP.APPEARANCE}
+        isBodyList
+        body={
+          <>
+            {homepages && Object.keys(homepages).length > 1 && (
+              <SettingsRow title={__('Homepage')} subtitle={__('Tailor your experience.')}>
+                <HomepageSelector />
+              </SettingsRow>
+            )}
+
+            <SettingsRow title={__('Language')} subtitle={__(HELP.LANGUAGE)}>
+              <SettingLanguage />
             </SettingsRow>
-          )}
 
-          <SettingsRow title={__('Language')} subtitle={__(HELP.LANGUAGE)}>
-            <SettingLanguage />
-          </SettingsRow>
-
-          <SettingsRow title={__('Search only in the selected language by default')}>
-            <FormField
-              name="search-in-language"
-              type="checkbox"
-              checked={searchInLanguage}
-              onChange={() => setSearchInLanguage(!searchInLanguage)}
-            />
-          </SettingsRow>
-
-          <SettingsRow title={__('Theme')}>
-            <ThemeSelector />
-          </SettingsRow>
-
-          <SettingsRow title={__('24-hour clock')}>
-            <FormField
-              type="checkbox"
-              name="clock24h"
-              onChange={() => setClientSetting(SETTINGS.CLOCK_24H, !clock24h)}
-              checked={clock24h}
-            />
-          </SettingsRow>
-
-          {(isAuthenticated || !IS_WEB) && (
-            <SettingsRow title={__('Hide wallet balance in header')}>
+            <SettingsRow title={__('Search only in the selected language by default')}>
               <FormField
+                name="search-in-language"
                 type="checkbox"
-                name="hide_balance"
-                onChange={() => setClientSetting(SETTINGS.HIDE_BALANCE, !hideBalance)}
-                checked={hideBalance}
+                checked={searchInLanguage}
+                onChange={() => setSearchInLanguage(!searchInLanguage)}
               />
             </SettingsRow>
-          )}
-        </>
-      }
-    />
+
+            <SettingsRow title={__('Theme')}>
+              <ThemeSelector />
+            </SettingsRow>
+
+            <SettingsRow title={__('24-hour clock')}>
+              <FormField
+                type="checkbox"
+                name="clock24h"
+                onChange={() => setClientSetting(SETTINGS.CLOCK_24H, !clock24h)}
+                checked={clock24h}
+              />
+            </SettingsRow>
+
+            {(isAuthenticated || !IS_WEB) && (
+              <SettingsRow title={__('Hide wallet balance in header')}>
+                <FormField
+                  type="checkbox"
+                  name="hide_balance"
+                  onChange={() => setClientSetting(SETTINGS.HIDE_BALANCE, !hideBalance)}
+                  checked={hideBalance}
+                />
+              </SettingsRow>
+            )}
+          </>
+        }
+      />
+    </>
   );
 }
 
-// prettier-disable
+// prettier-ignore
 const HELP = {
   LANGUAGE: 'Multi-language support is brand new and incomplete. Switching your language may have unintended consequences, like glossolalia.',
 };
diff --git a/ui/component/settingContent/view.jsx b/ui/component/settingContent/view.jsx
index fb1dd5e74..42c2dbd17 100644
--- a/ui/component/settingContent/view.jsx
+++ b/ui/component/settingContent/view.jsx
@@ -52,51 +52,53 @@ export default function SettingContent(props: Props) {
   } = props;
 
   return (
-    <Card
-      id={SETTINGS_GRP.CONTENT}
-      title={__('Content settings')}
-      subtitle=""
-      isBodyList
-      body={
-        <>
-          <SettingsRow title={__('Floating video player')} subtitle={__(HELP_FLOATING_PLAYER)}>
-            <FormField
-              type="checkbox"
-              name="floating_player"
-              onChange={() => {
-                setClientSetting(SETTINGS.FLOATING_PLAYER, !floatingPlayer);
-                clearPlayingUri();
-              }}
-              checked={floatingPlayer}
-            />
-          </SettingsRow>
+    <>
+      <div className="card__title-section">
+        <h2 className="card__title">{__('Content settings')}</h2>
+      </div>
+      <Card
+        id={SETTINGS_GRP.CONTENT}
+        isBodyList
+        body={
+          <>
+            <SettingsRow title={__('Floating video player')} subtitle={__(HELP_FLOATING_PLAYER)}>
+              <FormField
+                type="checkbox"
+                name="floating_player"
+                onChange={() => {
+                  setClientSetting(SETTINGS.FLOATING_PLAYER, !floatingPlayer);
+                  clearPlayingUri();
+                }}
+                checked={floatingPlayer}
+              />
+            </SettingsRow>
 
-          <SettingsRow title={__('Autoplay media files')} subtitle={__(HELP_AUTOPLAY)}>
-            <FormField
-              type="checkbox"
-              name="autoplay"
-              onChange={() => setClientSetting(SETTINGS.AUTOPLAY, !autoplay)}
-              checked={autoplay}
-            />
-          </SettingsRow>
+            <SettingsRow title={__('Autoplay media files')} subtitle={__(HELP_AUTOPLAY)}>
+              <FormField
+                type="checkbox"
+                name="autoplay"
+                onChange={() => setClientSetting(SETTINGS.AUTOPLAY, !autoplay)}
+                checked={autoplay}
+              />
+            </SettingsRow>
 
-          {!SIMPLE_SITE && (
-            <>
-              <SettingsRow title={__('Hide reposts')} subtitle={__(HELP_HIDE_REPOSTS)}>
-                <FormField
-                  type="checkbox"
-                  name="hide_reposts"
-                  onChange={(e) => {
-                    if (isAuthenticated) {
-                      let param = e.target.checked ? { add: 'noreposts' } : { remove: 'noreposts' };
-                      Lbryio.call('user_tag', 'edit', param);
-                    }
-                    setClientSetting(SETTINGS.HIDE_REPOSTS, !hideReposts);
-                  }}
-                />
-              </SettingsRow>
+            {!SIMPLE_SITE && (
+              <>
+                <SettingsRow title={__('Hide reposts')} subtitle={__(HELP_HIDE_REPOSTS)}>
+                  <FormField
+                    type="checkbox"
+                    name="hide_reposts"
+                    onChange={(e) => {
+                      if (isAuthenticated) {
+                        let param = e.target.checked ? { add: 'noreposts' } : { remove: 'noreposts' };
+                        Lbryio.call('user_tag', 'edit', param);
+                      }
+                      setClientSetting(SETTINGS.HIDE_REPOSTS, !hideReposts);
+                    }}
+                  />
+                </SettingsRow>
 
-              {/*
+                {/*
               <SettingsRow title={__('Show anonymous content')} subtitle={__('Anonymous content is published without a channel.')} >
                 <FormField
                   type="checkbox"
@@ -107,98 +109,99 @@ export default function SettingContent(props: Props) {
               </SettingsRow>
               */}
 
-              <SettingsRow title={__('Show mature content')} subtitle={__(HELP_SHOW_MATURE)}>
-                <FormField
-                  type="checkbox"
-                  name="show_nsfw"
-                  checked={showNsfw}
-                  onChange={() =>
-                    !IS_WEB || showNsfw
-                      ? setClientSetting(SETTINGS.SHOW_MATURE, !showNsfw)
-                      : openModal(MODALS.CONFIRM_AGE)
-                  }
-                />
-              </SettingsRow>
-            </>
-          )}
+                <SettingsRow title={__('Show mature content')} subtitle={__(HELP_SHOW_MATURE)}>
+                  <FormField
+                    type="checkbox"
+                    name="show_nsfw"
+                    checked={showNsfw}
+                    onChange={() =>
+                      !IS_WEB || showNsfw
+                        ? setClientSetting(SETTINGS.SHOW_MATURE, !showNsfw)
+                        : openModal(MODALS.CONFIRM_AGE)
+                    }
+                  />
+                </SettingsRow>
+              </>
+            )}
 
-          {(isAuthenticated || !IS_WEB) && (
-            <>
-              <SettingsRow title={__('Notifications')}>
-                <Button
-                  button="secondary"
-                  label={__('Manage')}
-                  icon={ICONS.SETTINGS}
-                  navigate={`/$/${PAGES.SETTINGS_NOTIFICATIONS}`}
-                />
-              </SettingsRow>
-
-              <SettingsRow title={__('Blocked and muted channels')}>
-                <Button
-                  button="secondary"
-                  label={__('Manage')}
-                  icon={ICONS.SETTINGS}
-                  navigate={`/$/${PAGES.SETTINGS_BLOCKED_MUTED}`}
-                />
-              </SettingsRow>
-
-              {myChannelUrls && myChannelUrls.length > 0 && (
-                <SettingsRow title={__('Creator settings')}>
+            {(isAuthenticated || !IS_WEB) && (
+              <>
+                <SettingsRow title={__('Notifications')}>
                   <Button
                     button="secondary"
                     label={__('Manage')}
                     icon={ICONS.SETTINGS}
-                    navigate={`/$/${PAGES.SETTINGS_CREATOR}`}
+                    navigate={`/$/${PAGES.SETTINGS_NOTIFICATIONS}`}
                   />
                 </SettingsRow>
-              )}
-            </>
-          )}
 
-          <SettingsRow title={__('Publish confirmation')} subtitle={__('Skip preview and confirmation')}>
-            <FormField
-              type="checkbox"
-              name="sync_toggle"
-              label={__('')}
-              checked={!enablePublishPreview}
-              onChange={() => setClientSetting(SETTINGS.ENABLE_PUBLISH_PREVIEW, !enablePublishPreview)}
-            />
-          </SettingsRow>
+                <SettingsRow title={__('Blocked and muted channels')}>
+                  <Button
+                    button="secondary"
+                    label={__('Manage')}
+                    icon={ICONS.SETTINGS}
+                    navigate={`/$/${PAGES.SETTINGS_BLOCKED_MUTED}`}
+                  />
+                </SettingsRow>
 
-          {/* @if TARGET='app' */}
-          <SettingsRow title={__('Max purchase price')} subtitle={__(HELP_MAX_PURCHASE_PRICE)} useVerticalSeparator>
-            <MaxPurchasePrice />
-          </SettingsRow>
-          {/* @endif */}
-
-          <SettingsRow title={__('Purchase and tip confirmations')} useVerticalSeparator>
-            <FormField
-              type="radio"
-              name="confirm_all_purchases"
-              checked={!instantPurchaseEnabled}
-              label={__('Always confirm before purchasing content or tipping')}
-              onChange={() => setClientSetting(SETTINGS.INSTANT_PURCHASE_ENABLED, false)}
-            />
-            <FormField
-              type="radio"
-              name="instant_purchases"
-              checked={instantPurchaseEnabled}
-              label={__('Only confirm purchases or tips over a certain amount')}
-              helper={__(HELP_ONLY_CONFIRM_OVER_AMOUNT)}
-              onChange={() => setClientSetting(SETTINGS.INSTANT_PURCHASE_ENABLED, true)}
-            />
-            {instantPurchaseEnabled && (
-              <FormFieldPrice
-                name="confirmation_price"
-                min={0.1}
-                onChange={(newValue) => setClientSetting(SETTINGS.INSTANT_PURCHASE_MAX, newValue)}
-                price={instantPurchaseMax}
-              />
+                {myChannelUrls && myChannelUrls.length > 0 && (
+                  <SettingsRow title={__('Creator settings')}>
+                    <Button
+                      button="secondary"
+                      label={__('Manage')}
+                      icon={ICONS.SETTINGS}
+                      navigate={`/$/${PAGES.SETTINGS_CREATOR}`}
+                    />
+                  </SettingsRow>
+                )}
+              </>
             )}
-          </SettingsRow>
-        </>
-      }
-    />
+
+            <SettingsRow title={__('Publish confirmation')} subtitle={__('Skip preview and confirmation')}>
+              <FormField
+                type="checkbox"
+                name="sync_toggle"
+                label={__('')}
+                checked={!enablePublishPreview}
+                onChange={() => setClientSetting(SETTINGS.ENABLE_PUBLISH_PREVIEW, !enablePublishPreview)}
+              />
+            </SettingsRow>
+
+            {/* @if TARGET='app' */}
+            <SettingsRow title={__('Max purchase price')} subtitle={__(HELP_MAX_PURCHASE_PRICE)} useVerticalSeparator>
+              <MaxPurchasePrice />
+            </SettingsRow>
+            {/* @endif */}
+
+            <SettingsRow title={__('Purchase and tip confirmations')} useVerticalSeparator>
+              <FormField
+                type="radio"
+                name="confirm_all_purchases"
+                checked={!instantPurchaseEnabled}
+                label={__('Always confirm before purchasing content or tipping')}
+                onChange={() => setClientSetting(SETTINGS.INSTANT_PURCHASE_ENABLED, false)}
+              />
+              <FormField
+                type="radio"
+                name="instant_purchases"
+                checked={instantPurchaseEnabled}
+                label={__('Only confirm purchases or tips over a certain amount')}
+                helper={__(HELP_ONLY_CONFIRM_OVER_AMOUNT)}
+                onChange={() => setClientSetting(SETTINGS.INSTANT_PURCHASE_ENABLED, true)}
+              />
+              {instantPurchaseEnabled && (
+                <FormFieldPrice
+                  name="confirmation_price"
+                  min={0.1}
+                  onChange={(newValue) => setClientSetting(SETTINGS.INSTANT_PURCHASE_MAX, newValue)}
+                  price={instantPurchaseMax}
+                />
+              )}
+            </SettingsRow>
+          </>
+        }
+      />
+    </>
   );
 }
 
diff --git a/ui/component/settingSystem/view.jsx b/ui/component/settingSystem/view.jsx
index 21894c3be..7f4bbd138 100644
--- a/ui/component/settingSystem/view.jsx
+++ b/ui/component/settingSystem/view.jsx
@@ -121,222 +121,224 @@ export default function SettingSystem(props: Props) {
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
-    <Card
-      id={SETTINGS_GRP.SYSTEM}
-      title={__('System')}
-      subtitle=""
-      isBodyList
-      body={
-        <>
-          {/* @if TARGET='app' */}
-          <SettingsRow title={__('Download directory')} subtitle={__('LBRY downloads will be saved here.')}>
-            <FileSelector
-              type="openDirectory"
-              currentPath={daemonSettings.download_dir}
-              onFileChosen={(newDirectory: WebFile) => {
-                setDaemonSetting('download_dir', newDirectory.path);
-              }}
-            />
-          </SettingsRow>
-          {/* @endif */}
+    <>
+      <div className="card__title-section">
+        <h2 className="card__title">{__('System')}</h2>
+      </div>
+      <Card
+        id={SETTINGS_GRP.SYSTEM}
+        isBodyList
+        body={
+          <>
+            {/* @if TARGET='app' */}
+            <SettingsRow title={__('Download directory')} subtitle={__('LBRY downloads will be saved here.')}>
+              <FileSelector
+                type="openDirectory"
+                currentPath={daemonSettings.download_dir}
+                onFileChosen={(newDirectory: WebFile) => {
+                  setDaemonSetting('download_dir', newDirectory.path);
+                }}
+              />
+            </SettingsRow>
+            {/* @endif */}
 
-          {/* @if TARGET='app' */}
-          <SettingsRow
-            title={__('Save all viewed content to your downloads directory')}
-            subtitle={__(
-              'Paid content and some file types are saved by default. Changing this setting will not affect previously downloaded content.'
-            )}
-          >
-            <FormField
-              type="checkbox"
-              name="save_files"
-              onChange={() => setDaemonSetting('save_files', !daemonSettings.save_files)}
-              checked={daemonSettings.save_files}
-            />
-          </SettingsRow>
-          <SettingsRow
-            title={__('Save hosting data to help the LBRY network')}
-            subtitle={
-              <React.Fragment>
-                {__("If disabled, LBRY will be very sad and you won't be helping improve the network.")}{' '}
-                <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/host-content" />.
-              </React.Fragment>
-            }
-          >
-            <FormField
-              type="checkbox"
-              name="save_blobs"
-              onChange={() => setDaemonSetting('save_blobs', !daemonSettings.save_blobs)}
-              checked={daemonSettings.save_blobs}
-            />
-          </SettingsRow>
-          {/* @endif */}
-
-          {/* @if TARGET='app' */}
-          <SettingsRow
-            title={__('Share usage and diagnostic data')}
-            subtitle={
-              <React.Fragment>
-                {__(
-                  `This is information like error logging, performance tracking, and usage statistics. It includes your IP address and basic system details, but no other identifying information (unless you sign in to lbry.tv)`
-                )}{' '}
-                <Button button="link" label={__('Learn more')} href="https://lbry.com/privacypolicy" />
-              </React.Fragment>
-            }
-            useVerticalSeparator
-          >
-            <FormField
-              type="checkbox"
-              name="share_internal"
-              onChange={() => setDaemonSetting('share_usage_data', !daemonSettings.share_usage_data)}
-              checked={daemonSettings.share_usage_data}
-              label={<React.Fragment>{__('Allow the app to share data to LBRY.inc')}</React.Fragment>}
-              helper={
-                isAuthenticated
-                  ? __('Internal sharing is required while signed in.')
-                  : __('Internal sharing is required to participate in rewards programs.')
-              }
-              disabled={isAuthenticated && daemonSettings.share_usage_data}
-            />
-            <FormField
-              type="checkbox"
-              name="share_third_party"
-              onChange={(e) => toggle3PAnalytics(e.target.checked)}
-              checked={allowAnalytics}
-              label={__('Allow the app to access third party analytics platforms')}
-              helper={__('We use detailed analytics to improve all aspects of the LBRY experience.')}
-            />
-          </SettingsRow>
-          {/* @endif */}
-
-          {/* @if TARGET='app' */}
-          {/* Auto launch in a hidden state doesn't work on mac https://github.com/Teamwork/node-auto-launch/issues/81 */}
-          {!IS_MAC && (
+            {/* @if TARGET='app' */}
             <SettingsRow
-              title={__('Start minimized')}
+              title={__('Save all viewed content to your downloads directory')}
               subtitle={__(
-                'Improve view speed and help the LBRY network by allowing the app to cuddle up in your system tray.'
+                'Paid content and some file types are saved by default. Changing this setting will not affect previously downloaded content.'
               )}
             >
-              <SettingAutoLaunch noLabels />
+              <FormField
+                type="checkbox"
+                name="save_files"
+                onChange={() => setDaemonSetting('save_files', !daemonSettings.save_files)}
+                checked={daemonSettings.save_files}
+              />
             </SettingsRow>
-          )}
-          {/* @endif */}
-
-          {/* @if TARGET='app' */}
-          <SettingsRow title={__('Leave app running in notification area when the window is closed')}>
-            <SettingClosingBehavior noLabels />
-          </SettingsRow>
-          {/* @endif */}
-
-          {/* @if TARGET='app' */}
-          <SettingsRow
-            title={
-              <span>
-                {__('Automatic transcoding')}
-                {findingFFmpeg && <Spinner type="small" />}
-              </span>
-            }
-          >
-            <FileSelector
-              type="openDirectory"
-              placeholder={__('A Folder containing FFmpeg')}
-              currentPath={ffmpegPath || daemonSettings.ffmpeg_path}
-              onFileChosen={(newDirectory: WebFile) => {
-                // $FlowFixMe
-                setDaemonSetting('ffmpeg_path', newDirectory.path);
-                findFFmpeg();
-              }}
-              disabled={Boolean(ffmpegPath)}
-            />
-            <p className="help">
-              {ffmpegAvailable ? (
-                <I18nMessage
-                  tokens={{
-                    learn_more: (
-                      <Button
-                        button="link"
-                        label={__('Learn more')}
-                        href="https://lbry.com/faq/video-publishing-guide#automatic"
-                      />
-                    ),
-                  }}
-                >
-                  FFmpeg is correctly configured. %learn_more%
-                </I18nMessage>
-              ) : (
-                <I18nMessage
-                  tokens={{
-                    check_again: (
-                      <Button
-                        button="link"
-                        label={__('Check again')}
-                        onClick={() => findFFmpeg()}
-                        disabled={findingFFmpeg}
-                      />
-                    ),
-                    learn_more: (
-                      <Button
-                        button="link"
-                        label={__('Learn more')}
-                        href="https://lbry.com/faq/video-publishing-guide#automatic"
-                      />
-                    ),
-                  }}
-                >
-                  FFmpeg could not be found. Navigate to it or Install, Then %check_again% or quit and restart the app.
-                  %learn_more%
-                </I18nMessage>
-              )}
-            </p>
-          </SettingsRow>
-          {/* @endif */}
-
-          {/* @if TARGET='app' */}
-          <SettingsRow title={__('Wallet security')}>
-            <FormField
-              disabled
-              type="checkbox"
-              name="encrypt_wallet"
-              onChange={() => onChangeEncryptWallet()}
-              checked={walletEncrypted}
-              label={__('Encrypt my wallet with a custom password')}
-              helper={
+            <SettingsRow
+              title={__('Save hosting data to help the LBRY network')}
+              subtitle={
                 <React.Fragment>
+                  {__("If disabled, LBRY will be very sad and you won't be helping improve the network.")}{' '}
+                  <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/host-content" />.
+                </React.Fragment>
+              }
+            >
+              <FormField
+                type="checkbox"
+                name="save_blobs"
+                onChange={() => setDaemonSetting('save_blobs', !daemonSettings.save_blobs)}
+                checked={daemonSettings.save_blobs}
+              />
+            </SettingsRow>
+            {/* @endif */}
+
+            {/* @if TARGET='app' */}
+            <SettingsRow
+              title={__('Share usage and diagnostic data')}
+              subtitle={
+                <React.Fragment>
+                  {__(
+                    `This is information like error logging, performance tracking, and usage statistics. It includes your IP address and basic system details, but no other identifying information (unless you sign in to lbry.tv)`
+                  )}{' '}
+                  <Button button="link" label={__('Learn more')} href="https://lbry.com/privacypolicy" />
+                </React.Fragment>
+              }
+              useVerticalSeparator
+            >
+              <FormField
+                type="checkbox"
+                name="share_internal"
+                onChange={() => setDaemonSetting('share_usage_data', !daemonSettings.share_usage_data)}
+                checked={daemonSettings.share_usage_data}
+                label={<React.Fragment>{__('Allow the app to share data to LBRY.inc')}</React.Fragment>}
+                helper={
+                  isAuthenticated
+                    ? __('Internal sharing is required while signed in.')
+                    : __('Internal sharing is required to participate in rewards programs.')
+                }
+                disabled={isAuthenticated && daemonSettings.share_usage_data}
+              />
+              <FormField
+                type="checkbox"
+                name="share_third_party"
+                onChange={(e) => toggle3PAnalytics(e.target.checked)}
+                checked={allowAnalytics}
+                label={__('Allow the app to access third party analytics platforms')}
+                helper={__('We use detailed analytics to improve all aspects of the LBRY experience.')}
+              />
+            </SettingsRow>
+            {/* @endif */}
+
+            {/* @if TARGET='app' */}
+            {/* Auto launch in a hidden state doesn't work on mac https://github.com/Teamwork/node-auto-launch/issues/81 */}
+            {!IS_MAC && (
+              <SettingsRow
+                title={__('Start minimized')}
+                subtitle={__(
+                  'Improve view speed and help the LBRY network by allowing the app to cuddle up in your system tray.'
+                )}
+              >
+                <SettingAutoLaunch noLabels />
+              </SettingsRow>
+            )}
+            {/* @endif */}
+
+            {/* @if TARGET='app' */}
+            <SettingsRow title={__('Leave app running in notification area when the window is closed')}>
+              <SettingClosingBehavior noLabels />
+            </SettingsRow>
+            {/* @endif */}
+
+            {/* @if TARGET='app' */}
+            <SettingsRow
+              title={
+                <span>
+                  {__('Automatic transcoding')}
+                  {findingFFmpeg && <Spinner type="small" />}
+                </span>
+              }
+            >
+              <FileSelector
+                type="openDirectory"
+                placeholder={__('A Folder containing FFmpeg')}
+                currentPath={ffmpegPath || daemonSettings.ffmpeg_path}
+                onFileChosen={(newDirectory: WebFile) => {
+                  // $FlowFixMe
+                  setDaemonSetting('ffmpeg_path', newDirectory.path);
+                  findFFmpeg();
+                }}
+                disabled={Boolean(ffmpegPath)}
+              />
+              <p className="help">
+                {ffmpegAvailable ? (
                   <I18nMessage
                     tokens={{
                       learn_more: (
-                        <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/account-sync" />
+                        <Button
+                          button="link"
+                          label={__('Learn more')}
+                          href="https://lbry.com/faq/video-publishing-guide#automatic"
+                        />
                       ),
                     }}
                   >
-                    Wallet encryption is currently unavailable until it's supported for synced accounts. It will be
-                    added back soon. %learn_more%.
+                    FFmpeg is correctly configured. %learn_more%
                   </I18nMessage>
-                  {/* {__('Secure your local wallet data with a custom password.')}{' '}
+                ) : (
+                  <I18nMessage
+                    tokens={{
+                      check_again: (
+                        <Button
+                          button="link"
+                          label={__('Check again')}
+                          onClick={() => findFFmpeg()}
+                          disabled={findingFFmpeg}
+                        />
+                      ),
+                      learn_more: (
+                        <Button
+                          button="link"
+                          label={__('Learn more')}
+                          href="https://lbry.com/faq/video-publishing-guide#automatic"
+                        />
+                      ),
+                    }}
+                  >
+                    FFmpeg could not be found. Navigate to it or Install, Then %check_again% or quit and restart the
+                    app. %learn_more%
+                  </I18nMessage>
+                )}
+              </p>
+            </SettingsRow>
+            {/* @endif */}
+
+            {/* @if TARGET='app' */}
+            <SettingsRow title={__('Wallet security')}>
+              <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>
-              }
-            />
-
-            {walletEncrypted && storedPassword && (
-              <FormField
-                type="checkbox"
-                name="save_password"
-                onChange={onConfirmForgetPassword}
-                checked={storedPassword}
-                label={__('Save Password')}
-                helper={<React.Fragment>{__('Automatically unlock your wallet on startup')}</React.Fragment>}
+                  </React.Fragment>
+                }
               />
-            )}
-          </SettingsRow>
-          {/* @endif */}
 
-          {/* @if TARGET='app' */}
-          <SettingsRow title={__('Experimental settings')} useVerticalSeparator>
-            {/* Disabling below until we get downloads to work with shared subscriptions code */}
-            {/*
+              {walletEncrypted && storedPassword && (
+                <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>
+            {/* @endif */}
+
+            {/* @if TARGET='app' */}
+            <SettingsRow title={__('Experimental settings')} useVerticalSeparator>
+              {/* Disabling below until we get downloads to work with shared subscriptions code */}
+              {/*
             <FormField
               type="checkbox"
               name="auto_download"
@@ -349,49 +351,50 @@ export default function SettingSystem(props: Props) {
             />
             */}
 
-            <fieldset-section>
-              <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)}
-                value={daemonSettings.max_connections_per_download}
-              >
-                {[1, 2, 4, 6, 10, 20].map((connectionOption) => (
-                  <option key={connectionOption} value={connectionOption}>
-                    {connectionOption}
-                  </option>
-                ))}
-              </FormField>
-            </fieldset-section>
+              <fieldset-section>
+                <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)}
+                  value={daemonSettings.max_connections_per_download}
+                >
+                  {[1, 2, 4, 6, 10, 20].map((connectionOption) => (
+                    <option key={connectionOption} value={connectionOption}>
+                      {connectionOption}
+                    </option>
+                  ))}
+                </FormField>
+              </fieldset-section>
 
-            <SettingWalletServer />
-            <SettingCommentsServer />
-          </SettingsRow>
-          {/* @endif */}
+              <SettingWalletServer />
+              <SettingCommentsServer />
+            </SettingsRow>
+            {/* @endif */}
 
-          <SettingsRow
-            title={__('Clear application cache')}
-            subtitle={__('This might fix issues that you are having. Your wallet will not be affected.')}
-          >
-            <Button
-              button="secondary"
-              icon={ALERT}
-              label={clearingCache ? __('Clearing') : __('Clear Cache')}
-              onClick={() => {
-                setClearingCache(true);
-                clearCache();
-              }}
-              disabled={clearingCache}
-            />
-          </SettingsRow>
-        </>
-      }
-    />
+            <SettingsRow
+              title={__('Clear application cache')}
+              subtitle={__('This might fix issues that you are having. Your wallet will not be affected.')}
+            >
+              <Button
+                button="secondary"
+                icon={ALERT}
+                label={clearingCache ? __('Clearing') : __('Clear Cache')}
+                onClick={() => {
+                  setClearingCache(true);
+                  clearCache();
+                }}
+                disabled={clearingCache}
+              />
+            </SettingsRow>
+          </>
+        }
+      />
+    </>
   );
 }