Sign-up page optimization (#489)

ui/component/common/card.jsx

@@ -63,7 +63,7 @@ export default function Card(props: Props) {
         }
       }}
     >
-      <div>
+      <div className="card__first-pane">
         {(title || subtitle) && (
           <div
             className={classnames('card__header--between', {

ui/component/loginGraphic/index.jsx

@@ -1,37 +1,13 @@
 // @flow
 import React from 'react';
 import { SITE_NAME, LOGIN_IMG_URL } from 'config';
-import { getThumbnailCdnUrl } from 'util/thumbnail';
 
 function LoginGraphic(props: any) {
-  const [error, setError] = React.useState(false);
-  const [src, setSrc] = React.useState('---');
-  const containerRef = React.useRef<any>();
-  const imgUrl = LOGIN_IMG_URL;
-
-  React.useEffect(() => {
-    if (containerRef.current && containerRef.current.parentElement && containerRef.current.parentElement.offsetWidth) {
-      const newWidth = containerRef.current.parentElement.offsetWidth;
-
-      let newSrc = imgUrl && imgUrl.trim().replace(/^http:\/\//i, 'https://');
-      // @if TARGET='web'
-      // Pass image urls through a compression proxy.
-      newSrc = getThumbnailCdnUrl({ thumbnail: newSrc, width: newWidth, height: newWidth * 2 });
-      // @endif
-
-      setSrc(newSrc);
-    } else {
-      setSrc(imgUrl);
-    }
-  }, []);
-
-  if (error || !imgUrl) {
-    return null;
-  }
+  const alt = __('%SITE_NAME% login', { SITE_NAME });
 
   return (
-    <div className="signup-image" ref={containerRef}>
-      <img alt={__('%SITE_NAME% login', { SITE_NAME })} src={src} onError={() => setError(true)} />
+    <div className="signup-image">
+      <img alt={alt} src={LOGIN_IMG_URL} />
     </div>
   );
 }

ui/component/page/view.jsx

@@ -117,6 +117,7 @@ function Page(props: Props) {
         className={classnames('main-wrapper__inner', {
           'main-wrapper__inner--filepage': isOnFilePage,
           'main-wrapper__inner--theater-mode': isOnFilePage && videoTheaterMode,
+          'main-wrapper__inner--auth': authPage,
         })}
       >
         {getSideNavElem()}

ui/component/userSignUp/index.js

@@ -4,7 +4,6 @@ import { selectGetSyncIsPending, selectSyncHash, selectPrefsReady } from 'redux/
 import { doClaimRewardType } from 'redux/actions/rewards';
 import { doSetClientSetting } from 'redux/actions/settings';
 import { selectClaimedRewards, makeSelectIsRewardClaimPending } from 'redux/selectors/rewards';
-import { doUserFetch } from 'redux/actions/user';
 import {
   selectUserIsPending,
   selectYoutubeChannels,
@@ -45,7 +44,6 @@ const select = (state) => ({
 });
 
 const perform = (dispatch) => ({
-  fetchUser: () => dispatch(doUserFetch()),
   claimConfirmEmailReward: () =>
     dispatch(
       doClaimRewardType(REWARD_TYPES.TYPE_CONFIRM_EMAIL, {

ui/component/userSignUp/view.jsx

@@ -34,7 +34,6 @@ type Props = {
   claimingReward: boolean,
   claimConfirmEmailReward: () => void,
   claimNewUserReward: () => void,
-  fetchUser: () => void,
   claimedRewards: Array<Reward>,
   youtubeChannels: Array<any>,
   syncEnabled: boolean,
@@ -60,7 +59,6 @@ function UserSignUp(props: Props) {
     claimConfirmEmailReward,
     claimNewUserReward,
     balance,
-    fetchUser,
     youtubeChannels,
     syncEnabled,
     syncingWallet,
@@ -132,10 +130,6 @@ function UserSignUp(props: Props) {
     setClientSetting(setting, value, true);
   }
 
-  React.useEffect(() => {
-    fetchUser();
-  }, [fetchUser]);
-
   React.useEffect(() => {
     if (previousHasVerifiedEmail === false && hasVerifiedEmail && prefsReady) {
       setSettingAndSync(SETTINGS.FIRST_RUN_STARTED, true);

ui/scss/component/_main.scss

@@ -42,6 +42,15 @@
   padding-top: 0;
 }
 
+.main-wrapper__inner--auth {
+  min-height: unset;
+  padding: 0;
+
+  .main--auth-page {
+    margin-top: 0;
+  }
+}
+
 .main {
   position: relative;
   width: calc(100% - var(--side-nav-width) - var(--spacing-l));
@@ -425,27 +434,28 @@
 .main__sign-up--graphic {
   max-width: 47rem;
 
+  .card__first-pane {
+    width: 50%;
+    @media (max-width: $breakpoint-small) {
+      width: 100%;
+    }
+  }
+
   .card__second-pane {
     width: 50%;
+    @media (max-width: $breakpoint-small) {
+      width: 100%;
+    }
+
     border: none;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--color-login-graphic-background);
-
-    @media (max-width: $breakpoint-small) {
-      width: 100%;
-    }
-
-    .signup-image {
-      @media (max-width: $breakpoint-small) {
-        width: 50%;
-      }
-    }
   }
 
   .card__title {
-    font-size: var(--font-heading);
+    font-size: var(--font-title);
     font-weight: var(--font-weight-bold);
   }