update design of registration page

stylesheets/_session.scss

@@ -530,18 +530,6 @@ label {
   }
 }
 
-.device-pairing-dialog {
-  &__desc {
-    font-weight: 300;
-    font-size: $session-font-sm;
-    margin-bottom: $session-margin-lg;
-  }
-
-  &__secret-words {
-    margin-bottom: $session-margin-md;
-  }
-}
-
 .session-modal__body {
   display: flex;
   flex-direction: column;

stylesheets/_session_signin.scss

@@ -1,27 +1,9 @@
 .session {
-  &-fullscreen {
-    background: var(--color-cell-background);
-
-    overflow-y: auto;
-    height: 100%;
-  }
-
   &-content {
-    width: 100%;
+    background-color: #f9f9f9;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-
     &-accent {
-      flex-grow: 1;
-      padding-inline-start: 20px;
-
       &-text {
-        color: var(--color-text);
-
         font-family: $session-font-accent;
-
         .title {
           font-size: 100px;
           font-weight: 700;
@@ -50,17 +32,6 @@
       width: 100%;
       padding-bottom: 20px;
     }
-
-    &-close-button {
-      display: flex;
-      align-items: center;
-    }
-
-    &-session-button {
-      img {
-        width: 30px;
-      }
-    }
   }
 
   &-registration {
@@ -77,63 +48,6 @@
     &__content {
       width: 100%;
       padding-top: 20px;
-
-      &__secret-words {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        background: var(--color-input-background);
-
-        padding: $session-margin-sm $session-margin-lg;
-        border-radius: 8px;
-
-        label {
-          margin-bottom: 5px;
-        }
-      }
-
-      & .or {
-        text-align: center;
-      }
-    }
-
-    &__sections {
-      display: flex;
-      flex-grow: 1;
-      flex-direction: column;
-    }
-
-    &__tab-container {
-      display: flex;
-      flex-grow: 0;
-      flex-shrink: 0;
-      cursor: pointer;
-      width: 289px;
-      height: 30px;
-      left: 0;
-      right: 0;
-
-      margin-inline-start: auto;
-      margin-inline-end: auto;
-      background: var(--color-cell-background);
-    }
-
-    &__tab {
-      @include fontAccentBold();
-      width: 100%;
-      padding-bottom: 10px;
-      background-color: transparent;
-      text-align: center;
-      border-bottom: var(--border-session);
-      color: var(--color-text);
-
-      transition: border-color $session-transition-duration linear;
-      line-height: 17px;
-      font-size: 15px;
-
-      &--active {
-        border-bottom: 4px solid var(--color-accent);
-      }
     }
 
     @mixin registration-label-mixin {
@@ -254,8 +168,7 @@
     }
   }
 
-  &-description-long,
+  &-description-long {
-  &-signin-device-pairing-header {
     padding-top: 0;
     padding-bottom: 20px;
     @include session-color-subtle(var(--color-text));
@@ -307,7 +220,3 @@
 
   font-size: 13px;
 }
-
-.registration-content-centered {
-  text-align: center;
-}

ts/components/session/AccentText.tsx

@@ -1,11 +1,7 @@
 import React from 'react';
 
-import { SessionHtmlRenderer } from './SessionHTMLRenderer';
-
 export const AccentText: React.FC = () => (
   <div className="session-content-accent-text">
-    <div className="session-content-accent-text title">
+    <div className="session-content-accent-text title">{window.i18n('beginYourSession')}</div>
-      <SessionHtmlRenderer html={window.i18n('beginYourSession')} />
-    </div>
   </div>
 );

ts/components/session/SessionRegistrationView.tsx

@@ -2,10 +2,12 @@ import React, { useEffect } from 'react';
 import { AccentText } from './AccentText';
 
 import { RegistrationStages } from './registration/RegistrationStages';
-import { SessionIconButton } from './icon';
+import { SessionIcon } from './icon';
 import { SessionToastContainer } from './SessionToastContainer';
 import { SessionTheme } from '../../state/ducks/SessionTheme';
 import { setSignInByLinking } from '../../session/utils/User';
+import { Flex } from '../basic/Flex';
+import { SpacerLG } from '../basic/Text';
 
 export const SessionRegistrationView = () => {
   useEffect(() => {
@@ -13,32 +15,32 @@ export const SessionRegistrationView = () => {
   }, []);
   return (
     <SessionTheme>
-      <div className="session-content">
+      <Flex
+        className="session-content"
+        width="100vw"
+        height="100vh"
+        alignItems="center"
+        flexDirection="column"
+        container={true}
+      >
         <SessionToastContainer />
-        <div id="error" className="collapse" />
+        <SpacerLG />
-        <div className="session-content-header">
+        <SpacerLG />
-          <div className="session-content-close-button">
+
-            <SessionIconButton
+        <SessionIcon iconSize={150} iconType="brand" />
-              iconSize={'medium'}
+        <SpacerLG />
-              iconType="exit"
+
-              onClick={() => {
+        <SpacerLG />
-                window.close();
+        <SpacerLG />
-              }}
+        <SpacerLG />
-            />
+
-          </div>
+        <AccentText />
-          <div className="session-content-session-button">
+        <SpacerLG />
-            <img alt="brand" src="./images/session/brand.svg" />
+        <SpacerLG />
-          </div>
+        <SpacerLG />
-        </div>
+
-        <div className="session-content-body">
+        <RegistrationStages />
-          <div className="session-content-accent">
+      </Flex>
-            <AccentText />
-          </div>
-          <div className="session-content-registration">
-            <RegistrationStages />
-          </div>
-        </div>
-      </div>
     </SessionTheme>
   );
 };

ts/components/session/icon/Icons.tsx

@@ -2,6 +2,7 @@ export type SessionIconType =
   | 'addUser'
   | 'arrow'
   | 'bell'
+  | 'brand'
   | 'caret'
   | 'chatBubble'
   | 'check'
@@ -82,6 +83,12 @@ export const icons = {
     viewBox: '0 0 4.622 5.159',
     ratio: 1,
   },
+  brand: {
+    path:
+      'm 216.456,315.282 c 36.104,0 66.415,-29.551 65.565,-65.646 -0.59,-25.135 -14.478,-48.161 -36.54,-60.386 l -83.435,-46.234 v 69.229 c 0,5.18855 -4.20645,9.39455 -9.395,9.394 H 67.847 c -26.603,0 -48.093,22.297 -46.765,49.183 1.242,25.15 22.941,44.46 48.123,44.46 h 147.251 m -75.437,-121.993 0.016,-69.217 c 0.002,-5.186 4.19,-9.391 9.376,-9.392 l 84.808,-0.014 c 26.602,0 48.092,-22.297 46.764,-49.181 C 280.74,40.334 259.041,21.023 233.858,21.023 H 86.608 c -36.103,0 -66.415,29.551 -65.565,65.646 0.591,25.136 14.479,48.161 36.541,60.386 z m 114.65,-22.427 c 29.233,16.2 47.395,47.023 47.395,80.448 0,46.865 -38.129,84.995 -84.995,84.995 H 67.847 C 30.437,336.305 0,305.867 0,268.459 0,231.051 30.437,200.616 67.847,200.616 h 43.026 L 47.396,165.445 C 18.162,149.243 0,118.42 0,84.995 0,38.131 38.13,0 84.995,0 h 150.224 c 37.408,0 67.845,30.438 67.845,67.846 0,37.409 -30.437,67.843 -67.845,67.843 h -43.028 l 63.478,35.173',
+    viewBox: '0 0 404.085 448.407',
+    ratio: 1,
+  },
   caret: {
     path: 'M127.5 191.25L255 63.75L0 63.75L127.5 191.25Z',
     viewBox: '-200 -200 640 640',

ts/components/session/registration/TabLabel.tsx

@@ -1,38 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-
-export enum TabType {
-  SignUp,
-  SignIn,
-}
-
-export const TabLabel = ({
-  isSelected,
-  onSelect,
-  type,
-}: {
-  isSelected: boolean;
-  onSelect?: (event: TabType) => void;
-  type: TabType;
-}) => {
-  const handleClick = onSelect
-    ? () => {
-        onSelect(type);
-      }
-    : undefined;
-
-  const label = type === TabType.SignUp ? window.i18n('createAccount') : window.i18n('signIn');
-
-  return (
-    <div
-      className={classNames(
-        'session-registration__tab',
-        isSelected ? 'session-registration__tab--active' : null
-      )}
-      onClick={handleClick}
-      role="tab"
-    >
-      {label}
-    </div>
-  );
-};