big refactor of scss to include session- prefix everywhere

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: {},
       });

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);
+      }
+    }
+  }
+}

stylesheets/_session_signin.scss

@@ -1,113 +1,240 @@
-.session-standalone-fullscreen {
+.session {
-  overflow-y: auto;
+  &-fullscreen {
-  height: 100%;
+    overflow-y: auto;
-  background: linear-gradient(90deg, #121212 100%, #171717 0%);
+    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;
   }
 
-  &.subtitle {
+  &-content {
-    font-size: 18px;
+    width: 100%;
-    font-weight: 700;
+    height: 100%;
-
+    display: flex;
-    .redacted {
+    align-items: center;
-      background: $session-color-white;
+  
-      white-space: nowrap;
+    &-accent {
-      transition: background-color $session-transition-duration ease;
+      flex-grow: 1;
-      border-radius: 100px;
+      padding-left: 20px;
-      padding-left: 7px;
+  
-      padding-right: 7px;
+      &-text {
-
+        color: $session-color-white;
-      &:hover {
+        font-family: $session-font-family;
-        background-color: $session-color-black;
+      
+        .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;
+            }
+          }
+        }
       }
     }
-  }
+  
-}
+    &-registration {
-
+      height: 60%;
-.session-content-registration {
+      padding-right: 128px;
-  height: 60%;
+    }
-  padding-right: 128px;
-}
-
-.entry-fields {
-  margin: 0px;
-  padding-bottom: 30px;
-}
 
-.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 {
+  &-registration {
-    background-color: $session-color-green;
+    &-container{
-    color: $session-color-white;
+      display: flex;
-    border: 2px solid $session-color-green;
+      flex-direction: column;
-
+      width: 289px;
-    &:hover {
+    }
-      @include transparent-background($session-color-green);
+  
+    &__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 {
+  &-input-with-label-container {
-    @include transparent-background($session-color-green);
+    height: 46.5px;
-
+    width: 280px;
-    &:hover {
+    color: $session-color-white;
-      background-color: $session-color-green;
+    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 {
+  &-terms-conditions-agreement {
-    @include transparent-background($session-color-white);
+    padding-top: 10px;
-
+    color: $session-color-light-grey;
-    &:hover {
+    text-align: center;
-      @include transparent-background($session-color-green);
+    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);

ts/components/session/AccentText.tsx

@@ -18,12 +18,12 @@ export class AccentText extends React.PureComponent<Props> {
     const { showSubtitle } = this.props;
 
     return (
-      <div className="session-accent-text">
+      <div className="session-content-accent-text">
-        <div className="session-accent-text title">
+        <div className="session-content-accent-text title">
           Begin<br />your<br />Session.
         </div>
         {showSubtitle ? (
-          <div className="session-accent-text subtitle">
+          <div className="session-content-accent-text subtitle">
             Ensuring <span className={classNames('redacted')}>peace of</span>{' '}
             mind, one <span className={classNames('redacted')}>session</span> at
             a time.

ts/components/session/RegistrationTabs.tsx

@@ -54,8 +54,8 @@ const Tab = ({
   return (
     <div
       className={classNames(
-        'registration-container__tab',
+        'session-registration__tab',
-        isSelected ? 'registration-container__tab--active' : null
+        isSelected ? 'session-registration__tab--active' : null
       )}
       onClick={handleClick}
       role="tab"
@@ -93,8 +93,8 @@ export class RegistrationTabs extends React.Component<Props, State> {
     const { selectedTab } = this.state;
 
     return (
-      <div className="registration-container">
+      <div className="session-registration-container">
-        <div className="registration-container__tab-container">
+        <div className="session-registration__tab-container">
           <Tab
             label="Create Account"
             type="create"
@@ -146,7 +146,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
     const {signUpMode} = this.state;
     if (signUpMode === SignUpMode.Default) {
       return (
-        <div className="registration-container__content">
+        <div className="session-registration__content">
           {this.renderSignUpHeader()}
           {this.renderSignUpButton()}
         </div>
@@ -154,9 +154,9 @@ export class RegistrationTabs extends React.Component<Props, State> {
     }
     else {
       return (
-        <div className="registration-container__content">
+        <div className="session-registration__content">
           {this.renderSignUpHeader()}
-          <div className="registration-view-label">
+          <div className="session-registration__unique-session-id">
             Your Unique Session ID
           </div>
           {this.renderEnterSessionID(false)}
@@ -187,7 +187,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
 
   private renderSignUpHeader() {
     return (
-      <div className="signup-header">
+      <div className="session-signup-header">
         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<Props, State> {
 
   private renderSignIn() {
     return (
-      <div className="registration-container__content">
+      <div className="session-registration__content">
         {this.renderRegistrationContent()}
 
         {this.renderSignInButtons()}
@@ -237,7 +237,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
 
     if (signInMode === SignInMode.UsingSeed) {
       return (
-        <div className={classNames('entry-fields')}>
+        <div className={classNames('session-registration__entry-fields')}>
           <SessionInput
             label="Mnemonic Seed"
             type="password"
@@ -282,7 +282,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
     } else if (signInMode === SignInMode.LinkingDevice) {
       return (
         <div className="">
-          <div className="signin-device-pairing-header">
+          <div className="session-signin-device-pairing-header">
             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<Props, State> {
   private renderEnterSessionID(contentEditable: boolean) {
     return (
       <div
-        className="signin-enter-session-id"
+        className="session-signin-enter-session-id"
         contentEditable={contentEditable}
         placeholder="Enter your Session ID here"
       />
@@ -335,7 +335,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
           buttonType={greenButtonType}
           text={greenText}
         />
-        <div className="or-signin-buttons">or</div>
+        <div className="session-registration__or">or</div>
         <SessionButton
           onClick={() => {
             this.setState({
@@ -351,7 +351,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
 
   private renderTermsConditionAgreement() {
     return (
-      <div className="terms-conditions-agreement">
+      <div className="session-terms-conditions-agreement">
         By using this service, you agree to our <a>Terms and Conditions</a> and{' '}
         <a>Privacy Statement</a>
       </div>

ts/components/session/SessionInput.tsx

@@ -37,13 +37,13 @@ export class SessionInput extends React.PureComponent<Props, State> {
     const correctType = forceShow ? 'text' : type;
 
     return (
-      <div className="input-with-label-container">
+      <div className="session-input-with-label-container">
         <label
           htmlFor="floatField"
           className={classNames(
             inputValue !== ''
-              ? 'input-with-label-container filled'
+              ? 'session-input-with-label-container filled'
-              : 'input-with-label-container'
+              : 'session-input-with-label-container'
           )}
         >
           {label}