update copy and only show welcome for unverified users

ui/component/youtubeWelcome/index.js

@@ -1,9 +1,14 @@
 import { connect } from 'react-redux';
 import { doOpenModal } from 'redux/actions/app';
+import { selectUser } from 'lbryinc';
 import YoutubeWelcome from './view';
 
+const select = state => ({
+  user: selectUser(state),
+});
+
 export default connect(
-  null,
+  select,
   {
     doOpenModal,
   }

ui/component/youtubeWelcome/view.jsx

@@ -3,13 +3,13 @@ import * as MODALS from 'constants/modal_types';
 import React from 'react';
 import usePersistedState from 'effects/use-persisted-state';
 
-type Props = { doOpenModal: string => void };
+type Props = { doOpenModal: string => void, user: ?User };
 
 const YoutubeWelcome = (props: Props) => {
-  const { doOpenModal } = props;
+  const { doOpenModal, user } = props;
   const [hasBeenShownIntro, setHasBeenShownIntro] = usePersistedState('youtube-welcome', false);
   const isYouTubeReferrer = document.referrer.includes('youtube.com');
-  const shouldShowWelcome = !hasBeenShownIntro && isYouTubeReferrer;
+  const shouldShowWelcome = !hasBeenShownIntro && isYouTubeReferrer && user && !user.has_verified_email;
 
   React.useEffect(() => {
     if (shouldShowWelcome) {

ui/modal/modalYoutubeWelcome/view.jsx

@@ -1,4 +1,5 @@
 // @flow
+import * as PAGES from 'constants/pages';
 import React from 'react';
 import { Modal } from 'modal/modal';
 import Card from 'component/common/card';
@@ -14,11 +15,30 @@ const YoutubeWelcome = (props: Props) => {
     <Modal isOpen type="card" onAborted={doHideModal}>
       <Confetti recycle={false} style={{ position: 'fixed' }} numberOfPieces={100} />
       <Card
-        title={__('Welcome To The Promised Land')}
-        subtitle={__(
-          'Looks like you are coming from YouTube, some funny pun or something that introduces them to LBRY.'
-        )}
-        actions={<Button button="primary" label={__('Get To The Goods')} onClick={doHideModal} />}
+        title={__("You're Free!")}
+        subtitle={
+          <React.Fragment>
+            <p>
+              {__("You've escaped the land of spying, censorship, and exploitation.")}
+              <span className="emoji"> 💩</span>
+            </p>
+            <p>
+              {__('Welcome to the land of content freedom.')}
+              <span className="emoji"> 🌈</span>
+            </p>
+          </React.Fragment>
+        }
+        actions={
+          <React.Fragment>
+            <Button
+              button="primary"
+              label={__('Create an Account')}
+              navigate={`/$/${PAGES.AUTH}`}
+              onClick={doHideModal}
+            />
+            <Button button="link" label={__('Not Yet')} onClick={doHideModal} />
+          </React.Fragment>
+        }
       />
     </Modal>
   );

ui/scss/component/_card.scss

@@ -160,6 +160,10 @@
   padding-bottom: 0;
   margin-bottom: var(--spacing-large);
   border-top: 1px solid var(--color-border);
+
+  .button + .button {
+    margin-left: var(--spacing-medium);
+  }
 }
 
 .card__body--with-icon,

ui/scss/init/_gui.scss

@@ -31,6 +31,10 @@ h6 {
 
 p {
   font-size: var(--font-body);
+
+  & + p {
+    margin-top: var(--spacing-small);
+  }
 }
 
 ul,
@@ -230,3 +234,7 @@ a {
   background-repeat: no-repeat;
   background-size: cover;
 }
+
+.emoji {
+  font-size: 1.3em;
+}