fix merge issue

js/views/session_registration_view.js

@@ -123,6 +123,7 @@
   window.Session.setNewSessionID = sessionID => {
     const el = document.querySelector('.session-signin-enter-session-id');
     const fx = new TextScramble(el);
+    el.innerHTML = sessionID;
     fx.setText(sessionID);
   };
 

stylesheets/_session.scss

@@ -1,34 +1,34 @@
 @font-face {
-  font-family: "SpaceMono";
+  font-family: 'SpaceMono';
-  src: url("../fonts/SpaceMono-Regular.ttf") format("truetype");
+  src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
 }
 
 @font-face {
-  font-family: "SpaceMono";
+  font-family: 'SpaceMono';
-  src: url("../fonts/SpaceMono-Bold.ttf") format("truetype");
+  src: url('../fonts/SpaceMono-Bold.ttf') format('truetype');
   font-weight: bold;
 }
 
 @font-face {
-  font-family: "SpaceMono";
+  font-family: 'SpaceMono';
-  src: url("../fonts/SpaceMono-Italic.ttf") format("truetype");
+  src: url('../fonts/SpaceMono-Italic.ttf') format('truetype');
   font-style: italic;
 }
 
 @font-face {
-  font-family: "SpaceMono";
+  font-family: 'SpaceMono';
-  src: url("../fonts/SpaceMono-BoldItalic.ttf") format("truetype");
+  src: url('../fonts/SpaceMono-BoldItalic.ttf') format('truetype');
   font-weight: bold;
   font-style: italic;
 }
 @font-face {
-  font-family: "Wasa";
+  font-family: 'Wasa';
-  src: url("../fonts/Wasa-Bold.otf") format("opentype");
+  src: url('../fonts/Wasa-Bold.otf') format('opentype');
   font-weight: bold;
 }
 
 // Session Colors
-$session-font-family: "Wasa";
+$session-font-family: 'Wasa';
 
 $session-color-green: #00f782;
 $session-color-green-alt-1: #00f480;
@@ -98,7 +98,11 @@ $session-gradient-green: linear-gradient(
   rgba($session-color-green-alt-1, 1),
   rgba($session-color-green-alt-1, 0.6)
 );
-$session-gradient-black: linear-gradient(90deg, rgba($session-shade-3, 1), rgba($session-shade-4, 0.6));
+$session-gradient-black: linear-gradient(
+  90deg,
+  rgba($session-shade-3, 1),
+  rgba($session-shade-4, 0.6)
+);
 
 $session-dark-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.37);
 
@@ -137,6 +141,7 @@ $session_message-container-border-radius: 5px;
   font-weight: 700;
   user-select: none;
   cursor: pointer;
+  transition: $session-transition-duration;
 
   &.default,
   &.square,
@@ -144,7 +149,11 @@ $session_message-container-border-radius: 5px;
     color: $session-color-white;
 
     &.green {
+      border: 2px solid $session-color-green;
       background-color: $session-color-green;
+      &:hover {
+        @include transparent-background($session-color-green);
+      }
     }
     &.white {
       background-color: $session-color-white;
@@ -168,9 +177,16 @@ $session_message-container-border-radius: 5px;
   &.square-outline {
     &.green {
       @include transparent-background($session-color-green);
+
+      &:hover {
+        @include transparent-background($session-color-white);
+      }
     }
     &.white {
       @include transparent-background($session-color-white);
+      &:hover {
+        @include transparent-background($session-color-green);
+      }
     }
     &.primary {
       @include transparent-background($session-color-primary);
@@ -190,7 +206,7 @@ $session_message-container-border-radius: 5px;
     min-width: 165px;
     height: 45px;
     line-height: 45px;
-    padding: 0 35px 0 35px;
+    padding: 0;
     font-size: 15px;
     font-family: $session-font-family;
     border-radius: 500px;
@@ -211,9 +227,6 @@ $session_message-container-border-radius: 5px;
   &.square-outline {
     border-radius: 0px;
   }
-
-  .hidden {
-    visibility: hidden;
 }
 
 @mixin set-icon-margin($size) {
@@ -285,7 +298,7 @@ $session_message-container-border-radius: 5px;
   padding-top: 5px;
 }
 
-  .module-message__container {
+.odule-message__container {
   border-radius: $session_message-container-border-radius;
 
   label {
@@ -322,7 +335,7 @@ $session_message-container-border-radius: 5px;
       margin-left: 7px;
     }
   }
-    .message-selection-overlay div[role="button"] {
+  .message-selection-overlay div[role='button'] {
     display: inline-block;
   }
 
@@ -331,7 +344,6 @@ $session_message-container-border-radius: 5px;
     margin-top: 13.5px;
   }
 }
-}
 
 .hidden {
   visibility: hidden;
@@ -388,55 +400,3 @@ $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 {
-        @include transparent-background($session-color-white);
-      }
-    }
-
-    &.white {
-      @include transparent-background($session-color-white);
-
-      &:hover {
-        @include transparent-background($session-color-green);
-      }
-    }
-  }
-}

