From 21ad5077f7e105ee734d5203e1bf1cfec13842c3 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 30 Mar 2021 12:00:30 -0400
Subject: [PATCH] add helplbrysavecrypto prompt and fix file page UI bugs

---
 ui/component/comment/view.jsx          |   2 +-
 ui/component/fileTitleSection/view.jsx | 113 +++++++++++++++----------
 ui/component/uriIndicator/view.jsx     |  22 ++++-
 ui/scss/component/_main.scss           |   6 +-
 ui/scss/init/_gui.scss                 |   5 ++
 5 files changed, 93 insertions(+), 55 deletions(-)

diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx
index 006da4d75..3ef1ded24 100644
--- a/ui/component/comment/view.jsx
+++ b/ui/component/comment/view.jsx
@@ -197,7 +197,7 @@ function Comment(props: Props) {
               {!author ? (
                 <span className="comment__author">{__('Anonymous')}</span>
               ) : (
-                <UriIndicator link external={livestream} uri={authorUri} />
+                <UriIndicator className="comment__author" link external={livestream} uri={authorUri} />
               )}
               {!livestream && (
                 <Button
diff --git a/ui/component/fileTitleSection/view.jsx b/ui/component/fileTitleSection/view.jsx
index 218f131d0..c7f4b9b77 100644
--- a/ui/component/fileTitleSection/view.jsx
+++ b/ui/component/fileTitleSection/view.jsx
@@ -12,6 +12,7 @@ import I18nMessage from 'component/i18nMessage';
 import Button from 'component/button';
 import * as PAGES from 'constants/pages';
 import FileDescription from 'component/fileDescription';
+import usePersistedState from 'effects/use-persisted-state';
 
 type Props = {
   uri: string,
@@ -25,55 +26,75 @@ type Props = {
 
 function FileTitleSection(props: Props) {
   const { title, uri, nsfw, isNsfwBlocked, livestream = false, activeViewers, stateOfViewers } = props;
+  const [hasAcknowledgedSec, setHasAcknowledgedSec] = usePersistedState('sec-nag', false);
 
   return (
-    <Card
-      isPageTitle
-      noTitleWrap
-      title={
-        <React.Fragment>
-          {title}
-          {nsfw && (
-            <span className="media__title-badge">
-              <span className="badge badge--tag-mature">{__('Mature')}</span>
-            </span>
-          )}
-        </React.Fragment>
-      }
-      titleActions={<FilePrice uri={normalizeURI(uri)} type="filepage" />}
-      body={
-        <React.Fragment>
-          <ClaimInsufficientCredits uri={uri} />
-          <FileSubtitle uri={uri} livestream={livestream} activeViewers={activeViewers} stateOfViewers={stateOfViewers} />
-        </React.Fragment>
-      }
-      actions={
-        isNsfwBlocked ? (
-          <div className="main--empty">
-            <h2>
-              <Icon className="icon--hidden" icon={ICONS.EYE_OFF} />
-              {__('Mature content blocked.')}
-            </h2>
-            <div>
-              <I18nMessage
-                tokens={{
-                  content_settings: (
-                    <Button button="link" label={__('content settings')} navigate={`/$/${PAGES.SETTINGS}`} />
-                  ),
-                }}
-              >
-                Change this in your %content_settings%.
-              </I18nMessage>
+    <>
+      {!hasAcknowledgedSec && (
+        <div className="notice-message">
+          <Button button="close" icon={ICONS.REMOVE} onClick={() => setHasAcknowledgedSec(true)} />
+          <h1 className="section__title">{__('Help LBRY Save Crypto')}</h1>
+          <p className="section__subtitle">
+            {__(
+              'The SEC doesn’t understand blockchain. The claims made in SEC vs. LBRY would destroy the United States cryptocurrency industry.'
+            )}{' '}
+            <Button label={__('Learn more')} button="link" href="https://helplbrysavecrypto.com" />
+          </p>
+        </div>
+      )}
+      <Card
+        isPageTitle
+        noTitleWrap
+        title={
+          <React.Fragment>
+            {title}
+            {nsfw && (
+              <span className="media__title-badge">
+                <span className="badge badge--tag-mature">{__('Mature')}</span>
+              </span>
+            )}
+          </React.Fragment>
+        }
+        titleActions={<FilePrice uri={normalizeURI(uri)} type="filepage" />}
+        body={
+          <React.Fragment>
+            <ClaimInsufficientCredits uri={uri} />
+            <FileSubtitle
+              uri={uri}
+              livestream={livestream}
+              activeViewers={activeViewers}
+              stateOfViewers={stateOfViewers}
+            />
+          </React.Fragment>
+        }
+        actions={
+          isNsfwBlocked ? (
+            <div className="main--empty">
+              <h2>
+                <Icon className="icon--hidden" icon={ICONS.EYE_OFF} />
+                {__('Mature content blocked.')}
+              </h2>
+              <div>
+                <I18nMessage
+                  tokens={{
+                    content_settings: (
+                      <Button button="link" label={__('content settings')} navigate={`/$/${PAGES.SETTINGS}`} />
+                    ),
+                  }}
+                >
+                  Change this in your %content_settings%.
+                </I18nMessage>
+              </div>
             </div>
-          </div>
-        ) : (
-          <div className="section">
-            <FileAuthor uri={uri} />
-            <FileDescription uri={uri} />
-          </div>
-        )
-      }
-    />
+          ) : (
+            <div className="section">
+              <FileAuthor uri={uri} />
+              <FileDescription uri={uri} />
+            </div>
+          )
+        }
+      />
+    </>
   );
 }
 
diff --git a/ui/component/uriIndicator/view.jsx b/ui/component/uriIndicator/view.jsx
index 411996bc9..c89224a2e 100644
--- a/ui/component/uriIndicator/view.jsx
+++ b/ui/component/uriIndicator/view.jsx
@@ -18,6 +18,7 @@ type Props = {
   children: ?Node,
   inline: boolean,
   external?: boolean,
+  className?: string,
 };
 
 class UriIndicator extends React.PureComponent<Props> {
@@ -38,7 +39,16 @@ class UriIndicator extends React.PureComponent<Props> {
   };
 
   render() {
-    const { link, isResolvingUri, claim, children, inline, hideAnonymous = false, external = false } = this.props;
+    const {
+      link,
+      isResolvingUri,
+      claim,
+      children,
+      inline,
+      hideAnonymous = false,
+      external = false,
+      className,
+    } = this.props;
 
     if (!claim) {
       return <span className="empty">{isResolvingUri ? 'Validating...' : 'Unused'}</span>;
@@ -52,7 +62,7 @@ class UriIndicator extends React.PureComponent<Props> {
       }
 
       return (
-        <span dir="auto" className={classnames('channel-name', { 'channel-name--inline': inline })}>
+        <span dir="auto" className={classnames('channel-name', className, { 'channel-name--inline': inline })}>
           Anonymous
         </span>
       );
@@ -76,13 +86,17 @@ class UriIndicator extends React.PureComponent<Props> {
 
       if (children) {
         return (
-          <Button target={external ? '_blank' : undefined} navigate={channelLink}>
+          <Button className={className} target={external ? '_blank' : undefined} navigate={channelLink}>
             {children}
           </Button>
         );
       } else {
         return (
-          <Button className="button--uri-indicator" navigate={channelLink} target={external ? '_blank' : undefined}>
+          <Button
+            className={classnames(className, 'button--uri-indicator')}
+            navigate={channelLink}
+            target={external ? '_blank' : undefined}
+          >
             {inner}
           </Button>
         );
diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss
index 4d825ffb0..690fab7a1 100644
--- a/ui/scss/component/_main.scss
+++ b/ui/scss/component/_main.scss
@@ -111,17 +111,15 @@
     width: 35rem;
     margin-left: var(--spacing-m);
 
-    @media (max-width: $breakpoint-small) {
-      margin-left: 0;
-    }
-
     @media (max-width: $breakpoint-medium) {
       width: 100%;
+      margin-left: 0;
       margin-top: var(--spacing-l);
     }
   }
 
   @media (max-width: $breakpoint-medium) {
+    flex-direction: column;
     > :first-child {
       margin-right: 0;
     }
diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss
index be1225020..7148f5268 100644
--- a/ui/scss/init/_gui.scss
+++ b/ui/scss/init/_gui.scss
@@ -366,9 +366,14 @@ textarea {
 }
 
 .notice-message {
+  position: relative;
   border-radius: var(--border-radius);
   padding: var(--spacing-l);
   background-color: var(--color-primary-alt);
+
+  ~ .card {
+    margin-top: var(--spacing-m);
+  }
 }
 
 .notice-message--loud {