diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index eae3f43e0..7e93905a3 100644
--- a/stylesheets/_session.scss
+++ b/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;
diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss
index 11e698cf2..a426260ab 100644
--- a/stylesheets/_session_signin.scss
+++ b/stylesheets/_session_signin.scss
@@ -1,27 +1,9 @@
.session {
- &-fullscreen {
- background: var(--color-cell-background);
-
- overflow-y: auto;
- height: 100%;
- }
-
&-content {
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- flex-direction: column;
-
+ background-color: #f9f9f9;
&-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,
- &-signin-device-pairing-header {
+ &-description-long {
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;
-}
diff --git a/ts/components/session/AccentText.tsx b/ts/components/session/AccentText.tsx
index d7a562afc..6a099689d 100644
--- a/ts/components/session/AccentText.tsx
+++ b/ts/components/session/AccentText.tsx
@@ -1,11 +1,7 @@
import React from 'react';
-import { SessionHtmlRenderer } from './SessionHTMLRenderer';
-
export const AccentText: React.FC = () => (
-
-
-
+
{window.i18n('beginYourSession')}
);
diff --git a/ts/components/session/SessionRegistrationView.tsx b/ts/components/session/SessionRegistrationView.tsx
index 6bd7ce1ca..5e5e7e431 100644
--- a/ts/components/session/SessionRegistrationView.tsx
+++ b/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 (
-
+
-
-
-
- {
- window.close();
- }}
- />
-
-
-

-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/ts/components/session/icon/Icons.tsx b/ts/components/session/icon/Icons.tsx
index 5924e0fbd..de70a859c 100644
--- a/ts/components/session/icon/Icons.tsx
+++ b/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',
diff --git a/ts/components/session/registration/TabLabel.tsx b/ts/components/session/registration/TabLabel.tsx
deleted file mode 100644
index 0e37f5daf..000000000
--- a/ts/components/session/registration/TabLabel.tsx
+++ /dev/null
@@ -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 (
-
- {label}
-
- );
-};