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,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
+      {!hasAcknowledgedSec && (
-      noTitleWrap
+        <div className="notice-message">
-      title={
+          <Button button="close" icon={ICONS.REMOVE} onClick={() => setHasAcknowledgedSec(true)} />
-        <React.Fragment>
+          <h1 className="section__title">{__('Help LBRY Save Crypto')}</h1>
-          {title}
+          <p className="section__subtitle">
-          {nsfw && (
+            {__(
-            <span className="media__title-badge">
+              'The SEC doesn’t understand blockchain. The claims made in SEC vs. LBRY would destroy the United States cryptocurrency industry.'
-              <span className="badge badge--tag-mature">{__('Mature')}</span>
+            )}{' '}
-            </span>
+            <Button label={__('Learn more')} button="link" href="https://helplbrysavecrypto.com" />
-          )}
+          </p>
-        </React.Fragment>
+        </div>
-      }
+      )}
-      titleActions={<FilePrice uri={normalizeURI(uri)} type="filepage" />}
+      <Card
-      body={
+        isPageTitle
-        <React.Fragment>
+        noTitleWrap
-          <ClaimInsufficientCredits uri={uri} />
+        title={
-          <FileSubtitle uri={uri} livestream={livestream} activeViewers={activeViewers} stateOfViewers={stateOfViewers} />
+          <React.Fragment>
-        </React.Fragment>
+            {title}
-      }
+            {nsfw && (
-      actions={
+              <span className="media__title-badge">
-        isNsfwBlocked ? (
+                <span className="badge badge--tag-mature">{__('Mature')}</span>
-          <div className="main--empty">
+              </span>
-            <h2>
+            )}
-              <Icon className="icon--hidden" icon={ICONS.EYE_OFF} />
+          </React.Fragment>
-              {__('Mature content blocked.')}
+        }
-            </h2>
+        titleActions={<FilePrice uri={normalizeURI(uri)} type="filepage" />}
-            <div>
+        body={
-              <I18nMessage
+          <React.Fragment>
-                tokens={{
+            <ClaimInsufficientCredits uri={uri} />
-                  content_settings: (
+            <FileSubtitle
-                    <Button button="link" label={__('content settings')} navigate={`/$/${PAGES.SETTINGS}`} />
+              uri={uri}
-                  ),
+              livestream={livestream}
-                }}
+              activeViewers={activeViewers}
-              >
+              stateOfViewers={stateOfViewers}
-                Change this in your %content_settings%.
+            />
-              </I18nMessage>
+          </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">
-          <div className="section">
+              <FileAuthor uri={uri} />
-            <FileAuthor uri={uri} />
+              <FileDescription uri={uri} />
-            <FileDescription uri={uri} />
+            </div>
-          </div>
+          )
-        )
+        }
-      }
+      />
-    />
+    </>
   );
 }
 

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 {