Add sign-in graphics for SIMPLE_SITE

Homepages repo: `Issue 64 - Add new graphics to odysee sign in`
2021-05-13 15:26:59 +08:00 · 2021-05-13 15:26:59 +08:00 · 1b3fec0452
commit 1b3fec0452
parent 19055784ff
10 changed files with 149 additions and 61 deletions
--- a/config.js
+++ b/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,
--- a/static/app-strings.json
+++ b/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--"
 }
--- a/ui/component/common/card.jsx
+++ b/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
-          className={classnames('card__header--between', {
-            'card__header--nowrap': noTitleWrap,
-          })}
-        >
+      <div>
+        {(title || subtitle) && (
          <div
-            className={classnames('card__title-section', {
-              'card__title-section--body-list': isBodyList,
-              'card__title-section--small': smallTitle,
+            className={classnames('card__header--between', {
+              'card__header--nowrap': noTitleWrap,
            })}
          >
-            {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', {
-                'card__body--no-title': !title && !subtitle,
-                'card__body--list': isBodyList,
+              className={classnames('card__title-section', {
+                'card__title-section--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>
-          )}
-          {actions && <div className="card__main-actions">{actions}</div>}
-          {children && <div className="card__main-actions">{children}</div>}
-        </>
-      )}
-
-      {nag}
+            <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', {
+                  '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>
  );
 }
--- a/ui/component/loginGraphic/index.jsx
+++ b/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;
--- a/ui/component/userEmailNew/view.jsx
+++ b/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' && (
--- a/ui/component/userEmailReturning/view.jsx
+++ b/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>
--- a/ui/scss/component/_card.scss
+++ b/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%;
+    }
+  }
+}
--- a/ui/scss/component/_main.scss
+++ b/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;
--- a/ui/scss/init/_base-theme.scss
+++ b/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;
--- a/ui/scss/themes/dark.scss
+++ b/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);