stylesheets/_session_signin.scss

@@ -223,15 +223,15 @@
   }
 
   &-signin-enter-session-id {
-    height: auto;
+    height: 94px;
     width: 289px;
     border-radius: 8px;
     border: 2px solid $session-color-dark-grey;
     outline: 0;
     background: transparent;
     color: $session-color-white;
-    font-size: 12px;
+    font-size: 15px;
-    line-height: 14px;
+    line-height: 18px;
     text-align: center;
     margin-bottom: 20px;
     overflow-wrap: break-word;

ts/components/conversation/ConversationHeader.tsx

@@ -430,7 +430,8 @@ export class ConversationHeader extends React.Component<Props> {
     const showMembersMenuItem = isGroup && (
       <MenuItem onClick={onShowGroupMembers}>{i18n('showMembers')}</MenuItem>
     );
-    const showSafetyNumberMenuItem = !isGroup && !isMe && (
+    const showSafetyNumberMenuItem = !isGroup &&
+      !isMe && (
         <MenuItem onClick={onShowSafetyNumber}>
           {i18n('showSafetyNumber')}
         </MenuItem>
@@ -438,13 +439,15 @@ export class ConversationHeader extends React.Component<Props> {
     const resetSessionMenuItem = !isGroup && (
       <MenuItem onClick={onResetSession}>{i18n('resetSession')}</MenuItem>
     );
-    const blockHandlerMenuItem = !isMe && !isGroup && (
+    const blockHandlerMenuItem = !isMe &&
-      <MenuItem onClick={blockHandler}>{blockTitle}</MenuItem>
+      !isGroup && <MenuItem onClick={blockHandler}>{blockTitle}</MenuItem>;
-    );
+    const changeNicknameMenuItem = !isMe &&
-    const changeNicknameMenuItem = !isMe && !isGroup && (
+      !isGroup && (
         <MenuItem onClick={onChangeNickname}>{i18n('changeNickname')}</MenuItem>
       );
-    const clearNicknameMenuItem = !isMe && !isGroup && hasNickname && (
+    const clearNicknameMenuItem = !isMe &&
+      !isGroup &&
+      hasNickname && (
         <MenuItem onClick={onClearNickname}>{i18n('clearNickname')}</MenuItem>
       );
     const archiveConversationMenuItem = isArchived ? (

ts/components/session/RegistrationTabs.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { SessionInput } from './SessionInput';
-import { SessionButton, SessionButtonType } from './SessionButton';
+import {
+  SessionButton,
+  SessionButtonColor,
+  SessionButtonType,
+} from './SessionButton';
 import { trigger } from '../../shims/events';
 import { SessionHtmlRenderer } from './SessionHTMLRenderer';
 
@@ -256,7 +260,8 @@ export class RegistrationTabs extends React.Component<{}, State> {
               onClick={() => {
                 this.onCompleteSignUpClick();
               }}
-              buttonType={SessionButtonType.FullGreen}
+              buttonType={SessionButtonType.Brand}
+              buttonColor={SessionButtonColor.Green}
               text={window.i18n('completeSignUp')}
             />
           </div>
@@ -286,13 +291,16 @@ export class RegistrationTabs extends React.Component<{}, State> {
   private renderSignUpButton() {
     const { signUpMode } = this.state;
 
-    let buttonType: any;
+    let buttonType: SessionButtonType;
+    let buttonColor: SessionButtonColor;
     let buttonText: string;
     if (signUpMode !== SignUpMode.Default) {
-      buttonType = SessionButtonType.FullGreen;
+      buttonType = SessionButtonType.Brand;
+      buttonColor = SessionButtonColor.Green;
       buttonText = window.i18n('getStarted');
     } else {
-      buttonType = SessionButtonType.Green;
+      buttonType = SessionButtonType.BrandOutline;
+      buttonColor = SessionButtonColor.Green;
       buttonText = window.i18n('generateSessionID');
     }
 
@@ -306,6 +314,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
           }
         }}
         buttonType={buttonType}
+        buttonColor={buttonColor}
         text={buttonText}
       />
     );
@@ -462,7 +471,10 @@ export class RegistrationTabs extends React.Component<{}, State> {
     if (signInMode === SignInMode.Default) {
       return (
         <div>
-          {this.renderRestoreUsingSeedButton(SessionButtonType.Green)}
+          {this.renderRestoreUsingSeedButton(
+            SessionButtonType.BrandOutline,
+            SessionButtonColor.Green
+          )}
           <div className="session-registration__or">{or}</div>
           {this.renderLinkDeviceToExistingAccountButton()}
         </div>
@@ -474,7 +486,10 @@ export class RegistrationTabs extends React.Component<{}, State> {
         <div>
           {this.renderContinueYourSessionButton()}
           <div className="session-registration__or">{or}</div>
-          {this.renderRestoreUsingSeedButton(SessionButtonType.White)}
+          {this.renderRestoreUsingSeedButton(
+            SessionButtonType.BrandOutline,
+            SessionButtonColor.Green
+          )}
         </div>
       );
     }
@@ -512,13 +527,17 @@ export class RegistrationTabs extends React.Component<{}, State> {
         onClick={() => {
           this.handleContinueYourSessionClick();
         }}
-        buttonType={SessionButtonType.FullGreen}
+        buttonType={SessionButtonType.Brand}
+        buttonColor={SessionButtonColor.Green}
         text={window.i18n('continueYourSession')}
       />
     );
   }
 
-  private renderRestoreUsingSeedButton(buttonType: SessionButtonType) {
+  private renderRestoreUsingSeedButton(
+    buttonType: SessionButtonType,
+    buttonColor: SessionButtonColor
+  ) {
     return (
       <SessionButton
         onClick={() => {
@@ -534,6 +553,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
           window.Session.emptyContentEditableDivs();
         }}
         buttonType={buttonType}
+        buttonColor={buttonColor}
         text={window.i18n('restoreUsingSeed')}
       />
     );
@@ -550,7 +570,8 @@ export class RegistrationTabs extends React.Component<{}, State> {
             signUpMode: SignUpMode.Default,
           });
         }}
-        buttonType={SessionButtonType.White}
+        buttonType={SessionButtonType.BrandOutline}
+        buttonColor={SessionButtonColor.White}
         text={window.i18n('linkDeviceToExistingAccount')}
       />
     );

ts/components/session/SessionButton.tsx

@@ -42,9 +42,16 @@ export class SessionButton extends React.PureComponent<Props> {
   public render() {
     const { buttonType, buttonColor, text } = this.props;
 
+    const buttonTypes = [];
+
+    buttonTypes.push(buttonType);
+    if (buttonType.includes('-outline')) {
+      buttonTypes.push(buttonType.replace('-outline', ''));
+    }
+
     return (
       <div
-        className={classNames('session-button', buttonType, buttonColor)}
+        className={classNames('session-button', ...buttonTypes, buttonColor)}
         role="button"
         onClick={this.clickHandler}
       >