From 94bd47fb8cb64d6e31f51cc3fff95f3403472fbf Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 28 Aug 2020 10:08:32 +1000 Subject: [PATCH 01/14] add way to add icon to SessionConfirm dialog --- js/background.js | 2 ++ js/views/session_confirm_view.js | 2 ++ stylesheets/_session.scss | 12 ++++++++---- ts/components/session/ActionsPanel.tsx | 2 -- ts/components/session/SessionConfirm.tsx | 12 ++++++++++++ 5 files changed, 24 insertions(+), 6 deletions(-) diff --git a/js/background.js b/js/background.js index b4522661c..d2f5b7e9b 100644 --- a/js/background.js +++ b/js/background.js @@ -681,6 +681,8 @@ closeTheme: params.closeTheme || undefined, cancelText: params.cancelText || undefined, hideCancel: params.hideCancel || false, + sessionIcon: params.sessionIcon || undefined, + iconSize: params.iconSize || undefined, }); confirmDialog.render(); diff --git a/js/views/session_confirm_view.js b/js/views/session_confirm_view.js index ae31cec29..a86fd3017 100644 --- a/js/views/session_confirm_view.js +++ b/js/views/session_confirm_view.js @@ -21,6 +21,8 @@ okTheme: options.okTheme, closeTheme: options.closeTheme, hideCancel: options.hideCancel, + sessionIcon: options.sessionIcon, + iconSize: options.iconSize, }; }, diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 879cb4550..1287c75d7 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -100,7 +100,9 @@ textarea { &.default, &.square, &.brand { - color: $session-color-white; + @include themify($themes) { + color: themed('foregroundPrimary'); + } &:not(.disabled):hover { @include themify($themes) { @@ -207,8 +209,10 @@ textarea { border-radius: 500px; &:not(.disabled):hover { - color: $session-color-white; - border-color: $session-color-white; + @include themify($themes) { + color: themed('textColor'); + border-color: themed('textColor'); + } } } @@ -581,7 +585,7 @@ label { @include themify($themes) { background-color: themed('modalBackground'); color: themed('textColor'); - border: 1px solid themed('borderActionPanel'); + border: themed('borderActionPanel'); } overflow: hidden; display: flex; diff --git a/ts/components/session/ActionsPanel.tsx b/ts/components/session/ActionsPanel.tsx index 8b603dabe..661c1b345 100644 --- a/ts/components/session/ActionsPanel.tsx +++ b/ts/components/session/ActionsPanel.tsx @@ -2,8 +2,6 @@ import React from 'react'; import { SessionIconButton, SessionIconSize, SessionIconType } from './icon'; import { Avatar } from '../Avatar'; import { PropsData as ConversationListItemPropsType } from '../ConversationListItem'; -import { MultiDeviceProtocol } from '../../session/protocols'; -import { UserUtil } from '../../util'; import { createOrUpdateItem, getItemById } from '../../../js/modules/data'; export enum SectionType { diff --git a/ts/components/session/SessionConfirm.tsx b/ts/components/session/SessionConfirm.tsx index ed8914c4a..a906a5f3c 100644 --- a/ts/components/session/SessionConfirm.tsx +++ b/ts/components/session/SessionConfirm.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { SessionModal } from './SessionModal'; import { SessionButton, SessionButtonColor } from './SessionButton'; import { SessionHtmlRenderer } from './SessionHTMLRenderer'; +import { SessionIcon, SessionIconSize, SessionIconType } from './icon'; interface Props { message: string; @@ -16,6 +17,8 @@ interface Props { hideCancel: boolean; okTheme: SessionButtonColor; closeTheme: SessionButtonColor; + sessionIcon?: SessionIconType; + iconSize?: SessionIconSize; } export class SessionConfirm extends React.Component { @@ -41,6 +44,8 @@ export class SessionConfirm extends React.Component { onClickOk, onClickClose, hideCancel, + sessionIcon, + iconSize, } = this.props; const okText = this.props.okText || window.i18n('ok'); @@ -62,6 +67,13 @@ export class SessionConfirm extends React.Component { {!showHeader &&
}
+ {sessionIcon && ( +
+ +
+
+ )} + Date: Fri, 28 Aug 2020 10:09:17 +1000 Subject: [PATCH 02/14] add types for window.confirmationDialog --- background.d.ts | 14 ++++++++++++++ ts/window.d.ts | 3 ++- 2 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 background.d.ts diff --git a/background.d.ts b/background.d.ts new file mode 100644 index 000000000..78d1c6119 --- /dev/null +++ b/background.d.ts @@ -0,0 +1,14 @@ +export interface ConfirmationDialogParams { + title?: string; + message: string; + messageSub?: string; + resolve?: any; + reject?: any; + okText?: string; + okTheme?: string; + closeTheme?: string; + cancelText?: string; + hideCancel?: boolean; + sessionIcon?: SessionIconType; + iconSize?: SessionIconSize; + } diff --git a/ts/window.d.ts b/ts/window.d.ts index e4c1b34a4..52a3f7e59 100644 --- a/ts/window.d.ts +++ b/ts/window.d.ts @@ -11,6 +11,7 @@ import { SwarmPolling } from './session/snode_api/swarmPolling'; import { LibTextsecure } from '../libtextsecure'; import { ConversationType } from '../js/modules/data'; import { RecoveryPhraseUtil } from '../libloki/modules/mnemonic'; +import { ConfirmationDialogParams } from '../background'; /* We declare window stuff here instead of global.d.ts because we are importing other declarations. @@ -38,7 +39,7 @@ declare global { attemptConnection: ConversationType; clearLocalData: any; clipboard: any; - confirmationDialog: any; + confirmationDialog: (params: ConfirmationDialogParams) => any; dcodeIO: any; deleteAccount: any; displayNameRegex: any; From d4a954e53f93e3d1e6730ddbdb65a84b0b71e5a5 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 28 Aug 2020 10:10:23 +1000 Subject: [PATCH 03/14] add sun SessionIcon and a MAX size for SessionIconSize --- ts/components/session/icon/Icons.tsx | 7 +++++++ ts/components/session/icon/SessionIcon.tsx | 3 +++ 2 files changed, 10 insertions(+) diff --git a/ts/components/session/icon/Icons.tsx b/ts/components/session/icon/Icons.tsx index 0a95571db..0a55c372c 100644 --- a/ts/components/session/icon/Icons.tsx +++ b/ts/components/session/icon/Icons.tsx @@ -28,6 +28,7 @@ export enum SessionIconType { Search = 'search', Send = 'send', Star = 'star', + Sun = 'sun', QR = 'qr', Users = 'users', Upload = 'upload', @@ -39,6 +40,7 @@ export enum SessionIconSize { Medium = 'medium', Large = 'large', Huge = 'huge', + Max = 'max', } export const icons = { @@ -196,6 +198,11 @@ export const icons = { 'M9.38,2.17c-1.73,0-3.12,1.4-3.12,3.12s1.4,3.12,3.12,3.12s3.12-1.4,3.12-3.12S11.1,2.17,9.38,2.17z M16.93,0.25c2.3,0.59,3.92,2.67,3.92,5.05s-1.61,4.46-3.92,5.05c-0.56,0.14-1.12-0.19-1.27-0.75c-0.14-0.56,0.19-1.12,0.75-1.27 c1.38-0.35,2.35-1.6,2.35-3.03s-0.97-2.67-2.35-3.03c-0.56-0.14-0.9-0.71-0.75-1.27C15.8,0.44,16.37,0.11,16.93,0.25z M9.38,0.08 c2.88,0,5.21,2.33,5.21,5.21s-2.33,5.21-5.21,5.21S4.17,8.17,4.17,5.29C4.17,2.42,6.5,0.08,9.38,0.08z M21.09,12.75 c2.22,0.57,3.8,2.53,3.9,4.81L25,17.79v2.08c0,0.58-0.47,1.04-1.04,1.04c-0.54,0-0.98-0.41-1.04-0.93l-0.01-0.11v-2.08 c0-1.42-0.96-2.67-2.34-3.02c-0.56-0.14-0.89-0.71-0.75-1.27C19.97,12.94,20.54,12.61,21.09,12.75z M13.54,12.58 c2.8,0,5.09,2.21,5.2,4.99v0.22v2.08c0,0.58-0.47,1.04-1.04,1.04c-0.54,0-0.98-0.41-1.04-0.93l-0.01-0.11v-2.08 c0-1.67-1.3-3.03-2.95-3.12h-0.18H5.21c-1.67,0-3.03,1.3-3.12,2.95v0.18v2.08c0,0.58-0.47,1.04-1.04,1.04 c-0.54,0-0.98-0.41-1.04-0.93L0,19.88V17.8c0-2.8,2.21-5.09,4.99-5.2h0.22h8.33V12.58z', viewBox: '0 0 25 21', }, + [SessionIconType.Sun]: { + path: + 'M5.99997005,30 L2.00002995,30 C0.895437462,30 0,30.8955438 0,32 C0,33.1044562 0.895437462,34 2.00002995,34 L5.99997005,34 C7.10444275,34 8,33.1045759 8,32 C8,30.8954241 7.10444275,30 5.99997005,30 Z M61.9999701,30 L58.0000299,30 C56.8955573,30 56,30.8954241 56,32 C56,33.1045759 56.8954375,34 58.0000299,34 L61.9999701,34 C63.1044427,34 64,33.1045759 64,32 C64,30.8954241 63.1045625,30 61.9999701,30 Z M32,56 C30.8955438,56 30,56.8954375 30,58.0000299 L30,61.9999701 C30,63.1044427 30.8954241,64 32,64 C33.1045759,64 34,63.1045625 34,61.9999701 L34,58.0000299 C34,56.8955573 33.1044562,56 32,56 Z M32,0 C30.8955438,0 30,0.895437462 30,2.00002995 L30,5.99997005 C30,7.10444275 30.8954241,8 32,8 C33.1045759,8 34,7.10456254 34,5.99997005 L34,2.00002995 C34,0.895437462 33.1044562,0 32,0 Z M47.7317718,56.7845838 L45.7319182,53.0721056 C45.1797305,52.0469599 43.9566528,51.6955731 43.0002063,52.2875514 C42.0437597,52.8794013 41.7160405,54.1903297 42.2682282,55.2154754 L44.2680818,58.9279535 C44.8205091,59.9536127 46.0439461,60.3041008 46.9997937,59.7125077 C47.9562403,59.1206578 48.2839595,57.8097294 47.7317718,56.7845838 Z M21.7317718,8.78454964 L19.7319182,5.07209798 C19.1797305,4.0469596 17.9566528,3.69557529 17.0002063,4.28754937 C16.0437597,4.87939507 15.7160405,6.19031404 16.2682282,7.21545242 L18.2680818,10.9279041 C18.8205091,11.953556 20.0439461,12.30417 20.9997937,11.7124527 C21.9562403,11.120607 22.2839595,9.80968802 21.7317718,8.78454964 Z M58.9279441,44.2681449 L55.2154404,42.2683526 C54.1901593,41.7159423 52.8793503,42.0437712 52.2874963,43.0003082 C51.6956424,43.9567254 52.0469032,45.1797656 53.0720559,45.7319364 L56.7845596,47.7317287 C57.8091988,48.2837797 59.1203929,47.9566694 59.7125037,46.9997731 C60.3043576,46.0433559 59.9530968,44.8203157 58.9279441,44.2681449 Z M10.9279935,18.2681287 L7.21546334,16.2683276 C6.1901749,15.7159149 4.87922822,16.043865 4.28749839,17.0002864 C3.69564018,17.9567078 4.04690354,19.1797533 5.07206359,19.7319265 L8.78459372,21.7317275 C9.80924022,22.2837809 11.1204437,21.9566692 11.7125587,20.9997687 C12.3042885,20.0433474 11.9531535,18.8203018 10.9279935,18.2681287 Z M59.7125037,17.0002509 C59.1206497,16.0438126 57.8098407,15.7159764 56.7845596,16.2682791 L53.0720559,18.2681157 C52.0469032,18.8202986 51.6956424,20.0433659 52.2874963,20.9998042 C52.8796071,21.9567217 54.1909296,22.2837194 55.2154404,21.731776 L58.9279441,19.7319395 C59.9530968,19.1797565 60.3043576,17.9566893 59.7125037,17.0002509 Z M11.7124767,43.0002066 C11.1207531,42.0437597 9.80969199,41.7160405 8.78454285,42.2682283 L5.07205219,44.2680826 C4.04690304,44.8202704 3.69564342,46.0433485 4.28749534,46.9997953 C4.87960402,47.9567213 6.19092192,48.2837219 7.21542915,47.7317736 L10.9279198,45.7319194 C11.9531973,45.1797315 12.3043286,43.9566534 11.7124767,43.0002066 Z M46.9997937,4.28760336 C46.0432274,3.69550719 44.8202695,4.04701615 44.2680818,5.07214363 L42.2682282,8.78455581 C41.7160405,9.80968329 42.0437597,11.1205883 43.0002063,11.7124277 C43.9561737,12.3041388 45.1794909,11.9536568 45.7319182,10.9278875 L47.7317718,7.21547528 C48.2839595,6.19047618 47.9562403,4.87957115 46.9997937,4.28760336 Z M20.9997937,52.2876314 C20.0433472,51.6955352 18.8201497,52.0469158 18.2680818,53.0721716 L16.2682282,56.7845838 C15.7160405,57.8097113 16.0437597,59.1206163 17.0002063,59.7124557 C17.9561737,60.3041668 19.1794909,59.9535565 19.7319182,58.9279155 L21.7317718,55.2155033 C22.2839595,54.1903758 21.9562403,52.8794708 20.9997937,52.2876314 Z M31.5,12 C20.7477571,12 12,20.7477571 12,31.5 C12,42.2522429 20.7477571,51 31.5,51 C42.2522429,51 51,42.2522429 51,31.5 C51,20.7477571 42.252368,12 31.5,12 Z M31.5,47.6430057 C22.5988336,47.6430057 15.3569943,40.4012983 15.3569943,31.5 C15.3569943,22.5987017 22.5988336,15.3569943 31.5,15.3569943 C40.4011664,15.3569943 47.6430057,22.5988336 47.6430057,31.5 C47.6430057,40.4011664 40.4012983,47.6430057 31.5,47.6430057 Z', + viewBox: '0 0 64 64', + }, [SessionIconType.Upload]: { path: 'M380.032,133.472l-112-128C264.992,2.016,260.608,0,256,0c-4.608,0-8.992,2.016-12.032,5.472l-112,128 c-4.128,4.736-5.152,11.424-2.528,17.152C132.032,156.32,137.728,160,144,160h64v208c0,8.832,7.168,16,16,16h64 c8.832,0,16-7.168,16-16V160h64c6.272,0,11.968-3.648,14.56-9.376C385.152,144.896,384.192,138.176,380.032,133.472z M432,352v96H80v-96H16v128c0,17.696,14.336,32,32,32h416c17.696,0,32-14.304,32-32V352H432z', diff --git a/ts/components/session/icon/SessionIcon.tsx b/ts/components/session/icon/SessionIcon.tsx index de8e7c43c..28844ba19 100644 --- a/ts/components/session/icon/SessionIcon.tsx +++ b/ts/components/session/icon/SessionIcon.tsx @@ -49,6 +49,9 @@ export class SessionIcon extends React.PureComponent { case SessionIconSize.Huge: iconDimensions = '30'; break; + case SessionIconSize.Max: + iconDimensions = '80'; + break; default: iconDimensions = '20'; } From 22b2d8099365ccf90a3baa80ae528fdafb8bcbde Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 28 Aug 2020 10:10:45 +1000 Subject: [PATCH 04/14] make light theme default for existing users and show dialog to revert --- js/views/app_view.js | 2 +- ts/components/session/ActionsPanel.tsx | 35 ++++++++++++++++++++++ ts/components/session/RegistrationTabs.tsx | 7 +++++ 3 files changed, 43 insertions(+), 1 deletion(-) diff --git a/js/views/app_view.js b/js/views/app_view.js index f271b2149..144cb3e2c 100644 --- a/js/views/app_view.js +++ b/js/views/app_view.js @@ -22,7 +22,7 @@ openInbox: 'openInbox', }, applyTheme() { - const theme = storage.get('theme-setting') || 'dark'; + const theme = storage.get('theme-setting') || 'light'; this.$el .removeClass('light-theme') .removeClass('dark-theme') diff --git a/ts/components/session/ActionsPanel.tsx b/ts/components/session/ActionsPanel.tsx index 661c1b345..6c4580254 100644 --- a/ts/components/session/ActionsPanel.tsx +++ b/ts/components/session/ActionsPanel.tsx @@ -57,10 +57,45 @@ export class ActionsPanel extends React.Component { }, 'refreshAvatarCallback' ); + + void this.showLightThemeDialogIfNeeded(); } ); } + public async showLightThemeDialogIfNeeded() { + const currentTheme = window.Events.getThemeSetting(); // defaults to light on new registration + if (currentTheme !== 'light') { + const message = 'Light Mode'; + const messageSub = + 'Feeling the dark side more? Just toggle the theme from the bottom-left moon icon.'; + const hasSeenLightMode = await getItemById('hasSeenLightModeDialog'); + + if (hasSeenLightMode?.value === true) { + // if hasSeen is set and true, we have nothing to do + return; + } + // force light them right now, then ask for permission + await window.Events.setThemeSetting('light'); + // FIXME add the SUN icon + window.confirmationDialog({ + message, + messageSub, + resolve: async () => { + const data = { + id: 'hasSeenLightModeDialog', + value: true, + }; + void createOrUpdateItem(data); + }, + okTheme: 'default primary', + hideCancel: true, + sessionIcon: SessionIconType.Sun, + iconSize: SessionIconSize.Max, + }); + } + } + public refreshAvatarCallback(conversation: any) { if (conversation.changed?.profileAvatar) { this.setState({ diff --git a/ts/components/session/RegistrationTabs.tsx b/ts/components/session/RegistrationTabs.tsx index 6faec374e..91c9cd3ce 100644 --- a/ts/components/session/RegistrationTabs.tsx +++ b/ts/components/session/RegistrationTabs.tsx @@ -12,6 +12,7 @@ import { SessionHtmlRenderer } from './SessionHTMLRenderer'; import { SessionIdEditable } from './SessionIdEditable'; import { SessionSpinner } from './SessionSpinner'; import { StringUtils, ToastUtils } from '../../session/utils'; +import { createOrUpdateItem } from '../../../js/modules/data'; enum SignInMode { Default, @@ -862,6 +863,12 @@ export class RegistrationTabs extends React.Component<{}, State> { language, trimName ); + // FIXME remove everything related to hasSeenLightModeDialog at some point in the future (27/08/2020) + const data = { + id: 'hasSeenLightModeDialog', + value: true, + }; + await createOrUpdateItem(data); trigger('openInbox'); } catch (e) { ToastUtils.push({ From 4ec51b55bf1dce61901b96ba66504481e8e4da2d Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 28 Aug 2020 10:42:50 +1000 Subject: [PATCH 05/14] fix delte message overlay size and add subtle function to just compute color --- stylesheets/_session.scss | 3 ++- stylesheets/_session_constants.scss | 6 +++++- stylesheets/_session_theme.scss | 2 +- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 1287c75d7..6a2dbe74b 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -463,7 +463,8 @@ label { .session-button.default.danger { display: flex; - width: 80px; + // width: 80px; + margin-right: 0px; } } .message-selection-overlay div[role='button'] { diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss index fc7d64d35..d31cf94d8 100644 --- a/stylesheets/_session_constants.scss +++ b/stylesheets/_session_constants.scss @@ -151,7 +151,11 @@ $session-font-h4: 16px; } @mixin session-color-subtle($color) { - color: rgba($color, 0.6); + color: subtle($color); +} + +@function subtle($color) { + @return rgba($color, 0.6); } // ////////////////////////////////////////////// diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index a43518ef2..a3bfed84c 100644 --- a/stylesheets/_session_theme.scss +++ b/stylesheets/_session_theme.scss @@ -116,7 +116,7 @@ margin-left: 5px; .session-icon.check { @include themify($themes) { - fill: themed('sentMessageText'); + fill: subtle(themed('sentMessageText')); } } } From 3e62d90e6975cee0952b182236b8d0892bd02028 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 28 Aug 2020 11:20:18 +1000 Subject: [PATCH 06/14] add small shadow to message selected and modal --- stylesheets/_session.scss | 1 + stylesheets/_session_constants.scss | 1 - stylesheets/_session_theme.scss | 3 +-- stylesheets/themes.scss | 14 ++++++-------- 4 files changed, 8 insertions(+), 11 deletions(-) diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 6a2dbe74b..7509d2444 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -587,6 +587,7 @@ label { background-color: themed('modalBackground'); color: themed('textColor'); border: themed('borderActionPanel'); + box-shadow: themed('sessionShadow'); } overflow: hidden; display: flex; diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss index d31cf94d8..11aeab0e6 100644 --- a/stylesheets/_session_constants.scss +++ b/stylesheets/_session_constants.scss @@ -119,7 +119,6 @@ $session-color-secondary: $session-shade-6; // Opacity and Shadow $session-shadow-opacity: 0.15; $session-overlay-opacity: 0.3; -$session-dark-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.37); // ////////////////////////////////////////////// // /////////////////// Text ///////////////////// diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index a3bfed84c..0e5bfa384 100644 --- a/stylesheets/_session_theme.scss +++ b/stylesheets/_session_theme.scss @@ -101,9 +101,8 @@ .module-message { &__container { @include themify($themes) { - background-image: themed('messageSelected'); + box-shadow: themed('sessionShadow'); } - box-shadow: $session-dark-shadow; } &__author { diff --git a/stylesheets/themes.scss b/stylesheets/themes.scss index f6e13c324..d388f5198 100644 --- a/stylesheets/themes.scss +++ b/stylesheets/themes.scss @@ -21,14 +21,13 @@ $themes: ( foregroundPrimary: #fff, buttonGreen: #272726, // conversation view - messageSelected: - linear-gradient(270deg, rgba(#00f480, 1), rgba(#00f480, 0.6)), - composeViewBackground: #fcfcfc, + composeViewBackground: #fcfcfc, composeViewTextFieldBackground: #ededed, receivedMessageBackground: #f5f5f5, - sentMessageBackground: #272726, + sentMessageBackground: #00e97b, receivedMessageText: #000, - sentMessageText: #fff, + sentMessageText: #000, + sessionShadow: 0 0 4px 0 rgba(#000, 0.37), // left pane conversationList: #fff, conversationItemHasUnread: #fcfcfc, @@ -71,14 +70,13 @@ $themes: ( foregroundPrimary: #fff, buttonGreen: #00f782, // conversation view - messageSelected: - linear-gradient(270deg, rgba(#00f480, 1), rgba(#00f480, 0.6)), - composeViewBackground: #1b1b1b, + composeViewBackground: #1b1b1b, composeViewTextFieldBackground: #141414, receivedMessageBackground: #222325, sentMessageBackground: #3f4146, receivedMessageText: #fff, sentMessageText: #fff, + sessionShadow: 0 0 4px 0 rgba(#fff, 0.20), // left pane conversationList: #1b1b1b, conversationItemHasUnread: #2c2c2c, From 3173f01abf622c4f12c4a11c7251eaf051b0e974 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 28 Aug 2020 11:43:08 +1000 Subject: [PATCH 07/14] rename actionPanelBorder to sessionBorder --- stylesheets/_conversation.scss | 6 +++--- stylesheets/_quote.scss | 2 +- stylesheets/_session.scss | 10 +++++----- stylesheets/_session_group_panel.scss | 10 +++++----- stylesheets/_session_left_pane.scss | 4 ++-- stylesheets/_session_signin.scss | 4 ++-- stylesheets/themes.scss | 2 +- 7 files changed, 19 insertions(+), 19 deletions(-) diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index f4a7c0069..295d9328c 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -33,8 +33,8 @@ .main.panel { @include themify($themes) { - border-top: themed('borderActionPanel'); - border-left: themed('borderActionPanel'); + border-top: themed('sessionBorder'); + border-left: themed('sessionBorder'); } .discussion-container { @@ -365,7 +365,7 @@ box-sizing: content-box; $button-width: 36px; @include themify($themes) { - border-top: themed('borderActionPanel'); + border-top: themed('sessionBorder'); } form.send { diff --git a/stylesheets/_quote.scss b/stylesheets/_quote.scss index 7dd7aa323..92570e022 100644 --- a/stylesheets/_quote.scss +++ b/stylesheets/_quote.scss @@ -346,7 +346,7 @@ .bottom-bar .member-item { @include themify($themes) { - border-bottom: themed('borderActionPanel'); + border-bottom: themed('sessionBorder'); } &:hover { diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 7509d2444..37bf94829 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -586,7 +586,7 @@ label { @include themify($themes) { background-color: themed('modalBackground'); color: themed('textColor'); - border: themed('borderActionPanel'); + border: themed('sessionBorder'); box-shadow: themed('sessionShadow'); } overflow: hidden; @@ -868,12 +868,12 @@ label { &:first-child { @include themify($themes) { - border-top: themed('borderActionPanel'); + border-top: themed('sessionBorder'); } } &:last-child { @include themify($themes) { - border-top: themed('borderActionPanel'); + border-top: themed('sessionBorder'); } } @@ -1058,7 +1058,7 @@ label { @include themify($themes) { background: themed('cellBackground'); color: themed('textColor'); - border-bottom: themed('borderActionPanel'); + border-bottom: themed('sessionBorder'); } &.inline { display: flex; @@ -1331,7 +1331,7 @@ input { height: 64px; background-color: $session-shade-4; @include themify($themes) { - border: themed('borderActionPanel'); + border: themed('sessionBorder'); } display: flex; align-items: center; diff --git a/stylesheets/_session_group_panel.scss b/stylesheets/_session_group_panel.scss index e829cbc51..fcf8d7abf 100644 --- a/stylesheets/_session_group_panel.scss +++ b/stylesheets/_session_group_panel.scss @@ -12,7 +12,7 @@ flex-shrink: 0; @include themify($themes) { background: themed('leftpaneOverlayBackground'); - border-left: themed('borderActionPanel'); + border-left: themed('sessionBorder'); } align-items: center; @@ -44,7 +44,7 @@ @include themify($themes) { color: themed('textColor'); background: themed('cellBackground'); - border: themed('borderActionPanel'); + border: themed('sessionBorder'); } text-align: center; display: none; @@ -58,8 +58,8 @@ @include themify($themes) { color: themed('textColor'); background: themed('cellBackground'); - border-top: themed('borderActionPanel'); - border-bottom: themed('borderActionPanel'); + border-top: themed('sessionBorder'); + border-bottom: themed('sessionBorder'); } width: -webkit-fill-available; padding: 0 $session-margin-md; @@ -87,7 +87,7 @@ align-items: center; @include themify($themes) { border: none; - border-top: themed('borderActionPanel'); + border-top: themed('sessionBorder'); } } diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index 55920d4bb..b34d4070d 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -117,7 +117,7 @@ $session-compose-margin: 20px; display: inline-flex; flex-direction: column; @include themify($themes) { - border-right: themed('borderActionPanel'); + border-right: themed('sessionBorder'); } .module-avatar, @@ -404,7 +404,7 @@ $session-compose-margin: 20px; height: 51px; @include themify($themes) { - border: themed('borderActionPanel'); + border: themed('sessionBorder'); } } } diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss index d2f5cb353..e4d908a3f 100644 --- a/stylesheets/_session_signin.scss +++ b/stylesheets/_session_signin.scss @@ -127,7 +127,7 @@ background-color: transparent; text-align: center; @include themify($themes) { - border-bottom: themed('borderActionPanel'); + border-bottom: themed('sessionBorder'); color: themed('textColor'); } transition: border-color $session-transition-duration linear; @@ -225,7 +225,7 @@ hr { @include themify($themes) { - border: themed('borderActionPanel'); + border: themed('sessionBorder'); } width: 100%; position: absolute; diff --git a/stylesheets/themes.scss b/stylesheets/themes.scss index d388f5198..2828b4738 100644 --- a/stylesheets/themes.scss +++ b/stylesheets/themes.scss @@ -33,7 +33,7 @@ $themes: ( conversationItemHasUnread: #fcfcfc, conversationItemSelected: #f0f0f0, clickableHovered: #dfdfdf, - borderActionPanel: 1px solid #f1f1f1, + sessionBorder: 1px solid #f1f1f1, leftpaneOverlayBackground: #fff, // scrollbars scrollBarTrack: #fcfcfc, From 3e55545d1c9a821a7a49a7194add26a003e44bc2 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 28 Aug 2020 11:43:29 +1000 Subject: [PATCH 08/14] lint --- background.d.ts | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/background.d.ts b/background.d.ts index 78d1c6119..186854e5c 100644 --- a/background.d.ts +++ b/background.d.ts @@ -1,14 +1,14 @@ export interface ConfirmationDialogParams { - title?: string; - message: string; - messageSub?: string; - resolve?: any; - reject?: any; - okText?: string; - okTheme?: string; - closeTheme?: string; - cancelText?: string; - hideCancel?: boolean; - sessionIcon?: SessionIconType; - iconSize?: SessionIconSize; - } + title?: string; + message: string; + messageSub?: string; + resolve?: any; + reject?: any; + okText?: string; + okTheme?: string; + closeTheme?: string; + cancelText?: string; + hideCancel?: boolean; + sessionIcon?: SessionIconType; + iconSize?: SessionIconSize; +} From f305b27320bd2318b709f4c7614437c24ffbaa66 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 28 Aug 2020 11:43:38 +1000 Subject: [PATCH 09/14] add shadow light for dark theme --- stylesheets/themes.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/stylesheets/themes.scss b/stylesheets/themes.scss index 2828b4738..0634b30e3 100644 --- a/stylesheets/themes.scss +++ b/stylesheets/themes.scss @@ -76,13 +76,13 @@ $themes: ( sentMessageBackground: #3f4146, receivedMessageText: #fff, sentMessageText: #fff, - sessionShadow: 0 0 4px 0 rgba(#fff, 0.20), + sessionShadow: 0 0 4px 0 rgba(#fff, 0.2), // left pane conversationList: #1b1b1b, conversationItemHasUnread: #2c2c2c, conversationItemSelected: #404040, clickableHovered: #414347, - borderActionPanel: none, + sessionBorder: 1px solid #FFFFFF0F, leftpaneOverlayBackground: linear-gradient(180deg, #171717 0%, #121212 100%), // scrollbars scrollBarTrack: #1b1b1b, From c82d4e5f015071d6c401568be24a451417f77028 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 28 Aug 2020 13:21:07 +1000 Subject: [PATCH 10/14] lint --- stylesheets/themes.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stylesheets/themes.scss b/stylesheets/themes.scss index 0634b30e3..65194d751 100644 --- a/stylesheets/themes.scss +++ b/stylesheets/themes.scss @@ -82,7 +82,7 @@ $themes: ( conversationItemHasUnread: #2c2c2c, conversationItemSelected: #404040, clickableHovered: #414347, - sessionBorder: 1px solid #FFFFFF0F, + sessionBorder: 1px solid #ffffff0f, leftpaneOverlayBackground: linear-gradient(180deg, #171717 0%, #121212 100%), // scrollbars scrollBarTrack: #1b1b1b, From 495683ec3dfaad3e091c032cb0bffc0401f4d9f4 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 28 Aug 2020 15:28:06 +1000 Subject: [PATCH 11/14] fix theme input and cleanup --- stylesheets/_modal.scss | 11 +++-- stylesheets/_session.scss | 24 ++++++++--- stylesheets/_session_left_pane.scss | 11 +---- stylesheets/themes.scss | 63 ++++++++++++++++------------- 4 files changed, 61 insertions(+), 48 deletions(-) diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss index 945b65afa..a9814fbef 100644 --- a/stylesheets/_modal.scss +++ b/stylesheets/_modal.scss @@ -175,9 +175,11 @@ } input { - color: $color-dark-05; - background-color: $color-dark-70; - border-color: $color-dark-55; + @include themify($themes) { + background-color: themed('inputBackground'); + color: themed('textColor'); + border: themed('sessionBorder'); + } } } @@ -266,7 +268,7 @@ justify-content: center; margin-top: $session-margin-lg; - &-input { + input { height: 38px; width: 142px; border-radius: 5px; @@ -275,6 +277,7 @@ @include themify($themes) { background: themed('inputBackground'); color: themed('textColor'); + border: themed('sessionBorder'); } } diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 37bf94829..53d5a64e5 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -1404,8 +1404,9 @@ input { width: 100%; max-height: 400px; overflow-y: auto; - box-shadow: inset 0px 14px 7px -15px $session-color-dark-grey, - inset 0px -14px 7px -15px $session-color-dark-grey; + @include themify($themes) { + border: themed('sessionBorder'); + } } &__selection { @@ -1416,6 +1417,9 @@ input { &__no-contacts { font-family: $session-font-mono; + @include themify($themes) { + background: themed('cellBackground'); + } text-align: center; padding: 20px; } @@ -1454,12 +1458,20 @@ input { display: flex; justify-content: space-between; transition: $session-transition-duration; + @include themify($themes) { + background: themed('cellBackground'); + } - &:first-child { - border-top: 1px solid rgba($session-shade-8, 0.6); + &:not(:last-child) { + @include themify($themes) { + border-bottom: themed('sessionBorder'); + } } - &:last-child { - border-bottom: 1px solid rgba($session-shade-8, 0.6); + + &:hover { + @include themify($themes) { + background-color: themed('clickableHovered'); + } } &.selected { diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index b34d4070d..c0ec2a9ad 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -95,7 +95,7 @@ $session-compose-margin: 20px; font-size: 15px; @include themify($themes) { - color: themed('textColorSubtle'); + color: subtle(themed('textColorSubtle')); } } } @@ -179,15 +179,6 @@ $session-compose-margin: 20px; } } - &-compose { - @at-root .light-theme #{&} { - background: $session-color-white; - } - @at-root .dark-theme #{&} { - @include session-dark-background-lighter; - } - } - &-overlay { @include themify($themes) { background: themed('leftpaneOverlayBackground'); diff --git a/stylesheets/themes.scss b/stylesheets/themes.scss index 65194d751..64017b7bc 100644 --- a/stylesheets/themes.scss +++ b/stylesheets/themes.scss @@ -1,46 +1,53 @@ // 13592 lines for manifest.css on date 25 august +$white: #ffffff; +$black: #000000; +$destructive: #ff453a; +$accentLightTheme: #00e97b; +$accentDarkTheme: #00f782; + + $themes: ( light: ( - accent: #00e97b, - accentButton: #000, - destructive: #ff453a, + accent: $accentLightTheme, + accentButton: $black, + destructive: $destructive, cellBackground: #fcfcfc, modalBackground: #fcfcfc, fakeChatBubbleBackground: #f5f5f5, // input - inputBackground: #8e8e931f, + inputBackground: rgba(#8e8e93, 0.12), // text - textColor: #000, + textColor: $black, textColorSubtle: #a0a0a0, - textColorOpposite: #fff, + textColorOpposite: $white, // inbox - inboxBackground: #fff, + inboxBackground: $white, // buttons backgroundPrimary: #272726, - foregroundPrimary: #fff, + foregroundPrimary: $white, buttonGreen: #272726, // conversation view composeViewBackground: #fcfcfc, composeViewTextFieldBackground: #ededed, receivedMessageBackground: #f5f5f5, - sentMessageBackground: #00e97b, - receivedMessageText: #000, - sentMessageText: #000, - sessionShadow: 0 0 4px 0 rgba(#000, 0.37), + sentMessageBackground: $accentLightTheme, + receivedMessageText: $black, + sentMessageText: $black, + sessionShadow: 0 0 4px 0 rgba($black, 0.37), // left pane - conversationList: #fff, + conversationList: $white, conversationItemHasUnread: #fcfcfc, conversationItemSelected: #f0f0f0, clickableHovered: #dfdfdf, sessionBorder: 1px solid #f1f1f1, - leftpaneOverlayBackground: #fff, + leftpaneOverlayBackground: $white, // scrollbars scrollBarTrack: #fcfcfc, scrollBarThumb: #474646, // pill divider: - pillDividerColor: #0000001a, - pillDividerTextColor: #555, + pillDividerColor: rgba($black, 0.10), + pillDividerTextColor: #555555, // context menu contextMenuBackground: #f5f5f5, filterSessionText: brightness(0) saturate(100%), @@ -51,38 +58,38 @@ $themes: ( quoteBottomBarBackground: #f0f0f0, ), dark: ( - accent: #00f782, - accentButton: #00f782, - destructive: #ff453a, + accent: $accentDarkTheme, + accentButton: $accentDarkTheme, + destructive: $destructive, cellBackground: #1b1b1b, modalBackground: #101011, fakeChatBubbleBackground: #212121, // input - inputBackground: #8e8e931f, + inputBackground: rgba(#8e8e93, 0.12), // text - textColor: #fff, + textColor: $white, textColorSubtle: #a0a0a0, - textColorOpposite: #000, + textColorOpposite: $black, // inbox inboxBackground: linear-gradient(180deg, #171717 0%, #121212 100%), // buttons backgroundPrimary: #474646, - foregroundPrimary: #fff, - buttonGreen: #00f782, + foregroundPrimary: $white, + buttonGreen: $accentDarkTheme, // conversation view composeViewBackground: #1b1b1b, composeViewTextFieldBackground: #141414, receivedMessageBackground: #222325, sentMessageBackground: #3f4146, - receivedMessageText: #fff, - sentMessageText: #fff, - sessionShadow: 0 0 4px 0 rgba(#fff, 0.2), + receivedMessageText: $white, + sentMessageText: $white, + sessionShadow: 0 0 4px 0 rgba($white, 0.2), // left pane conversationList: #1b1b1b, conversationItemHasUnread: #2c2c2c, conversationItemSelected: #404040, clickableHovered: #414347, - sessionBorder: 1px solid #ffffff0f, + sessionBorder: 1px solid rgba($white, 0.06), leftpaneOverlayBackground: linear-gradient(180deg, #171717 0%, #121212 100%), // scrollbars scrollBarTrack: #1b1b1b, From 055234ef5377d23cae9fba3f66a4c7806c58fe34 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 28 Aug 2020 16:00:30 +1000 Subject: [PATCH 12/14] add animation for highlighted messages --- stylesheets/_mentions.scss | 4 ---- stylesheets/_mixins.scss | 7 +++++++ stylesheets/_session_theme.scss | 9 +-------- stylesheets/_theme_dark.scss | 2 -- stylesheets/themes.scss | 2 ++ 5 files changed, 10 insertions(+), 14 deletions(-) diff --git a/stylesheets/_mentions.scss b/stylesheets/_mentions.scss index 30d237de6..8152672b2 100644 --- a/stylesheets/_mentions.scss +++ b/stylesheets/_mentions.scss @@ -85,10 +85,6 @@ color: black; } -.message-highlighted { - border-radius: $message-container-border-radius; - background-color: rgba(255, 197, 50, 0.2); -} .module-conversation-list-item--mentioned-us { border-left: 4px solid $session-color-green !important; diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss index f47a758e0..594c3f14b 100644 --- a/stylesheets/_mixins.scss +++ b/stylesheets/_mixins.scss @@ -28,3 +28,10 @@ @include color-svg($svg, black); } } + +@keyframes highlightedMessageAnimation { + 25% { background-color: #00f782; } + 50% { background-color: #00000000; } + 75% { background-color: #00f782; } +} + diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index 0e5bfa384..293bffb47 100644 --- a/stylesheets/_session_theme.scss +++ b/stylesheets/_session_theme.scss @@ -87,14 +87,7 @@ .message { &-highlighted { - border-radius: 0; - - @at-root .light-theme #{&} { - background-color: $session-shade-5; - } - @at-root .dark-theme #{&} { - background-color: $session-color-white; - } + animation: highlightedMessageAnimation 3s ease-in-out; } &-selected { diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index 96c64ea15..9d3406dfa 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -906,8 +906,6 @@ color: $color-white; } - // Module: Highlighted Message Body - // Module: Search Results .module-search-results__conversations-header { diff --git a/stylesheets/themes.scss b/stylesheets/themes.scss index 64017b7bc..563a6f9a2 100644 --- a/stylesheets/themes.scss +++ b/stylesheets/themes.scss @@ -7,6 +7,8 @@ $accentLightTheme: #00e97b; $accentDarkTheme: #00f782; + + $themes: ( light: ( accent: $accentLightTheme, From 89acda2d2f1742732700801bac08fbf07e1b8410 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 28 Aug 2020 16:25:27 +1000 Subject: [PATCH 13/14] fix animation highlited message to match android --- stylesheets/_mentions.scss | 1 - stylesheets/_mixins.scss | 7 +++--- stylesheets/_session_left_pane.scss | 35 ++++++++++++++++------------- stylesheets/_session_theme.scss | 2 +- stylesheets/themes.scss | 7 ++---- 5 files changed, 25 insertions(+), 27 deletions(-) diff --git a/stylesheets/_mentions.scss b/stylesheets/_mentions.scss index 8152672b2..203f83c2d 100644 --- a/stylesheets/_mentions.scss +++ b/stylesheets/_mentions.scss @@ -85,7 +85,6 @@ color: black; } - .module-conversation-list-item--mentioned-us { border-left: 4px solid $session-color-green !important; } diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss index 594c3f14b..9a7e9b664 100644 --- a/stylesheets/_mixins.scss +++ b/stylesheets/_mixins.scss @@ -30,8 +30,7 @@ } @keyframes highlightedMessageAnimation { - 25% { background-color: #00f782; } - 50% { background-color: #00000000; } - 75% { background-color: #00f782; } + 1% { + background-color: #00f782; + } } - diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index c0ec2a9ad..d8ffe4995 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -410,27 +410,30 @@ $session-compose-margin: 20px; padding: 8px 20px; margin: 0px $session-compose-margin; - @at-root .light-theme #{&} { - background: $session-shade-15; - color: $session-color-black; - } - @at-root .dark-theme #{&} { - background: $session-shade-4; - color: $session-color-light-grey; - } + // FIXME themify once this component is enabled back + // @at-root .light-theme #{&} { + // background: $session-shade-15; + // color: $session-color-black; + // } + // @at-root .dark-theme #{&} { + // background: $session-shade-4; + // color: $session-color-light-grey; + // } &-selected, &:hover { font-weight: bold; - @at-root .light-theme #{&} { - color: $session-color-black; - background: $session-color-white; - } - @at-root .dark-theme #{&} { - color: $session-color-white; - background: $session-shade-8; - } + // FIXME themify once this component is enabled back + + // @at-root .light-theme #{&} { + // color: $session-color-black; + // background: $session-color-white; + // } + // @at-root .dark-theme #{&} { + // color: $session-color-white; + // background: $session-shade-8; + // } } } } diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index 293bffb47..e377b889a 100644 --- a/stylesheets/_session_theme.scss +++ b/stylesheets/_session_theme.scss @@ -87,7 +87,7 @@ .message { &-highlighted { - animation: highlightedMessageAnimation 3s ease-in-out; + animation: highlightedMessageAnimation 1s ease-in-out; } &-selected { diff --git a/stylesheets/themes.scss b/stylesheets/themes.scss index 563a6f9a2..ca7c5ebae 100644 --- a/stylesheets/themes.scss +++ b/stylesheets/themes.scss @@ -6,9 +6,6 @@ $destructive: #ff453a; $accentLightTheme: #00e97b; $accentDarkTheme: #00f782; - - - $themes: ( light: ( accent: $accentLightTheme, @@ -48,7 +45,7 @@ $themes: ( scrollBarTrack: #fcfcfc, scrollBarThumb: #474646, // pill divider: - pillDividerColor: rgba($black, 0.10), + pillDividerColor: rgba($black, 0.1), pillDividerTextColor: #555555, // context menu contextMenuBackground: #f5f5f5, @@ -67,7 +64,7 @@ $themes: ( modalBackground: #101011, fakeChatBubbleBackground: #212121, // input - inputBackground: rgba(#8e8e93, 0.12), + inputBackground: rgba(#8e8e93, 0.12), // text textColor: $white, textColorSubtle: #a0a0a0, From 5909b7c807457c90467daafa3856f5d9d679f753 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Mon, 31 Aug 2020 09:46:03 +1000 Subject: [PATCH 14/14] cleanup scss --- stylesheets/_modules.scss | 1 - stylesheets/_session_left_pane.scss | 34 ++++++++++++----------------- 2 files changed, 14 insertions(+), 21 deletions(-) diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 41800ed43..b2dea00f9 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -428,7 +428,6 @@ } .module-conversation__user, .module-message__author { - color: $color-white; font-size: 13px; font-weight: 300; line-height: 18px; diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index d8ffe4995..1a42ef838 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -11,6 +11,19 @@ $session-compose-margin: 20px; } .module-conversation { + // default conversation list item text color + &__user__profile { + &-number, + &-name { + @include fontAccentBold(); + font-size: 15px; + + @include themify($themes) { + color: themed('textColorSubtle'); + } + } + } + &-list-item { transition: $session-transition-duration; @@ -44,7 +57,7 @@ $session-compose-margin: 20px; &__unread-count { @include themify($themes) { color: themed('textColor'); - background-color: themed('clickableHovered'); + background: themed('clickableHovered'); } position: static !important; @@ -71,13 +84,6 @@ $session-compose-margin: 20px; &__header__name { flex-grow: 0 !important; padding-right: 5px !important; - - @at-root .light-theme #{&} { - color: $session-color-black; - } - @at-root .dark-theme #{&} { - color: $session-shade-17; - } } &__header__name--with-unread .module-conversation__user__profile-number, @@ -87,18 +93,6 @@ $session-compose-margin: 20px; } } } - - &__user__profile { - &-number, - &-name { - @include fontAccentBold(); - font-size: 15px; - - @include themify($themes) { - color: subtle(themed('textColorSubtle')); - } - } - } } .module-left-pane {