From 4f889b3c69f647f391c924fd2c22bdc06707ad65 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Mon, 9 Dec 2019 16:16:07 +1100 Subject: [PATCH] big refactor of scss to include session- prefix everywhere --- js/views/session_registration_view.js | 4 +- stylesheets/_session.scss | 53 +++ stylesheets/_session_signin.scss | 469 ++++++++++----------- ts/components/session/AccentText.tsx | 6 +- ts/components/session/RegistrationTabs.tsx | 28 +- ts/components/session/SessionInput.tsx | 6 +- 6 files changed, 293 insertions(+), 273 deletions(-) diff --git a/js/views/session_registration_view.js b/js/views/session_registration_view.js index b2f812d5a..d1e5bed5b 100644 --- a/js/views/session_registration_view.js +++ b/js/views/session_registration_view.js @@ -30,7 +30,7 @@ const currentPageIndex = REGISTER_INDEX; */ Whisper.SessionRegistrationView = Whisper.View.extend({ - className: 'session-standalone-fullscreen', + className: 'session-fullscreen', initialize() { this.accountManager = getAccountManager(); // Clean status in case the app closed unexpectedly @@ -94,7 +94,7 @@ }, render() { this.session_registration_view = new Whisper.ReactWrapperView({ - className: 'session-full-screen-flow session-standalone-fullscreen', + className: 'session-full-screen-flow session-fullscreen', Component: window.Signal.Components.SessionRegistrationView, props: {}, }); diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 64f52f92d..96ae4ba6a 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -388,3 +388,56 @@ $session_message-container-border-radius: 5px; right: 0px; } } + +.session { + &-button { + width: 100%; + height: 45px; + line-height: 45px; + padding: 0 18px 0 18px; + font-size: 15px; + font-family: $session-font-family; + font-weight: 700; + cursor: pointer; + display: flex; + justify-content: center; + border-radius: 500px; + transition-duration: $session-transition-duration; + + @mixin transparent-background($textAndBorderColor) { + background-color: Transparent; + background-repeat: no-repeat; + overflow: hidden; + outline: none; + color: $textAndBorderColor; + border: 2px solid $textAndBorderColor; + } + + &.full-green { + background-color: $session-color-green; + color: $session-color-white; + border: 2px solid $session-color-green; + + &:hover { + @include transparent-background($session-color-green); + } + } + + &.green { + @include transparent-background($session-color-green); + + &:hover { + background-color: $session-color-green; + color: $session-color-white; + } + } + + &.white { + @include transparent-background($session-color-white); + + &:hover { + @include transparent-background($session-color-green); + } + } + } +} diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss index 6cdcc6750..331f569b5 100644 --- a/stylesheets/_session_signin.scss +++ b/stylesheets/_session_signin.scss @@ -1,113 +1,240 @@ -.session-standalone-fullscreen { - overflow-y: auto; - height: 100%; - background: linear-gradient(90deg, #121212 100%, #171717 0%); -} -.session-standalone { - padding: 0; - position: relative; -} -.session-content { - width: 100%; - height: 100%; - display: flex; - align-items: center; -} -.session-content-accent { - flex-grow: 1; - padding-left: 20px; -} - -.session-accent-text { - color: $session-color-white; - font-family: $session-font-family; - - &.title { - font-size: 100px; - font-weight: 700; - line-height: 120px; +.session { + &-fullscreen { + overflow-y: auto; + height: 100%; + background: linear-gradient(90deg, #121212 100%, #171717 0%); } - &.subtitle { - font-size: 18px; - font-weight: 700; - - .redacted { - background: $session-color-white; - white-space: nowrap; - transition: background-color $session-transition-duration ease; - border-radius: 100px; - padding-left: 7px; - padding-right: 7px; - - &:hover { - background-color: $session-color-black; + &-content { + width: 100%; + height: 100%; + display: flex; + align-items: center; + + &-accent { + flex-grow: 1; + padding-left: 20px; + + &-text { + color: $session-color-white; + font-family: $session-font-family; + + .title { + font-size: 100px; + font-weight: 700; + line-height: 120px; + } + + .subtitle { + font-size: 18px; + font-weight: 700; + + .redacted { + background: $session-color-white; + white-space: nowrap; + transition: background-color $session-transition-duration ease; + border-radius: 100px; + padding-left: 7px; + padding-right: 7px; + + &:hover { + background-color: $session-color-black; + } + } + } } } - } -} - -.session-content-registration { - height: 60%; - padding-right: 128px; -} - -.entry-fields { - margin: 0px; - padding-bottom: 30px; -} + + &-registration { + height: 60%; + padding-right: 128px; + } -.session-button { - width: 100%; - height: 45px; - line-height: 45px; - padding: 0 18px 0 18px; - font-size: 15px; - font-family: $session-font-family; - font-weight: 700; - cursor: pointer; - display: flex; - justify-content: center; - border-radius: 500px; - transition-duration: $session-transition-duration; - @mixin transparent-background($textAndBorderColor) { - background-color: Transparent; - background-repeat: no-repeat; - overflow: hidden; - outline: none; - color: $textAndBorderColor; - border: 2px solid $textAndBorderColor; + } - &.full-green { - background-color: $session-color-green; - color: $session-color-white; - border: 2px solid $session-color-green; - - &:hover { - @include transparent-background($session-color-green); + &-registration { + &-container{ + display: flex; + flex-direction: column; + width: 289px; + } + + &__content { + width: 100%; + overflow-y: auto; + padding-top: 20px; + } + + &__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-left: auto; + margin-right: auto; + color: $session-color-white; + } + + &__tab { + @include fontWasaBold(); + width: 100%; + padding-bottom: 10px; + background-color: transparent; + text-align: center; + color: $session-color-white; + border-bottom: 2px solid $session-color-dark-grey; + transition: border-color $session-transition-duration linear; + line-height: 17px; + font-size: 15px; + + &--active { + border-bottom: 4px solid $session-color-green; + } + } + + @mixin registration-label-mixin { + color: $session-color-white; + text-align: center; + font-size: 17px; + font-weight: 700; + line-height: 17px; + padding: 12px; + } + + &__or { + @include registration-label-mixin; + } + + &__unique-session-id { + @include registration-label-mixin; + padding-top: 3em; + } + + &__entry-fields { + margin: 0px; + padding-bottom: 30px; } } - &.green { - @include transparent-background($session-color-green); - - &:hover { - background-color: $session-color-green; + &-input-with-label-container { + height: 46.5px; + width: 280px; + color: $session-color-white; + padding: 2px 0 2px 0; + transition: opacity $session-transition-duration; + opacity: 1; + position: relative; + + label { + line-height: 14px; + opacity: 0; + color: #737373; + font-size: 10px; + line-height: 11px; + position: absolute; + top: 0px; + } + + &.filled { + opacity: 1; + } + + input { + border: none; + outline: 0; + height: 14px; + width: 280px; + background: transparent; color: $session-color-white; + font-size: 12px; + line-height: 14px; + position: absolute; + top: 50%; + transform: translateY(-50%); + } + + hr { + border: 1px solid $session-color-white; + width: 100%; + position: absolute; + bottom: 0px; + } + + button { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 0px; } } - &.white { - @include transparent-background($session-color-white); - - &:hover { - @include transparent-background($session-color-green); + &-terms-conditions-agreement { + padding-top: 10px; + color: $session-color-light-grey; + text-align: center; + font-size: 12px; + + a { + white-space: nowrap; + font-weight: bold; + color: $session-color-light-grey; + + &:visited &:link { + color: $session-color-light-grey; + } + + &:hover { + color: $session-color-white; + } } } + + &-signup-header, + &-signin-device-pairing-header { + padding-top: 10px; + padding-bottom: 10px; + color: $session-color-light-grey; + text-align: center; + font-size: 12px; + line-height: 20px; + } + + &-signin-enter-session-id { + height: auto; + width: 289px; + border-radius: 8px; + border: 2px solid $session-color-dark-grey; + outline: 0; + background: transparent; + color: $session-color-white; + font-size: 12px; + line-height: 14px; + text-align: center; + margin-bottom: 20px; + overflow-wrap: break-word; + padding: 20px 5px 20px 5px; + display: inline-block; + } } + + + + + .session-icon-button { fill: $session-color-white; opacity: 0.4; @@ -145,174 +272,14 @@ } } -.input-with-label-container { - height: 46.5px; - width: 280px; - color: $session-color-white; - padding: 2px 0 2px 0; - transition: opacity $session-transition-duration; - opacity: 1; - position: relative; - label { - line-height: 14px; - opacity: 0; - color: #737373; - font-size: 10px; - line-height: 11px; - position: absolute; - top: 0px; - } - &.filled { - opacity: 1; - } - input { - border: none; - outline: 0; - height: 14px; - width: 280px; - background: transparent; - color: $session-color-white; - font-size: 12px; - line-height: 14px; - position: absolute; - top: 50%; - transform: translateY(-50%); - } - - hr { - border: 1px solid $session-color-white; - width: 100%; - position: absolute; - bottom: 0px; - } - - button { - position: absolute; - top: 50%; - transform: translateY(-50%); - right: 0px; - } -} -.registration-container { - display: flex; - flex-direction: column; - width: 289px; -} -.registration-container__tab-container { - display: flex; - flex-grow: 0; - flex-shrink: 0; - cursor: pointer; - width: 289px; - height: 30px; - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; - color: $session-color-white; -} -.registration-container__tab { - @include fontWasaBold(); - width: 100%; - padding-bottom: 10px; - background-color: transparent; - text-align: center; - color: $session-color-white; - border-bottom: 2px solid $session-color-dark-grey; - transition: border-color $session-transition-duration linear; - line-height: 17px; - font-size: 15px; -} - -.registration-container__tab--active { - border-bottom: 4px solid $session-color-green; -} -.registration-container__content { - width: 100%; - overflow-y: auto; - padding-top: 20px; -} - -.registration-container__sections { - display: flex; - flex-grow: 1; - flex-direction: column; -} - - -@mixin registration-label-mixin { - color: $session-color-white; - text-align: center; - font-size: 17px; - font-weight: 700; - line-height: 17px; - padding: 12px; -} - -.or-signin-buttons { - @include registration-label-mixin; -} - -.registration-view-label { - @include registration-label-mixin; - padding-top: 3em; -} - -.terms-conditions-agreement { - padding-top: 10px; - color: $session-color-light-grey; - text-align: center; - font-size: 12px; - - a { - white-space: nowrap; - font-weight: bold; - color: $session-color-light-grey; - - &:visited &:link { - color: $session-color-light-grey; - } - - &:hover { - color: $session-color-white; - } - } -} - -.signup-header, -.signin-device-pairing-header { - padding-top: 10px; - padding-bottom: 10px; - color: $session-color-light-grey; - text-align: center; - font-size: 12px; - line-height: 20px; -} - -.signin-enter-session-id { - height: auto; - width: 289px; - border-radius: 8px; - border: 2px solid $session-color-dark-grey; - outline: 0; - background: transparent; - color: $session-color-white; - font-size: 12px; - line-height: 14px; - text-align: center; - margin-bottom: 20px; - overflow-wrap: break-word; - padding: 20px 5px 20px 5px; - display: inline-block; -} [contenteditable='true']:empty::before { content: attr(placeholder); diff --git a/ts/components/session/AccentText.tsx b/ts/components/session/AccentText.tsx index 190c16d90..010e4107e 100644 --- a/ts/components/session/AccentText.tsx +++ b/ts/components/session/AccentText.tsx @@ -18,12 +18,12 @@ export class AccentText extends React.PureComponent { const { showSubtitle } = this.props; return ( -
-
+
+
Begin
your
Session.
{showSubtitle ? ( -
+
Ensuring peace of{' '} mind, one session at a time. diff --git a/ts/components/session/RegistrationTabs.tsx b/ts/components/session/RegistrationTabs.tsx index 250201fbf..94dbf24fb 100644 --- a/ts/components/session/RegistrationTabs.tsx +++ b/ts/components/session/RegistrationTabs.tsx @@ -54,8 +54,8 @@ const Tab = ({ return (
{ const { selectedTab } = this.state; return ( -
-
+
+
{ const {signUpMode} = this.state; if (signUpMode === SignUpMode.Default) { return ( -
+
{this.renderSignUpHeader()} {this.renderSignUpButton()}
@@ -154,9 +154,9 @@ export class RegistrationTabs extends React.Component { } else { return ( -
+
{this.renderSignUpHeader()} -
+
Your Unique Session ID
{this.renderEnterSessionID(false)} @@ -187,7 +187,7 @@ export class RegistrationTabs extends React.Component { private renderSignUpHeader() { return ( -
+
All users are randomly generated a set of numbers that act as their unique Session ID. Share your Session ID in order to chat with your friends! @@ -223,7 +223,7 @@ export class RegistrationTabs extends React.Component { private renderSignIn() { return ( -
+
{this.renderRegistrationContent()} {this.renderSignInButtons()} @@ -237,7 +237,7 @@ export class RegistrationTabs extends React.Component { if (signInMode === SignInMode.UsingSeed) { return ( -
+
{ } else if (signInMode === SignInMode.LinkingDevice) { return (
-
+
Open the Loki Messenger App on your primary device and select "Device Pairing" from the main menu. Then, enter your Session ID below to sign in. @@ -298,7 +298,7 @@ export class RegistrationTabs extends React.Component { private renderEnterSessionID(contentEditable: boolean) { return (
@@ -335,7 +335,7 @@ export class RegistrationTabs extends React.Component { buttonType={greenButtonType} text={greenText} /> -
or
+
or
{ this.setState({ @@ -351,7 +351,7 @@ export class RegistrationTabs extends React.Component { private renderTermsConditionAgreement() { return ( -
+
By using this service, you agree to our Terms and Conditions and{' '} Privacy Statement
diff --git a/ts/components/session/SessionInput.tsx b/ts/components/session/SessionInput.tsx index d642e620b..a29510191 100644 --- a/ts/components/session/SessionInput.tsx +++ b/ts/components/session/SessionInput.tsx @@ -37,13 +37,13 @@ export class SessionInput extends React.PureComponent { const correctType = forceShow ? 'text' : type; return ( -
+