add helplbrysavecrypto prompt and fix file page UI bugs

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

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,8 +26,22 @@ type Props = {
 
 function FileTitleSection(props: Props) {
   const { title, uri, nsfw, isNsfwBlocked, livestream = false, activeViewers, stateOfViewers } = props;
+  const [hasAcknowledgedSec, setHasAcknowledgedSec] = usePersistedState('sec-nag', false);
 
   return (
+    <>
+      {!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
@@ -44,7 +59,12 @@ function FileTitleSection(props: Props) {
         body={
           <React.Fragment>
             <ClaimInsufficientCredits uri={uri} />
-          <FileSubtitle uri={uri} livestream={livestream} activeViewers={activeViewers} stateOfViewers={stateOfViewers} />
+            <FileSubtitle
+              uri={uri}
+              livestream={livestream}
+              activeViewers={activeViewers}
+              stateOfViewers={stateOfViewers}
+            />
           </React.Fragment>
         }
         actions={
@@ -74,6 +94,7 @@ function FileTitleSection(props: Props) {
           )
         }
       />
+    </>
   );
 }
 

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>
         );

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;
     }

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 {