Add sign-in graphics for SIMPLE_SITE

Homepages repo: `Issue 64 - Add new graphics to odysee sign in`

config.js

@@ -28,6 +28,7 @@ const config = {
   OG_IMAGE_URL: process.env.OG_IMAGE_URL,
   YRBL_HAPPY_IMG_URL: process.env.YRBL_HAPPY_IMG_URL,
   YRBL_SAD_IMG_URL: process.env.YRBL_SAD_IMG_URL,
+  LOGIN_IMG_URL: process.env.LOGIN_IMG_URL,
   SITE_CANONICAL_URL: process.env.SITE_CANONICAL_URL,
   DEFAULT_LANGUAGE: process.env.DEFAULT_LANGUAGE,
   AUTO_FOLLOW_CHANNELS: process.env.AUTO_FOLLOW_CHANNELS,

static/app-strings.json

@@ -1910,5 +1910,6 @@
   "Now": "Now",
   "Set to current date and time": "Set to current date and time",
   "Remove custom release date": "Remove custom release date",
+  "%SITE_NAME% login image": "%SITE_NAME% login image",
   "--end--": "--end--"
 }

ui/component/common/card.jsx

@@ -22,6 +22,7 @@ type Props = {
   smallTitle?: boolean,
   onClick?: () => void,
   children?: Node,
+  secondPane?: Node,
 };
 
 export default function Card(props: Props) {
@@ -41,6 +42,7 @@ export default function Card(props: Props) {
     nag,
     onClick,
     children,
+    secondPane,
   } = props;
   const [expanded, setExpanded] = useState(defaultExpand);
   const expandable = defaultExpand !== undefined;
@@ -48,7 +50,9 @@ export default function Card(props: Props) {
   return (
     <section
       role={onClick ? 'button' : undefined}
-      className={classnames(className, 'card')}
+      className={classnames(className, 'card', {
+        'card__multi-pane': Boolean(secondPane),
+      })}
       onClick={(e) => {
         if (onClick) {
           onClick();
@@ -56,6 +60,7 @@ export default function Card(props: Props) {
         }
       }}
     >
+      <div>
         {(title || subtitle) && (
           <div
             className={classnames('card__header--between', {
@@ -117,8 +122,9 @@ export default function Card(props: Props) {
             {children && <div className="card__main-actions">{children}</div>}
           </>
         )}
-
         {nag}
+      </div>
+      {secondPane && <div className="card__second-pane">{secondPane}</div>}
     </section>
   );
 }

ui/component/loginGraphic/index.jsx

@@ -0,0 +1,16 @@
+// @flow
+import React from 'react';
+import { SITE_NAME, LOGIN_IMG_URL } from 'config';
+
+function LoginGraphic(props: any) {
+  const [error, setError] = React.useState(false);
+  const src = LOGIN_IMG_URL;
+
+  return error || !src ? null : (
+    <div className="signup-image">
+      <img alt={__('%SITE_NAME% login image', { SITE_NAME })} src={src} onError={() => setError(true)} />
+    </div>
+  );
+}
+
+export default LoginGraphic;

ui/component/userEmailNew/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import * as PAGES from 'constants/pages';
-import { SITE_NAME, DOMAIN } from 'config';
+import { SITE_NAME, DOMAIN, SIMPLE_SITE } from 'config';
 import React, { useState } from 'react';
 import { FormField, Form } from 'component/common/form';
 import Button from 'component/button';
@@ -14,6 +14,7 @@ import Nag from 'component/common/nag';
 import classnames from 'classnames';
 import OdyseeLogoWithWhiteText from 'component/header/odysee_white.png';
 import OdyseeLogoWithText from 'component/header/odysee.png';
+import LoginGraphic from 'component/loginGraphic';
 
 type Props = {
   errorMessage: ?string,
@@ -96,7 +97,11 @@ function UserEmailNew(props: Props) {
   }, [emailExists]);
 
   return (
-    <div className="main__sign-up">
+    <div
+      className={classnames('main__sign-up', {
+        'main__sign-up--graphic': SIMPLE_SITE,
+      })}
+    >
       <Card
         title={__('Join %SITE_NAME%', { SITE_NAME })}
         // @if TARGET='app'
@@ -208,6 +213,7 @@ function UserEmailNew(props: Props) {
             {errorMessage && <Nag type="error" relative message={<ErrorText>{errorMessage}</ErrorText>} />}
           </>
         }
+        secondPane={SIMPLE_SITE && <LoginGraphic />}
       />
 
       {IS_WEB && DOMAIN === 'lbry.tv' && (

ui/component/userEmailReturning/view.jsx

@@ -1,5 +1,5 @@
 // @flow
-import { SITE_NAME } from 'config';
+import { SITE_NAME, SIMPLE_SITE } from 'config';
 import * as PAGES from 'constants/pages';
 import React, { useState } from 'react';
 import { FormField, Form } from 'component/common/form';
@@ -9,6 +9,8 @@ import { useHistory } from 'react-router-dom';
 import UserEmailVerify from 'component/userEmailVerify';
 import Card from 'component/common/card';
 import Nag from 'component/common/nag';
+import classnames from 'classnames';
+import LoginGraphic from 'component/loginGraphic';
 
 type Props = {
   user: ?User,
@@ -69,7 +71,11 @@ function UserEmailReturning(props: Props) {
   }
 
   return (
-    <div className="main__sign-in">
+    <div
+      className={classnames('main__sign-in', {
+        'main__sign-up--graphic': SIMPLE_SITE && !showEmailVerification,
+      })}
+    >
       {showEmailVerification ? (
         <UserEmailVerify />
       ) : (
@@ -136,6 +142,7 @@ function UserEmailReturning(props: Props) {
               )}
             </>
           }
+          secondPane={SIMPLE_SITE && <LoginGraphic />}
         />
       )}
     </div>

ui/scss/component/_card.scss

@@ -356,3 +356,25 @@
   justify-content: space-between;
   align-items: center;
 }
+
+.card__multi-pane {
+  display: flex;
+
+  @media (max-width: $breakpoint-small) {
+    flex-direction: column;
+  }
+
+  .card__main-actions {
+    height: unset;
+  }
+
+  .card__second-pane {
+    border-left: 1px solid var(--color-border);
+    max-width: 50%;
+
+    @media (max-width: $breakpoint-small) {
+      border-top: 1px solid var(--color-border);
+      max-width: 100%;
+    }
+  }
+}

ui/scss/component/_main.scss

@@ -332,6 +332,33 @@
   margin-right: auto;
 }
 
+.main__sign-up--graphic {
+  max-width: 47rem;
+
+  .card__second-pane {
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-login-graphic-background);
+
+    .signup-image {
+      @media (max-width: $breakpoint-small) {
+        width: 50%;
+      }
+    }
+  }
+
+  .card__title {
+    font-size: var(--font-heading);
+    font-weight: var(--font-weight-bold);
+  }
+
+  .card__main-actions {
+    border: none;
+  }
+}
+
 .main__channel-creation {
   margin-left: auto;
   margin-right: auto;

ui/scss/init/_base-theme.scss

@@ -188,6 +188,7 @@
   --color-tabs-background: var(--color-card-background);
   --color-tab-divider: var(--color-primary);
   --color-modal-background: var(--color-card-background);
+  --color-login-graphic-background: var(--color-primary-alt);
 
   // Ads
   --color-ads-background: #fae5ff;

ui/scss/themes/dark.scss

@@ -131,6 +131,7 @@
   --color-placeholder-background: #4e5862;
   --color-spinner-light: #5a6570;
   --color-spinner-dark: #212529;
+  --color-login-graphic-background: var(--color-background);
 
   // Editor
   --color-editor-cursor: var(--color-text);