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,69 +60,71 @@ export default function Card(props: Props) {
         }
       }}
     >
-      {(title || subtitle) && (
+      <div>
-        <div
+        {(title || subtitle) && (
-          className={classnames('card__header--between', {
-            'card__header--nowrap': noTitleWrap,
-          })}
-        >
           <div
-            className={classnames('card__title-section', {
+            className={classnames('card__header--between', {
-              'card__title-section--body-list': isBodyList,
+              'card__header--nowrap': noTitleWrap,
-              'card__title-section--small': smallTitle,
             })}
           >
-            {icon && <Icon sectionIcon icon={icon} />}
-            <div>
-              {isPageTitle && <h1 className="card__title">{title}</h1>}
-              {!isPageTitle && (
-                <h2 className={classnames('card__title', { 'card__title--small': smallTitle })}>{title}</h2>
-              )}
-              {subtitle && <div className="card__subtitle">{subtitle}</div>}
-            </div>
-          </div>
-          <div>
-            {titleActions && (
-              <div
-                className={classnames('card__title-actions', {
-                  'card__title-actions--small': smallTitle,
-                })}
-              >
-                {titleActions}
-              </div>
-            )}
-            {expandable && (
-              <div className="card__title-actions">
-                <Button
-                  button="alt"
-                  aria-expanded={expanded}
-                  aria-label={expanded ? __('Less') : __('More')}
-                  icon={expanded ? ICONS.SUBTRACT : ICONS.ADD}
-                  onClick={() => setExpanded(!expanded)}
-                />
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-      {(!expandable || (expandable && expanded)) && (
-        <>
-          {body && (
             <div
-              className={classnames('card__body', {
+              className={classnames('card__title-section', {
-                'card__body--no-title': !title && !subtitle,
+                'card__title-section--body-list': isBodyList,
-                'card__body--list': isBodyList,
+                'card__title-section--small': smallTitle,
               })}
             >
-              {body}
+              {icon && <Icon sectionIcon icon={icon} />}
+              <div>
+                {isPageTitle && <h1 className="card__title">{title}</h1>}
+                {!isPageTitle && (
+                  <h2 className={classnames('card__title', { 'card__title--small': smallTitle })}>{title}</h2>
+                )}
+                {subtitle && <div className="card__subtitle">{subtitle}</div>}
+              </div>
             </div>
-          )}
+            <div>
-          {actions && <div className="card__main-actions">{actions}</div>}
+              {titleActions && (
-          {children && <div className="card__main-actions">{children}</div>}
+                <div
-        </>
+                  className={classnames('card__title-actions', {
-      )}
+                    'card__title-actions--small': smallTitle,
-
+                  })}
-      {nag}
+                >
+                  {titleActions}
+                </div>
+              )}
+              {expandable && (
+                <div className="card__title-actions">
+                  <Button
+                    button="alt"
+                    aria-expanded={expanded}
+                    aria-label={expanded ? __('Less') : __('More')}
+                    icon={expanded ? ICONS.SUBTRACT : ICONS.ADD}
+                    onClick={() => setExpanded(!expanded)}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+        {(!expandable || (expandable && expanded)) && (
+          <>
+            {body && (
+              <div
+                className={classnames('card__body', {
+                  'card__body--no-title': !title && !subtitle,
+                  'card__body--list': isBodyList,
+                })}
+              >
+                {body}
+              </div>
+            )}
+            {actions && <div className="card__main-actions">{actions}</div>}
+            {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);