From 2cc7f3ed204ecc335b800a072bb8fcacafdbbf27 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 16 Dec 2019 10:03:50 +1100
Subject: [PATCH] fix merge issue
---
js/views/session_registration_view.js | 1 +
stylesheets/_session.scss | 274 ++++++++----------
stylesheets/_session_signin.scss | 6 +-
.../conversation/ConversationHeader.tsx | 31 +-
ts/components/session/RegistrationTabs.tsx | 41 ++-
ts/components/session/SessionButton.tsx | 9 +-
6 files changed, 177 insertions(+), 185 deletions(-)
diff --git a/js/views/session_registration_view.js b/js/views/session_registration_view.js
index 834f41f02..619248f86 100644
--- a/js/views/session_registration_view.js
+++ b/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);
};
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index ac24ab186..dfb00b139 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -1,34 +1,34 @@
@font-face {
- font-family: "SpaceMono";
- src: url("../fonts/SpaceMono-Regular.ttf") format("truetype");
+ font-family: 'SpaceMono';
+ src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
}
@font-face {
- font-family: "SpaceMono";
- src: url("../fonts/SpaceMono-Bold.ttf") format("truetype");
+ font-family: 'SpaceMono';
+ src: url('../fonts/SpaceMono-Bold.ttf') format('truetype');
font-weight: bold;
}
@font-face {
- font-family: "SpaceMono";
- src: url("../fonts/SpaceMono-Italic.ttf") format("truetype");
+ font-family: 'SpaceMono';
+ src: url('../fonts/SpaceMono-Italic.ttf') format('truetype');
font-style: italic;
}
@font-face {
- font-family: "SpaceMono";
- src: url("../fonts/SpaceMono-BoldItalic.ttf") format("truetype");
+ font-family: 'SpaceMono';
+ src: url('../fonts/SpaceMono-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
@font-face {
- font-family: "Wasa";
- src: url("../fonts/Wasa-Bold.otf") format("opentype");
+ font-family: 'Wasa';
+ 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,125 +227,121 @@ $session_message-container-border-radius: 5px;
&.square-outline {
border-radius: 0px;
}
+}
- .hidden {
- visibility: hidden;
- }
-
- @mixin set-icon-margin($size) {
- margin: $size / 3;
+@mixin set-icon-margin($size) {
+ margin: $size / 3;
+}
+.session-icon {
+ &.padded-left {
+ @include set-icon-margin($session-icon-size-md);
}
- .session-icon {
- &.padded-left {
- @include set-icon-margin($session-icon-size-md);
- }
+}
+.session-icon-button {
+ opacity: 0.4;
+ cursor: pointer;
+ display: inline-block;
+ transition: opacity $session-transition-duration;
+ &:hover {
+ opacity: 1;
}
- .session-icon-button {
- opacity: 0.4;
- cursor: pointer;
- display: inline-block;
- transition: opacity $session-transition-duration;
- &:hover {
- opacity: 1;
- }
-
- &.small.padded {
- @include set-icon-margin($session-icon-size-sm);
- }
- &.medium.padded {
- @include set-icon-margin($session-icon-size-md);
- }
+ &.small.padded {
+ @include set-icon-margin($session-icon-size-sm);
+ }
- &.large.padded {
- @include set-icon-margin($session-icon-size-lg);
- }
+ &.medium.padded {
+ @include set-icon-margin($session-icon-size-md);
}
- .session-icon {
- fill: $session-color-white;
+ &.large.padded {
+ @include set-icon-margin($session-icon-size-lg);
}
+}
- /* CONVERSATION AND MESSAGES */
+.session-icon {
+ fill: $session-color-white;
+}
- @mixin standard-icon-button() {
- color: $session-color-white;
- opacity: 0.9;
+/* CONVERSATION AND MESSAGES */
- &:hover {
- opacity: 1;
- }
- }
+@mixin standard-icon-button() {
+ color: $session-color-white;
+ opacity: 0.9;
- .module-conversation-header__title-flex,
- .module-conversation-header__title {
- width: 100%;
+ &:hover {
+ opacity: 1;
+ }
+}
- .module-contact-name {
- width: 100%;
- }
+.module-conversation-header__title-flex,
+.module-conversation-header__title {
+ width: 100%;
- .module-contact-name__profile-number {
- text-align: center;
- }
+ .module-contact-name {
+ width: 100%;
}
- .module-message__author__profile-name {
- font-style: normal;
+ .module-contact-name__profile-number {
+ text-align: center;
}
+}
- .module-message__author-avatar {
- flex-direction: column;
- display: inline-flex;
- margin-right: 20px;
- padding-top: 5px;
- }
+.module-message__author__profile-name {
+ font-style: normal;
+}
- .module-message__container {
- border-radius: $session_message-container-border-radius;
+.module-message__author-avatar {
+ flex-direction: column;
+ display: inline-flex;
+ margin-right: 20px;
+ padding-top: 5px;
+}
- label {
- user-select: none;
- }
+.odule-message__container {
+ border-radius: $session_message-container-border-radius;
- .module-message__attachment-container,
- .module-image--curved-bottom-right,
- .module-image--curved-bottom-left {
- border-top-left-radius: 0px;
- border-top-right-radius: 0px;
- border-bottom-left-radius: $session_message-container-border-radius;
- border-bottom-right-radius: $session_message-container-border-radius;
- }
+ label {
+ user-select: none;
+ }
- .conversation-header .session-icon-button {
- @include standard-icon-button();
- }
+ .module-message__attachment-container,
+ .module-image--curved-bottom-right,
+ .module-image--curved-bottom-left {
+ border-top-left-radius: 0px;
+ border-top-right-radius: 0px;
+ border-bottom-left-radius: $session_message-container-border-radius;
+ border-bottom-right-radius: $session_message-container-border-radius;
+ }
- .module-conversation-header,
- .message-selection-overlay {
- height: $session-conversation-header-height;
- }
+ .conversation-header .session-icon-button {
+ @include standard-icon-button();
+ }
- .message-selection-overlay {
- position: absolute;
- left: 15px;
- right: 15px;
- display: none;
+ .module-conversation-header,
+ .message-selection-overlay {
+ height: $session-conversation-header-height;
+ }
- .close-button {
- float: left;
- margin-top: 17px;
- margin-left: 7px;
- }
- }
- .message-selection-overlay div[role="button"] {
- display: inline-block;
+ .message-selection-overlay {
+ position: absolute;
+ left: 15px;
+ right: 15px;
+ display: none;
+
+ .close-button {
+ float: left;
+ margin-top: 17px;
+ margin-left: 7px;
}
+ }
+ .message-selection-overlay div[role='button'] {
+ display: inline-block;
+ }
- .message-selection-overlay .button-group {
- float: right;
- margin-top: 13.5px;
- }
+ .message-selection-overlay .button-group {
+ float: right;
+ margin-top: 13.5px;
}
}
@@ -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);
- }
- }
- }
-}
diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss
index ad07e65aa..e8c7b8ebd 100644
--- a/stylesheets/_session_signin.scss
+++ b/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;
- line-height: 14px;
+ font-size: 15px;
+ line-height: 18px;
text-align: center;
margin-bottom: 20px;
overflow-wrap: break-word;
diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx
index 07ece6169..921567478 100644
--- a/ts/components/conversation/ConversationHeader.tsx
+++ b/ts/components/conversation/ConversationHeader.tsx
@@ -430,23 +430,26 @@ export class ConversationHeader extends React.Component<Props> {
const showMembersMenuItem = isGroup && (
<MenuItem onClick={onShowGroupMembers}>{i18n('showMembers')}</MenuItem>
);
- const showSafetyNumberMenuItem = !isGroup && !isMe && (
- <MenuItem onClick={onShowSafetyNumber}>
- {i18n('showSafetyNumber')}
- </MenuItem>
- );
+ const showSafetyNumberMenuItem = !isGroup &&
+ !isMe && (
+ <MenuItem onClick={onShowSafetyNumber}>
+ {i18n('showSafetyNumber')}
+ </MenuItem>
+ );
const resetSessionMenuItem = !isGroup && (
<MenuItem onClick={onResetSession}>{i18n('resetSession')}</MenuItem>
);
- const blockHandlerMenuItem = !isMe && !isGroup && (
- <MenuItem onClick={blockHandler}>{blockTitle}</MenuItem>
- );
- const changeNicknameMenuItem = !isMe && !isGroup && (
- <MenuItem onClick={onChangeNickname}>{i18n('changeNickname')}</MenuItem>
- );
- const clearNicknameMenuItem = !isMe && !isGroup && hasNickname && (
- <MenuItem onClick={onClearNickname}>{i18n('clearNickname')}</MenuItem>
- );
+ const blockHandlerMenuItem = !isMe &&
+ !isGroup && <MenuItem onClick={blockHandler}>{blockTitle}</MenuItem>;
+ const changeNicknameMenuItem = !isMe &&
+ !isGroup && (
+ <MenuItem onClick={onChangeNickname}>{i18n('changeNickname')}</MenuItem>
+ );
+ const clearNicknameMenuItem = !isMe &&
+ !isGroup &&
+ hasNickname && (
+ <MenuItem onClick={onClearNickname}>{i18n('clearNickname')}</MenuItem>
+ );
const archiveConversationMenuItem = isArchived ? (
<MenuItem onClick={onMoveToInbox}>
{i18n('moveConversationToInbox')}
diff --git a/ts/components/session/RegistrationTabs.tsx b/ts/components/session/RegistrationTabs.tsx
index 4858acc16..610c506e4 100644
--- a/ts/components/session/RegistrationTabs.tsx
+++ b/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')}
/>
);
diff --git a/ts/components/session/SessionButton.tsx b/ts/components/session/SessionButton.tsx
index 3f420b25a..62b0aebd2 100644
--- a/ts/components/session/SessionButton.tsx
+++ b/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}
>