From 0ab1aab4e7b6b6818b2b6a8928abf9bfd57b2cb9 Mon Sep 17 00:00:00 2001
From: jessopb <36554050+jessopb@users.noreply.github.com>
Date: Mon, 24 Jan 2022 22:12:27 -0500
Subject: [PATCH] make data hosting clearer (#7438)

---
 ui/component/settingSystem/view.jsx | 34 +++++++++++++++++++----------
 ui/scss/component/section.scss      | 10 +++++++++
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/ui/component/settingSystem/view.jsx b/ui/component/settingSystem/view.jsx
index a1a968645..464f9ad6c 100644
--- a/ui/component/settingSystem/view.jsx
+++ b/ui/component/settingSystem/view.jsx
@@ -225,18 +225,6 @@ export default function SettingSystem(props: Props) {
                   {__("If disabled, LBRY will be very sad and you won't be helping improve the network.")}{' '}
                   {__('If you set a limit, playing videos may exceed your limit until cleanup runs every 30 minutes.')}{' '}
                   <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/host-content" />.
-                  <p className={'help'}>
-                    {`Content Hosting using ${formatBytes(contentSpaceUsed * BYTES_PER_MB)} of ${
-                      daemonSettings[DAEMON_SETTINGS.BLOB_STORAGE_LIMIT_MB]
-                        ? formatBytes(daemonSettings[DAEMON_SETTINGS.BLOB_STORAGE_LIMIT_MB] * BYTES_PER_MB)
-                        : 'Unlimited'
-                    }`}
-                  </p>
-                  <p className={'help'}>
-                    {`Network Hosting using ${formatBytes(networkSpaceUsed * BYTES_PER_MB)} of ${formatBytes(
-                      daemonSettings[DAEMON_SETTINGS.NETWORK_STORAGE_LIMIT_MB] * BYTES_PER_MB
-                    )}`}
-                  </p>
                 </React.Fragment>
               }
             >
@@ -249,6 +237,18 @@ export default function SettingSystem(props: Props) {
                   label={__('Enable Data Hosting')}
                 />
               </fieldset-section>
+              {daemonSettings.save_blobs && (
+                <fieldset-section>
+                  <div className={'settings__row-section-title'}>{__('Hosting for content you have downloaded')}</div>
+                  <p className={'help'}>
+                    {`Content Hosting using ${formatBytes(contentSpaceUsed * BYTES_PER_MB)} of ${
+                      daemonSettings[DAEMON_SETTINGS.BLOB_STORAGE_LIMIT_MB]
+                        ? formatBytes(daemonSettings[DAEMON_SETTINGS.BLOB_STORAGE_LIMIT_MB] * BYTES_PER_MB)
+                        : 'Unlimited'
+                    }`}
+                  </p>
+                </fieldset-section>
+              )}
               {daemonSettings.save_blobs && (
                 <fieldset-section>
                   <FormField
@@ -279,6 +279,16 @@ export default function SettingSystem(props: Props) {
                   }
                 />
               )}
+              {daemonSettings.save_blobs && (
+                <fieldset-section>
+                  <div className={'settings__row-section-title'}>{__('Hosting content selected by the network')}</div>
+                  <p className={'help'}>
+                    {`Network Hosting using ${formatBytes(networkSpaceUsed * BYTES_PER_MB)} of ${formatBytes(
+                      daemonSettings[DAEMON_SETTINGS.NETWORK_STORAGE_LIMIT_MB] * BYTES_PER_MB
+                    )}`}
+                  </p>
+                </fieldset-section>
+              )}
               {daemonSettings.save_blobs && (
                 <FormField
                   name="network_blob_limit_gb"
diff --git a/ui/scss/component/section.scss b/ui/scss/component/section.scss
index 37e75f347..d66a716d0 100644
--- a/ui/scss/component/section.scss
+++ b/ui/scss/component/section.scss
@@ -226,6 +226,16 @@
   }
 }
 
+.settings__row-section-title {
+  min-width: 100%;
+  align-self: flex-start;
+  font-size: var(--font-medium);
+  @media (min-width: $breakpoint-small) {
+    min-width: 60%;
+    max-width: 60%;
+  }
+}
+
 .settings__row--subtitle {
   @extend .section__subtitle;
   font-size: var(--font-small);