From bd7d88e170497da1f7bfc929468b3c6fcac0739e Mon Sep 17 00:00:00 2001 From: audric Date: Wed, 1 Sep 2021 14:29:04 +1000 Subject: [PATCH] remove theme from css and used variables instead --- js/background.js | 4 - js/debug_log_start.js | 1 - js/expiring_messages.js | 2 +- js/views/app_view.js | 8 - stylesheets/_avatar.scss | 3 + stylesheets/_conversation.scss | 87 +----- stylesheets/_global.scss | 13 +- stylesheets/_index.scss | 1 + stylesheets/_mentions.scss | 12 +- stylesheets/_modal.scss | 25 +- stylesheets/_modules.scss | 77 ++---- stylesheets/_quote.scss | 34 +-- stylesheets/_session.scss | 251 ++++++------------ stylesheets/_session_conversation.scss | 58 ++-- stylesheets/_session_group_panel.scss | 45 ++-- stylesheets/_session_left_pane.scss | 135 +++------- stylesheets/_session_signin.scss | 92 +++---- stylesheets/_session_slider.scss | 10 +- stylesheets/_session_theme.scss | 70 ++--- stylesheets/manifest.scss | 1 - stylesheets/themes.scss | 139 ---------- ts/components/conversation/Message.tsx | 84 +----- .../message/GenericReadableMessage.tsx | 84 +++++- .../message/MessageContentWithStatus.tsx | 9 +- .../dialog/SessionNicknameDialog.tsx | 8 +- .../dialog/SessionPasswordDialog.tsx | 2 +- ts/components/dialog/SessionSeedModal.tsx | 12 +- ts/components/dialog/UserDetailsDialog.tsx | 20 +- ts/components/session/ActionsPanel.tsx | 12 +- .../session/LeftPaneSectionHeader.tsx | 15 +- .../conversation/SessionCompositionBox.tsx | 8 +- .../session/menu/ConversationHeaderMenu.tsx | 4 +- ts/components/session/menu/Menu.tsx | 22 +- ts/models/message.ts | 3 + ts/state/ducks/SessionTheme.tsx | 194 ++++++++++++-- ts/state/selectors/conversations.ts | 3 + 36 files changed, 604 insertions(+), 944 deletions(-) delete mode 100644 stylesheets/themes.scss diff --git a/js/background.js b/js/background.js index 29770e5a8..3eb7fc600 100644 --- a/js/background.js +++ b/js/background.js @@ -311,10 +311,6 @@ } window.setTheme = newTheme => { - $(document.body) - .removeClass('dark-theme') - .removeClass('light-theme') - .addClass(`${newTheme}-theme`); window.Events.setThemeSetting(newTheme); }; diff --git a/js/debug_log_start.js b/js/debug_log_start.js index 1a80b67cf..0c55b6415 100644 --- a/js/debug_log_start.js +++ b/js/debug_log_start.js @@ -10,7 +10,6 @@ $(document).on('keyup', e => { }); const $body = $(document.body); -$body.addClass(`${window.theme}-theme`); // got.js appears to need this to successfully submit debug logs to the cloud window.setImmediate = window.nodeSetImmediate; diff --git a/js/expiring_messages.js b/js/expiring_messages.js index 2327f60ec..7fe327d64 100644 --- a/js/expiring_messages.js +++ b/js/expiring_messages.js @@ -56,7 +56,6 @@ async function checkExpiringMessages() { // Look up the next expiring message and set a timer to destroy it const messages = await window.Signal.Data.getNextExpiringMessage(); - const next = messages.at(0); if (!next) { return; @@ -65,6 +64,7 @@ const expiresAt = next.get('expires_at'); Whisper.ExpiringMessagesListener.nextExpiration = expiresAt; window.log.info('next message expires', new Date(expiresAt).toISOString()); + window.log.info('next message expires in ', (expiresAt - Date.now()) / 1000); let wait = expiresAt - Date.now(); diff --git a/js/views/app_view.js b/js/views/app_view.js index 126e920e9..f9e22b20f 100644 --- a/js/views/app_view.js +++ b/js/views/app_view.js @@ -12,7 +12,6 @@ initialize() { this.inboxView = null; - this.applyTheme(); this.applyRtl(); this.applyHideMenu(); }, @@ -27,13 +26,6 @@ this.$el.addClass('rtl'); } }, - applyTheme() { - const theme = storage.get('theme-setting') || 'light'; - this.$el - .removeClass('light-theme') - .removeClass('dark-theme') - .addClass(`${theme}-theme`); - }, applyHideMenu() { const hideMenuBar = storage.get('hide-menu-bar', true); window.setAutoHideMenuBar(hideMenuBar); diff --git a/stylesheets/_avatar.scss b/stylesheets/_avatar.scss index f9b48aa91..04a2f9978 100644 --- a/stylesheets/_avatar.scss +++ b/stylesheets/_avatar.scss @@ -1,4 +1,7 @@ // Module: Avatar +$borderAvatarColor: unquote( + '#00000059' +); // search for references on ts TODO: make this exposed on ts .module-avatar { position: relative; diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index 2a8c20303..ce6881a59 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -5,41 +5,6 @@ z-index: 2; } -.message-container { - list-style: none; - - li { - margin-bottom: 2px; - - &::after { - visibility: hidden; - display: block; - font-size: 0; - content: ' '; - clear: both; - height: 0; - } - } -} - -.module-message__check-box { - color: rgb(97, 97, 97); - font-size: 20px; - padding: 4px; - user-select: none; - display: inline; -} - -.check-box-container { - align-items: center; - flex-direction: row; - display: inline-flex; -} - -.check-box-selected { - opacity: 1; -} - .public-chat-message-wrapper { padding-inline-start: 10px; padding-inline-end: 10px; @@ -51,14 +16,13 @@ } .group-invitation { - @include themify($themes) { - background: themed('receivedMessageBackground'); - } + background: var(--color-received-message-background); + &.invitation-outgoing { - @include themify($themes) { - background: themed('sentMessageBackground'); - } + background: var(--color-sent-message-background); + align-self: flex-end; } + display: inline-block; margin: 4px 16px; padding: 4px; @@ -91,56 +55,27 @@ flex-direction: column; padding: 0px 12px; - + color: var(--color-text-opposite); .group-name { font-weight: bold; font-size: 18px; } .group-address { - color: grey; + color: var(--color-text); } } .session-icon-button { - @include themify($themes) { - background-color: themed('accent'); - box-shadow: none; - } + background-color: var(--color-accent); + box-shadow: none; + filter: brightness(1.05); svg path { transition: $session-transition-duration; opacity: 0.6; - @include themify($themes) { - fill: themed('textColorOpposite'); - } + fill: var(--color-text-opposite); } } } } - -.dark-theme { - .group-invitation { - background-color: #242424; - border-color: #303030; - box-shadow: none; - - .title { - color: lightgrey; - } - } -} - -.invitation-outgoing { - align-self: flex-end; -} - -.typing-bubble-wrapper { - margin-bottom: 20px; -} - -.contact-detail-pane { - overflow-y: scroll; - padding-top: 40px; - padding-bottom: 40px; -} diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index c92b3d80b..12eb31a0f 100644 --- a/stylesheets/_global.scss +++ b/stylesheets/_global.scss @@ -1,5 +1,3 @@ -@import 'themes.scss'; - * { box-sizing: border-box; } @@ -24,18 +22,15 @@ body { } ::-webkit-scrollbar-thumb { - @include themify($themes) { - background: themed('scrollBarThumb'); - border: solid 2px themed('textColorOpposite'); - } + background: var(--color-scroll-bar-thumb); + border: solid 2px var(--color-text-opposite); + &:hover { background: $color-light-45; } } ::-webkit-scrollbar-track { - @include themify($themes) { - background: themed('scrollBarTrack'); - } + background: var(--color-scroll-bar-track); } audio { diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss index 09094cb46..bb7f60668 100644 --- a/stylesheets/_index.scss +++ b/stylesheets/_index.scss @@ -5,6 +5,7 @@ .inbox.index { display: flex; + background-color: var(--color-inbox-background); } .edit-profile-dialog, diff --git a/stylesheets/_mentions.scss b/stylesheets/_mentions.scss index 8a8874b33..7eb0d2c30 100644 --- a/stylesheets/_mentions.scss +++ b/stylesheets/_mentions.scss @@ -38,10 +38,9 @@ } .member-item { - @include themify($themes) { - background-color: themed('cellBackground'); - color: themed('textColor'); - } + background-color: var(--color-cell-background); + color: var(--color-text); + padding: 4px; white-space: nowrap; @@ -77,9 +76,8 @@ } .at-symbol { - @include themify($themes) { - background-color: themed('accent'); - } + background-color: var(--color-accent); + color: $color-black; text-align: center; margin-top: 0px; diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss index 22b7b2d54..6d15be954 100644 --- a/stylesheets/_modal.scss +++ b/stylesheets/_modal.scss @@ -187,11 +187,9 @@ } input { - @include themify($themes) { - background-color: themed('inputBackground'); - color: themed('textColor'); - border: themed('sessionBorder'); - } + background-color: var(--color-input-background); + color: var(--color-text); + border: var(--border-session); } } @@ -218,9 +216,7 @@ position: relative; .module-avatar { - @include themify($themes) { - box-shadow: 0px 0px 13px 0.5px themed('sessionShadowColor'); - } + box-shadow: 0px 0px 13px 0.5px var(--color-session-shadow); } .qr-view-button { @@ -264,9 +260,8 @@ padding: 0px $session-margin-lg; font-family: $session-font-default; font-weight: 100; - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); + font-size: $session-font-md; padding: 0px $session-margin-sm; } @@ -286,11 +281,9 @@ border-radius: 5px; text-align: center; font-size: $session-font-md; - @include themify($themes) { - background: themed('inputBackground'); - color: themed('textColor'); - border: themed('sessionBorder'); - } + background: var(--color-input-background); + color: var(--color-text); + border: var(--border-session); } &-uneditable { diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 677e429ab..e204e01fa 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -41,28 +41,6 @@ // Module: Message -.module-message--expired { - animation: module-message__shake 0.2s linear infinite; -} - -@keyframes module-message__shake { - 0% { - transform: translateX(0px); - } - 25% { - transform: translateX(-5px); - } - 50% { - transform: translateX(0px); - } - 75% { - transform: translateX(5px); - } - 100% { - transform: translateX(0px); - } -} - .module-message__error-container { width: 28px; position: relative; @@ -184,9 +162,7 @@ .module-message__generic-attachment__file-size--incoming, .module-message__generic-attachment__file-size--outgoing, .module-message__generic-attachment__file-name--incoming { - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); } .module-message__generic-attachment__file-size { @@ -386,10 +362,9 @@ .module-group-notification__change, .module-timer-notification__message { - @include themify($themes) { - background: themed('fakeChatBubbleBackground'); - color: themed('textColor'); - } + background: var(--color-fake-chat-bubble-background); + color: var(--color-text); + width: 90%; max-width: 700px; margin: 10px auto; @@ -558,9 +533,7 @@ font-size: 16px; line-height: 24px; font-weight: 300; - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); // width of avatar (28px) and our 6px left margin max-width: calc(100% - 34px); @@ -634,9 +607,7 @@ } .module-message-detail__unix-timestamp { - @include themify($themes) { - color: subtle(themed('textColor')); - } + color: subtle(var(--color-text)); } .module-message-detail__delete-button-container { @@ -889,9 +860,7 @@ } &--is-blocked { - @include themify($themes) { - border-left: 4px solid themed('destructive') !important; - } + border-left: 4px solid var(--color-destructive) !important; } } @@ -961,7 +930,6 @@ display: flex; flex-direction: row; align-items: center; - margin-top: 5px; } .module-conversation-list-item__message__text { @@ -977,6 +945,9 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + .text-selectable { + user-select: none; + } } .module-conversation-list-item__message__text--has-unread { @@ -1437,19 +1408,18 @@ display: flex; input::placeholder { - color: rgba($black, 0.6); + color: rgba(black, 0.6); } .session-input-with-label-container { - @include themify($themes) { - background-color: #fcfcfc; - color: $black; - } + background-color: #fcfcfc; + color: black; + width: 30vw; border-radius: 100px; #session-input-floating-label { padding: $session-margin-sm; - color: $black; + color: black; } label.session-input-with-label-container.filled { @@ -1524,9 +1494,8 @@ align-items: center; } .module-staged-link-preview__loading { - @include themify($themes) { - color: themed('sentMessageText'); - } + color: var(--color-sent-message-text); + font-size: 14px; text-align: center; flex-grow: 1; @@ -1597,9 +1566,7 @@ top: 0; left: 0; - @include themify($themes) { - @include color-svg('../images/spinner-56.svg', themed('textColor')); - } + @include color-svg('../images/spinner-56.svg', var(--color-text)); z-index: 3; height: 56px; @@ -1658,15 +1625,11 @@ } .module-spinner__circle--incoming { - @include themify($themes) { - background-color: rgba(themed('receivedMessageText'), 0.2); - } + background-color: rgba(var(--color-received-message-text), 0.2); } .module-spinner__circle--outgoing { - @include themify($themes) { - background-color: rgba(themed('sentMessageText'), 0.2); - } + background-color: rgba(var(--color-sent-message-text), 0.2); } // Module: Highlighted Message Body diff --git a/stylesheets/_quote.scss b/stylesheets/_quote.scss index d693c87c7..369d76568 100644 --- a/stylesheets/_quote.scss +++ b/stylesheets/_quote.scss @@ -11,9 +11,7 @@ border-left-style: solid; &__primary__type-label { - @include themify($themes) { - border-color: themed('textColor'); - } + border-color: var(--color-text); } } @@ -21,38 +19,28 @@ .module-quote { &--outgoing { .module-quote__primary__author { - @include themify($themes) { - color: themed('sentMessageText'); - font-weight: bold; - } + color: var(--color-sent-message-text); + font-weight: bold; } .module-quote__primary__text { - @include themify($themes) { - color: themed('sentMessageText'); - } + color: var(--color-sent-message-text); + a { - @include themify($themes) { - color: themed('sentMessageText'); - } + color: var(--color-sent-message-text); } } } &--incoming { .module-quote__primary__author { - @include themify($themes) { - color: themed('receivedMessageText'); - font-weight: bold; - } + color: var(--color-received-message-text); + font-weight: bold; } .module-quote__primary__text { - @include themify($themes) { - color: themed('receivedMessageText'); - } + color: var(--color-received-message-text); + a { - @include themify($themes) { - color: themed('receivedMessageText'); - } + color: var(--color-received-message-text); } } } diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 6d37c96ff..eae3f43e0 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -1,3 +1,5 @@ +$onionPathLineColor: rgba(#7a7a7a, 0.6); + .subtle { opacity: $session-subtle-factor; } @@ -24,9 +26,7 @@ input, textarea { - @include themify($themes) { - caret-color: themed('textColor') !important; - } + caret-color: var(--color-text) !important; } * { @@ -38,9 +38,7 @@ textarea { user-select: text; &::selection { - @include themify($themes) { - background: themed('textHighlight'); - } + background: var(--color-text-highlight); } } } @@ -98,14 +96,10 @@ textarea { &.default, &.square, &.brand { - @include themify($themes) { - color: themed('foregroundPrimary'); - } + color: var(--color-foreground-primary); &:not(.disabled):hover { - @include themify($themes) { - background: themed('clickableHovered'); - } + background: var(--color-clickable-hovered); } &.green, @@ -121,25 +115,19 @@ textarea { } &.green { - @include themify($themes) { - background-color: themed('accentButton'); - } + background-color: var(--color-accent-button); + color: var(--color-text-opposite); } &.white { - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); } &.primary { - @include themify($themes) { - background-color: themed('backgroundPrimary'); - } + background-color: var(--color-background-primary); + color: white; .session-icon { - @include themify($themes) { - fill: themed('foregroundPrimary'); - } + fill: var(--color-foreground-primary); } } &.secondary { @@ -165,12 +153,10 @@ textarea { border: none; &.green { - @include themify($themes) { - @include transparent-background(themed('buttonGreen')); - } + @include transparent-background(var(--color-button-green)); } &.white { - @include transparent-background($session-color-white); + @include transparent-background(var(--color-text)); } &.primary { @include transparent-background($session-color-primary); @@ -210,10 +196,8 @@ textarea { border-radius: 500px; &:not(.disabled):hover { - @include themify($themes) { - color: themed('textColor'); - border-color: themed('textColor'); - } + color: var(--color-text); + border-color: var(--color-text); } } @@ -292,9 +276,7 @@ textarea { font-size: $session-font-md; &-text { - @include themify($themes) { - @include session-color-subtle(themed('textColor')); - } + @include session-color-subtle(var(--color-text)); font-family: $session-font-default; font-weight: 300; @@ -389,12 +371,6 @@ label { position: relative; } -.module-left-pane-overlay { - h3 { - margin-bottom: 6px; - } -} - .hidden { display: none; visibility: hidden; @@ -405,14 +381,11 @@ label { } .Toastify__toast { - @include themify($themes) { - background: rgba(themed('cellBackground'), 0.99); - color: themed('textColor'); - } + background: var(--color-cell-background); + color: var(--color-text); + .Toastify__close-button { - @include themify($themes) { - color: subtle(themed('textColor')); - } + color: subtle(var(--color-text)); } @mixin set-toast-theme($color) { border-left: 4px solid $color; @@ -431,9 +404,7 @@ label { } .Toastify__progress-bar { - @include themify($themes) { - background-color: rgba(themed('textColor'), 0.1); - } + background-color: rgba(var(--color-text), 0.1); } } @@ -445,12 +416,11 @@ label { max-height: 70vh; max-width: calc(min(70vw, 800px)); font-family: $session-font-default; - @include themify($themes) { - background-color: themed('modalBackground'); - color: themed('textColor'); - border: themed('sessionBorder'); - box-shadow: themed('sessionShadow'); - } + background-color: var(--color-modal-background); + color: var(--color-text); + border: var(--border-session); + box-shadow: var(--color-session-shadow); + overflow: hidden; display: flex; flex-direction: column; @@ -542,6 +512,10 @@ label { &__center { display: flex; justify-content: center; + + .session-button { + margin: $session-margin-xs; + } } } @@ -630,27 +604,20 @@ label { z-index: 30; min-width: 200px; box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important; - @include themify($themes) { - background: themed('cellBackground'); - } + background: var(--color-cell-background); + .react-contexify__item { - @include themify($themes) { - background: themed('cellBackground'); - } + background: var(--color-cell-background); } .react-contexify__item:not(.react-contexify__item--disabled):hover > .react-contexify__item__content { - @include themify($themes) { - background: themed('accent'); - color: themed('textColorOpposite'); - } + background: var(--color-accent); + color: var(--color-text-opposite); } .react-contexify__item__content { transition: $session-transition-duration; - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); } &.react-contexify__submenu { @@ -675,15 +642,11 @@ label { padding: 0px $session-margin-md; font-size: $session-font-sm; - @include themify($themes) { - color: themed('textColor'); - background: themed('cellBackground'); - } + color: var(--color-text); + background: var(--color-cell-background); &:hover { - @include themify($themes) { - background: themed('clickableHovered'); - } + background: var(--color-clickable-hovered); } } @@ -708,29 +671,22 @@ label { justify-content: center; height: 35px; padding: 0 $session-margin-md; - @include themify($themes) { - background: themed('cellBackground'); - color: themed('textColor'); - } + background: var(--color-cell-background); + color: var(--color-text); + font-size: 0.8rem; width: -webkit-fill-available; transition: $session-transition-duration; &:first-child { - @include themify($themes) { - border-top: themed('sessionBorder'); - } + border-top: var(--border-session); } &:last-child { - @include themify($themes) { - border-top: themed('sessionBorder'); - } + border-top: var(--border-session); } &:hover { - @include themify($themes) { - background: themed('clickableHovered'); - } + background: var(--color-clickable-hovered); } .session-icon { @@ -742,9 +698,7 @@ label { &.active, &:hover { - @include themify($themes) { - background: themed('clickableHovered'); - } + background: var(--color-clickable-hovered); } &.danger { @@ -753,9 +707,8 @@ label { } &:hover { - @include themify($themes) { - background: themed('clickableHovered'); - } + background: var(--color-clickable-hovered); + .session-icon { opacity: 1; } @@ -883,9 +836,8 @@ label { justify-content: center; align-items: center; height: $main-view-header-height; - @include themify($themes) { - background: themed('cellBackground'); - } + background: var(--color-cell-background); + &-title { line-height: $main-view-header-height; font-weight: bold; @@ -905,11 +857,10 @@ label { padding: $session-margin-lg; margin-bottom: 20px; - @include themify($themes) { - background: themed('cellBackground'); - color: themed('textColor'); - border-bottom: themed('sessionBorder'); - } + background: var(--color-cell-background); + color: var(--color-text); + border-bottom: var(--border-session); + &.inline { display: flex; align-items: center; @@ -931,16 +882,12 @@ label { font-size: $session-font-sm; font-weight: 100; max-width: 700px; - @include themify($themes) { - @include session-color-subtle(themed('textColor')); - } + @include session-color-subtle(var(--color-text)); } &__content { label { - @include themify($themes) { - @include session-color-subtle(themed('textColor')); - } + @include session-color-subtle(var(--color-text)); } } &__selection { @@ -991,10 +938,9 @@ label { max-width: 90%; width: 600px; - @include themify($themes) { - background: themed('composeViewBackground'); - color: themed('textColor'); - } + background: var(--color-cell-background); + color: var(--color-text); + border: 1px solid $session-shade-8; border-radius: 5px; @@ -1005,10 +951,9 @@ label { input { width: 100%; - @include themify($themes) { - background: themed('inputBackground'); - color: themed('textColor'); - } + background: var(--color-input-background); + color: var(--color-text); + padding: $session-margin-xs $session-margin-md; margin-bottom: $session-margin-lg; outline: none; @@ -1070,24 +1015,19 @@ label { vertical-align: 0px; border: 2px solid rgba($session-color-white, 0.6); padding: 0.2em; - @include themify($themes) { - background: none; - border-color: themed('accent'); - } + background: none; + border-color: var(--color-accent); + background-clip: content-box; transition: $session-transition-duration; } input:hover + label:before { - @include themify($themes) { - background: themed('accent'); - } + background: var(--color-accent); } input:checked + label:before { - @include themify($themes) { - background: themed('accent'); - } + background: var(--color-accent); } } @@ -1122,9 +1062,8 @@ input { .dark-theme .invite-friends-dialog .member-item { height: 64px; background-color: $session-shade-4; - @include themify($themes) { - border: themed('sessionBorder'); - } + border: var(--border-session); + display: flex; align-items: center; transition: $session-transition-duration; @@ -1232,16 +1171,13 @@ input { width: 40px; border-radius: 50%; opacity: 1; - @include themify($themes) { - background-color: themed('cellBackground'); - box-shadow: themed('sessionShadow'); - } + background-color: var(--color-cell-background); + box-shadow: var(--color-session-shadow); + svg path { transition: $session-transition-duration; opacity: 0.6; - @include themify($themes) { - fill: themed('textColor'); - } + fill: var(--color-text); } &:hover svg path { @@ -1256,9 +1192,7 @@ input { width: 100%; max-height: 400px; overflow-y: auto; - @include themify($themes) { - border: themed('sessionBorder'); - } + border: var(--border-session); } &__selection { @@ -1269,9 +1203,8 @@ input { &__no-contacts { font-family: $session-font-mono; - @include themify($themes) { - background: themed('cellBackground'); - } + background: var(--color-cell-background); + text-align: center; padding: 20px; } @@ -1303,26 +1236,18 @@ input { display: flex; justify-content: space-between; transition: $session-transition-duration; - @include themify($themes) { - background: themed('cellBackground'); - } + background: var(--color-cell-background); &:not(:last-child) { - @include themify($themes) { - border-bottom: themed('sessionBorder'); - } + border-bottom: var(--border-session); } &:hover { - @include themify($themes) { - background-color: themed('clickableHovered'); - } + background-color: var(--color-clickable-hovered); } &.selected { - @include themify($themes) { - background-color: themed('conversationItemSelected') !important; - } + background-color: var(--color-conversation-item-selected) !important; } &.zombie { @@ -1336,9 +1261,7 @@ input { &.selected { opacity: 1; svg { - @include themify($themes) { - fill: themed('accent') !important; - } + fill: var(--color-accent) !important; } } } @@ -1352,6 +1275,7 @@ input { &__name { font-weight: bold; margin-inline-start: $session-margin-md; + margin-inline-end: $session-margin-md; } &__pubkey { margin-inline-start: 5px; @@ -1383,17 +1307,14 @@ input { opacity: 0.6; transition: none; &:hover { - @include themify($themes) { - opacity: 1; - } + opacity: 1; } + .session-button { transition: none; &:hover { - @include themify($themes) { - color: themed('textColorOpposite'); - } + color: var(--color-text-opposite); } } } diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 1d740139e..f92a039a6 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -63,9 +63,7 @@ align-items: center; justify-content: space-between; height: $main-view-header-height; - @include themify($themes) { - background: themed('cellBackground'); - } + background: var(--color-cell-background); .close-button { float: left; @@ -115,10 +113,8 @@ outline: none; position: relative; - @include themify($themes) { - border-left: themed('sessionBorder'); - border-top: themed('sessionBorder'); - } + border-left: var(--border-session); + border-top: var(--border-session); &__blocking-overlay { background-color: rgba(0, 0, 0, 0.8); @@ -144,9 +140,7 @@ &.show { display: flex; - @include themify($themes) { - background: themed('inboxBackground'); - } + background: var(--color-inbox-background); } } } @@ -168,10 +162,8 @@ align-items: center; padding: 0px $session-margin-md; min-height: min-content; - @include themify($themes) { - background: themed('composeViewBackground'); - border-top: themed('sessionBorder'); - } + background: var(--color-cell-background); + border-top: var(--border-session); .session-icon-button { // & > .session-icon-button { @@ -210,9 +202,8 @@ min-height: $composition-container-height / 3; max-height: 3 * $composition-container-height; margin-right: $session-margin-md; - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); + background: transparent; resize: none; display: flex; @@ -507,9 +498,7 @@ $rhap_font-family: inherit !default; } .rhap_volume-button { - @include themify($themes) { - color: subtle(themed('textColor')); - } + color: subtle(var(--color-text)); } .rhap_volume-container div[role='progressbar'] { @@ -517,9 +506,8 @@ $rhap_font-family: inherit !default; } .rhap_time { - @include themify($themes) { - color: subtle(themed('textColor')); - } + color: subtle(var(--color-text)); + font-size: 12px; } @@ -529,35 +517,23 @@ $rhap_font-family: inherit !default; z-index: 0; width: 100%; height: 5px; - @include themify($themes) { - background-color: rgba(themed('textColor'), 0.3); - } + background-color: var(--color-text); + border-radius: 2px; } .rhap_progress-filled { - @include themify($themes) { - background-color: rgba(themed('accent'), 0.6); - } - padding-left: 5px; -} + background-color: rgba(var(--color-accent), 0.6); -// special case for light theme, outgoing message (accent color on accent color background is not readable) -.light-theme .module-message--outgoing { - .rhap_progress-filled { - @include themify($themes) { - background-color: rgba(themed('textColor'), 0.6); - } - } + padding-left: 5px; } .rhap_download-progress { height: 100%; position: absolute; z-index: 1; - @include themify($themes) { - background-color: subtle(themed('textColor')); - } + background-color: subtle(var(--color-text)); + border-radius: 2px; } diff --git a/stylesheets/_session_group_panel.scss b/stylesheets/_session_group_panel.scss index dbb1dff78..8f4163806 100644 --- a/stylesheets/_session_group_panel.scss +++ b/stylesheets/_session_group_panel.scss @@ -3,11 +3,9 @@ flex-direction: column; height: 100vh; width: -webkit-fill-available; + background: var(--color-cell-background); + border-left: var(--border-session); - @include themify($themes) { - background: themed('leftpaneOverlayBackground'); - border-left: themed('sessionBorder'); - } align-items: center; &-header { @@ -32,11 +30,10 @@ margin: $session-margin-md 0; min-height: 4rem; width: inherit; - @include themify($themes) { - color: themed('textColor'); - background: themed('cellBackground'); - border: themed('sessionBorder'); - } + color: var(--color-text); + background: var(--color-cell-background); + border: var(--border-session); + text-align: center; display: none; } @@ -46,21 +43,18 @@ align-items: center; min-height: 3rem; font-size: 0.8rem; - @include themify($themes) { - color: themed('textColor'); - background: themed('cellBackground'); - border-top: themed('sessionBorder'); - border-bottom: themed('sessionBorder'); - } + color: var(--color-text); + background: var(--color-cell-background); + border-top: var(--border-session); + border-bottom: var(--border-session); + width: -webkit-fill-available; padding: 0 $session-margin-md; transition: $session-transition-duration; cursor: pointer; &:hover { - @include themify($themes) { - background: themed('clickableHovered'); - } + background: var(--color-clickable-hovered); } } @@ -77,10 +71,8 @@ height: $composition-container-height; flex-shrink: 0; align-items: center; - @include themify($themes) { - border: none; - border-top: themed('sessionBorder'); - } + border: none; + border-top: var(--border-session); } .module-empty-state { @@ -106,9 +98,8 @@ } &__tab { - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); + font-weight: bold; font-size: 0.9rem; padding: 0.6rem; @@ -124,9 +115,7 @@ margin: 0 auto; width: 70%; padding-top: 0.5rem; - @include themify($themes) { - border-bottom: themed('sessionUnreadBorder'); - } + border-bottom: var(--border-unread); } } } diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index 1ec1780ed..dbcf15224 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -4,9 +4,7 @@ $session-compose-margin: 20px; width: 380px !important; transition: $session-transition-duration; - @include themify($themes) { - background: themed('cellBackground'); - } + background: var(--color-cell-background); } .module-conversation { @@ -17,9 +15,7 @@ $session-compose-margin: 20px; font-weight: bold; font-size: 15px; - @include themify($themes) { - color: themed('textColorSubtle'); - } + color: var(--color-text-subtle); } } @@ -27,37 +23,27 @@ $session-compose-margin: 20px; transition: $session-transition-duration; &:hover { - @include themify($themes) { - background: themed('clickableHovered'); - } + background: var(--color-clickable-hovered); } &--is-selected { - @include themify($themes) { - background: themed('conversationItemSelected'); - } + background: var(--color-conversation-item-selected); .module-conversation__user__profile-number, .module-conversation__user__profile-name, .module-conversation-list-item__message__text { - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); } } &--has-unread { - @include themify($themes) { - border-left: themed('sessionUnreadBorder'); - background: themed('conversationItemHasUnread'); - } + border-left: var(--border-unread); + background: var(--color-conversation-item-has-unread); } &__unread-count { - @include themify($themes) { - color: themed('textColor'); - background: themed('clickableHovered'); - } + color: var(--color-text); + background: var(--color-clickable-hovered); position: static !important; font-weight: 700 !important; @@ -75,9 +61,7 @@ $session-compose-margin: 20px; &__message__text { color: $session-shade-17; &--has-unread { - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); } } @@ -88,9 +72,7 @@ $session-compose-margin: 20px; &__header__name--with-unread .module-conversation__user__profile-number, &__header__name--with-unread .module-conversation__user__profile-name { - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); } } } @@ -114,9 +96,7 @@ $session-compose-margin: 20px; display: inline-flex; flex-direction: column; - @include themify($themes) { - border-right: themed('sessionBorder'); - } + border-right: var(--border-session); .module-avatar, .session-icon-button { @@ -162,7 +142,6 @@ $session-compose-margin: 20px; } &__title { - cursor: pointer; padding-inline-end: $session-margin-sm; padding-inline-start: $session-margin-sm; transition: $session-transition-duration; @@ -180,9 +159,8 @@ $session-compose-margin: 20px; } &-overlay { - @include themify($themes) { - background: themed('leftpaneOverlayBackground'); - } + background: var(--color-left-pane-overlay-background); + display: flex; flex-direction: column; flex-grow: 1; @@ -197,7 +175,6 @@ $session-compose-margin: 20px; h2 { margin-top: 0px; } - h3, h2 { text-align: center; @@ -206,13 +183,13 @@ $session-compose-margin: 20px; h3 { padding-top: 22px; position: relative; + margin-bottom: 6px; .green-border { position: absolute; - @include themify($themes) { - color: themed('accent'); - background-color: themed('accent'); - } + color: var(--color-accent); + background-color: var(--color-accent); + height: 5px; left: -10px; right: -10px; @@ -286,9 +263,7 @@ $session-compose-margin: 20px; flex-grow: 1; transition: $session-transition-duration; - @include themify($themes) { - background: themed('conversationList'); - } + background: var(--color-conversation-list); .left-pane-contact-bottom-buttons .session-button { vertical-align: middle; @@ -332,9 +307,8 @@ $session-compose-margin: 20px; font-family: $session-font-default; text-overflow: ellipsis; background: none; - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); + &:focus { outline: none !important; } @@ -364,9 +338,8 @@ $session-compose-margin: 20px; .session-text-logo { margin-top: 10px; width: 250px; - @include themify($themes) { - filter: themed('filterSessionText'); - } + filter: var(--filter-session-text); + transition: 0s; .path { fill: red; @@ -386,47 +359,7 @@ $session-compose-margin: 20px; flex-grow: 1; height: $composition-container-height; - @include themify($themes) { - border: themed('sessionBorder'); - } - } -} - -.contacts-dropdown { - width: -webkit-fill-available; - - &-row { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding: 8px 20px; - margin: 0px $session-compose-margin; - - // 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; - - // 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; - // } - } + border: var(--border-session); } } @@ -503,15 +436,11 @@ $session-compose-margin: 20px; } &.active { - @include themify($themes) { - background: themed('conversationItemSelected'); - } + background: var(--color-conversation-item-selected); } &:hover { - @include themify($themes) { - background: themed('clickableHovered'); - } + background: var(--color-clickable-hovered); } &__buttons { @@ -568,9 +497,8 @@ $session-compose-margin: 20px; margin: 50px 0 50px; .panel-text-divider-line { - @include themify($themes) { - border-bottom: 1px solid themed('pillDividerColor'); - } + border-bottom: 1px solid var(--color-pill-divider); + line-height: 0.1em; flex-grow: 1; height: 1px; @@ -580,10 +508,9 @@ $session-compose-margin: 20px; span { padding: 5px 10px; border-radius: 50px; - @include themify($themes) { - color: themed('pillDividerTextColor'); - border: 1px solid themed('pillDividerColor'); - } + color: var(--color-pill-divider-text); + border: 1px solid var(--color-pill-divider); + font-family: $session-font-default; font-size: $session-font-sm; } diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss index 12fe807b1..5633a09cd 100644 --- a/stylesheets/_session_signin.scss +++ b/stylesheets/_session_signin.scss @@ -1,8 +1,7 @@ .session { &-fullscreen { - @include themify($themes) { - background: themed('cellBackground'); - } + background: var(--color-cell-background); + overflow-y: auto; height: 100%; } @@ -19,9 +18,8 @@ padding-inline-start: 20px; &-text { - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); + font-family: $session-font-accent; .title { @@ -84,9 +82,8 @@ display: flex; flex-direction: column; align-items: center; - @include themify($themes) { - background: themed('inputBackground'); - } + background: var(--color-input-background); + padding: $session-margin-sm $session-margin-lg; border-radius: 8px; @@ -118,9 +115,7 @@ margin-inline-start: auto; margin-inline-end: auto; - @include themify($themes) { - background: themed('cellBackground'); - } + background: var(--color-cell-background); } &__tab { @@ -129,25 +124,21 @@ padding-bottom: 10px; background-color: transparent; text-align: center; - @include themify($themes) { - border-bottom: themed('sessionBorder'); - color: themed('textColor'); - } + border-bottom: var(--border-session); + color: var(--color-text); + transition: border-color $session-transition-duration linear; line-height: 17px; font-size: 15px; &--active { - @include themify($themes) { - border-bottom: 4px solid themed('accent'); - } + border-bottom: 4px solid var(--color-accent); } } @mixin registration-label-mixin { - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); + font-weight: bold; padding: 20px; } @@ -181,9 +172,8 @@ height: 46.5px; width: 280px; font-family: $session-font-default; - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); + padding: 2px 0 2px 0; transition: opacity $session-transition-duration; opacity: 1; @@ -192,9 +182,8 @@ label { line-height: 14px; opacity: 0; - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); + font-size: 10px; line-height: 11px; position: absolute; @@ -206,9 +195,7 @@ } &.error { - @include themify($themes) { - color: themed('destructive'); - } + color: var(--color-destructive); } input { @@ -217,9 +204,8 @@ height: 14px; width: 280px; background: transparent; - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); + font-family: $session-font-default; font-size: 12px; line-height: 14px; @@ -229,9 +215,8 @@ } hr { - @include themify($themes) { - border: themed('sessionBorder'); - } + border: var(--border-session); + width: 100%; position: absolute; bottom: 0px; @@ -247,9 +232,8 @@ &-terms-conditions-agreement { padding-top: $session-margin-md; - @include themify($themes) { - @include session-color-subtle(themed('textColor')); - } + @include session-color-subtle(var(--color-text)); + text-align: center; font-size: 12px; @@ -257,21 +241,16 @@ white-space: nowrap; font-weight: bold; text-decoration: none; - @include themify($themes) { - @include session-color-subtle(themed('textColor')); - } + @include session-color-subtle(var(--color-text)); + transition: $session-transition-duration; &:visited &:link { - @include themify($themes) { - @include session-color-subtle(themed('textColor')); - } + @include session-color-subtle(var(--color-text)); } &:hover { - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); } } } @@ -280,9 +259,8 @@ &-signin-device-pairing-header { padding-top: 0; padding-bottom: 20px; - @include themify($themes) { - @include session-color-subtle(themed('textColor')); - } + @include session-color-subtle(var(--color-text)); + text-align: center; font-size: 12px; line-height: 20px; @@ -308,9 +286,8 @@ outline: 0; border: none; background: transparent; - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); + font-size: 15px; line-height: 18px; text-align: center; @@ -327,9 +304,8 @@ [contenteditable='true']:empty::before { content: attr(placeholder); - @include themify($themes) { - @include session-color-subtle(themed('textColor')); - } + @include session-color-subtle(var(--color-text)); + font-size: 13px; } diff --git a/stylesheets/_session_slider.scss b/stylesheets/_session_slider.scss index bac8d767c..16874e28e 100644 --- a/stylesheets/_session_slider.scss +++ b/stylesheets/_session_slider.scss @@ -34,9 +34,8 @@ .rc-slider-rail { position: absolute; width: 100%; - @include themify($themes) { - background: themed('inputBackground'); - } + background: var(--color-clickable-hovered); + height: 8px; border-radius: 6px; margin: 0px 0px 0px -1px; @@ -106,9 +105,8 @@ margin-left: -4px; width: 3px; height: 6px; - @include themify($themes) { - background: themed('clickableHovered'); - } + background: var(--color-clickable-hovered); + cursor: pointer; border-radius: 2px; vertical-align: middle; diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index 1bd823702..8cfdf4acc 100644 --- a/stylesheets/_session_theme.scss +++ b/stylesheets/_session_theme.scss @@ -1,22 +1,9 @@ // Messages -@import 'themes.scss'; - -// body.dark-theme { -// @include themify($themes) { -// background-color: themed('cellBackground'); -// } -// color: red; - -// background-color: blue -// } - .conversation { background: none !important; } .module-conversation-header { - @include themify($themes) { - background: themed('cellBackground'); - } + background: var(--color-cell-background); } .module-message { @@ -45,9 +32,7 @@ &__container--incoming { &--opaque { - @include themify($themes) { - background: themed('receivedMessageBackground'); - } + background: var(--color-received-message-background); } &--transparent { @@ -68,14 +53,11 @@ } .module-message__text { - @include themify($themes) { - color: themed('receivedMessageText'); - } + color: var(--color-received-message-text); + a { text-decoration: underline; - @include themify($themes) { - color: themed('receivedMessageText'); - } + color: var(--color-received-message-text); } } } @@ -87,9 +69,7 @@ border-top-right-radius: 5px; border-bottom-right-radius: 5px; &--opaque { - @include themify($themes) { - background: themed('sentMessageBackground'); - } + background: var(--color-sent-message-background); } &--transparent { @@ -105,14 +85,11 @@ } .module-message__text { - @include themify($themes) { - color: themed('sentMessageText'); - } + color: var(--color-sent-message-text); + a { text-decoration: underline; - @include themify($themes) { - color: themed('sentMessageText'); - } + color: var(--color-sent-message-text); } } } @@ -130,9 +107,7 @@ &.message-selected { .module-message { &__container { - @include themify($themes) { - box-shadow: themed('sessionShadow'); - } + box-shadow: var(--color-session-shadow); } } } @@ -143,10 +118,8 @@ } .inbox { - @include themify($themes) { - background: themed('inboxBackground'); - color: themed('textColor'); - } + background: var(--color-inbox-background); + color: var(--color-text); } .conversation { @@ -164,35 +137,30 @@ h1 { margin: 0; &.active { - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); } } h2 { @include session-h-title; - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); + font-size: 22px; text-align: center; } h3 { @include session-h-title; - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); + font-size: 18px; padding-top: 22px; } h4 { @include session-h-title; - @include themify($themes) { - color: themed('textColor'); - } + color: var(--color-text); + font-size: 17px; text-align: center; } diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index 451fa708a..f9baf5c70 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -9,7 +9,6 @@ @import 'node_modules/sanitize.css/typography.css'; // Global Settings, Variables, and Mixins -@import 'themes.scss'; @import 'session_constants'; @import 'variables'; @import 'mixins'; diff --git a/stylesheets/themes.scss b/stylesheets/themes.scss deleted file mode 100644 index 100a3b2d8..000000000 --- a/stylesheets/themes.scss +++ /dev/null @@ -1,139 +0,0 @@ -// 13592 lines for manifest.css on date 25 august - -$white: #ffffff; -$black: #000000; -$destructive: #ff453a; -$warning: #e7b100; -$accentLightTheme: #00e97b; -$accentDarkTheme: #00f782; - -$borderLightTheme: #f1f1f1; // search for references on ts TODO: make this exposed on ts -$borderDarkTheme: rgba($white, 0.06); -$inputBackgroundColor: #8e8e93; - -$onionPathLineColor: rgba(#7a7a7a, 0.6); - -$borderAvatarColor: unquote( - '#00000059' -); // search for references on ts TODO: make this exposed on ts - -$themes: ( - light: ( - accent: $accentLightTheme, - accentButton: $black, - cellBackground: #fcfcfc, - warning: $warning, - destructive: $destructive, - modalBackground: #fcfcfc, - fakeChatBubbleBackground: #f5f5f5, - // input - inputBackground: rgba($inputBackgroundColor, 0.12), - // text - textColor: $black, - textColorSubtle: rgba($black, 0.6), - textColorOpposite: $white, - textHighlight: rgba($black, 0.2), - // inbox - inboxBackground: $white, - // buttons - backgroundPrimary: #272726, - foregroundPrimary: $white, - buttonGreen: #272726, - // conversation view - composeViewBackground: #fcfcfc, - receivedMessageBackground: #f5f5f5, - sentMessageBackground: $accentLightTheme, - receivedMessageText: $black, - sentMessageText: $white, - sessionShadow: 0 0 4px 0 rgba($black, 0.37), - sessionShadowColor: rgba($black, 0.37), - // left pane - conversationList: $white, - conversationItemHasUnread: #fcfcfc, - conversationItemSelected: #f0f0f0, - clickableHovered: #dfdfdf, - sessionBorder: 1px solid $borderLightTheme, - sessionUnreadBorder: 4px solid $accentLightTheme, - leftpaneOverlayBackground: $white, - // scrollbars - scrollBarTrack: #fcfcfc, - scrollBarThumb: #474646, - // pill divider: - pillDividerColor: rgba($black, 0.1), - pillDividerTextColor: #555555, - // context menu - contextMenuBackground: #f5f5f5, - filterSessionText: brightness(0) saturate(100%), - ), - dark: ( - accent: $accentDarkTheme, - accentButton: $accentDarkTheme, - warning: $warning, - destructive: $destructive, - cellBackground: #1b1b1b, - modalBackground: #101011, - fakeChatBubbleBackground: #212121, - // input - inputBackground: rgba($inputBackgroundColor, 0.12), - // text - textColor: $white, - textColorSubtle: rgba($white, 0.6), - textColorOpposite: $black, - textHighlight: rgba($accentDarkTheme, 0.6), - // inbox - // buttons - inboxBackground: linear-gradient(180deg, #171717 0%, #121212 100%), - backgroundPrimary: #474646, - foregroundPrimary: $white, - buttonGreen: $accentDarkTheme, - // conversation view - composeViewBackground: #171717, - receivedMessageBackground: #2d2d2d, - sentMessageBackground: $accentDarkTheme, - receivedMessageText: $white, - sentMessageText: $black, - sessionShadow: 0 0 4px 0 rgba($white, 0.2), - sessionShadowColor: rgba($white, 0.2), - // left pane - conversationList: #1b1b1b, - conversationItemHasUnread: #2c2c2c, - conversationItemSelected: #404040, - clickableHovered: #414347, - sessionBorder: 1px solid $borderDarkTheme, - sessionUnreadBorder: 4px solid $accentDarkTheme, - leftpaneOverlayBackground: linear-gradient(180deg, #171717 0%, #121212 100%), - // scrollbars - scrollBarTrack: #1b1b1b, - scrollBarThumb: #474646, - // pill divider: - pillDividerColor: #353535, - pillDividerTextColor: #a0a0a0, - // context menu - contextMenuBackground: #212121, - filterSessionText: none, - ), -); - -@mixin themify($themes: $themes) { - @each $theme, $map in $themes { - .#{$theme}-theme & { - $theme-map: () !global; - @each $key, $submap in $map { - $value: map-get(map-get($themes, $theme), '#{$key}'); - $theme-map: map-merge( - $theme-map, - ( - $key: $value, - ) - ) !global; - } - - @content; - $theme-map: null !global; - } - } -} - -@function themed($key) { - @return map-get($theme-map, $key); -} diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index f55572833..b2bfff848 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -1,118 +1,36 @@ import React from 'react'; -// import { getIncrement } from '../../util/timer'; import _ from 'lodash'; import uuid from 'uuid'; import { QuoteClickOptions } from '../../models/messageType'; import autoBind from 'auto-bind'; -// import { messageExpired } from '../../state/ducks/conversations'; -// import { getConversationController } from '../../session/conversations'; import { GenericReadableMessage } from './message/GenericReadableMessage'; // Same as MIN_WIDTH in ImageGrid.tsx export const MINIMUM_LINK_PREVIEW_IMAGE_WIDTH = 200; -interface State { - expiring: boolean; - expired: boolean; -} - -// const EXPIRATION_CHECK_MINIMUM = 2000; -// const EXPIRED_DELAY = 600; - type Props = { messageId: string; isDetailView?: boolean; // when the detail is shown for a message, we disble click and some other stuff onQuoteClick?: (options: QuoteClickOptions) => Promise; }; -export class Message extends React.PureComponent { - public expirationCheckInterval: any; - public expiredTimeout: any; +export class Message extends React.PureComponent { public ctxMenuID: string; public constructor(props: Props) { super(props); autoBind(this); - this.state = { - expiring: false, - expired: false, - }; this.ctxMenuID = `ctx-menu-message-${uuid()}`; } - public componentDidMount() { - // const { expirationLength } = this.props; - // if (!expirationLength) { - // return; - // } - // const increment = getIncrement(expirationLength); - // const checkFrequency = Math.max(EXPIRATION_CHECK_MINIMUM, increment); - // this.checkExpired(); - // this.expirationCheckInterval = setInterval(() => { - // this.checkExpired(); - // }, checkFrequency); - } - - public componentWillUnmount() { - // if (this.expirationCheckInterval) { - // clearInterval(this.expirationCheckInterval); - // } - // if (this.expiredTimeout) { - // global.clearTimeout(this.expiredTimeout); - // } - } - - // public componentDidUpdate() { - // this.checkExpired(); - // } - - // public checkExpired() { - // const now = Date.now(); - // const { isExpired, expirationTimestamp, expirationLength, convoId, id } = this.props; - - // if (!expirationTimestamp || !expirationLength) { - // return; - // } - // if (this.expiredTimeout) { - // return; - // } - - // if (isExpired || now >= expirationTimestamp) { - // this.setState({ - // expiring: true, - // }); - - // const setExpired = async () => { - // this.setState({ - // expired: true, - // }); - // await window.Signal.Data.removeMessage(id); - // window.inboxStore?.dispatch( - // messageExpired({ - // conversationKey: convoId, - // messageId: id, - // }) - // ); - // const convo = getConversationController().get(convoId); - // convo?.updateLastMessage(); - // }; - // // as 'checkExpired' is potentially called more than once (componentDidUpdate & componentDidMount), - // // we need to clear the timeout call to 'setExpired' first to avoid multiple calls to 'setExpired'. - // global.clearTimeout(this.expiredTimeout); - // this.expiredTimeout = setTimeout(setExpired, EXPIRED_DELAY); - // } - // } - // tslint:disable-next-line: cyclomatic-complexity cyclomatic-complexity public render() { return ( diff --git a/ts/components/conversation/message/GenericReadableMessage.tsx b/ts/components/conversation/message/GenericReadableMessage.tsx index f08719408..1b555c345 100644 --- a/ts/components/conversation/message/GenericReadableMessage.tsx +++ b/ts/components/conversation/message/GenericReadableMessage.tsx @@ -1,15 +1,21 @@ import classNames from 'classnames'; -import React, { useCallback } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { contextMenu } from 'react-contexify'; -import { useSelector } from 'react-redux'; -import _ from 'underscore'; +import { useDispatch, useSelector } from 'react-redux'; +// tslint:disable-next-line: no-submodule-imports +import useInterval from 'react-use/lib/useInterval'; +import _ from 'lodash'; +import { removeMessage } from '../../../data/data'; import { MessageRenderingProps, QuoteClickOptions } from '../../../models/messageType'; +import { getConversationController } from '../../../session/conversations'; +import { messageExpired } from '../../../state/ducks/conversations'; import { getGenericReadableMessageSelectorProps, getIsMessageSelected, getQuotedMessageToAnimate, isMessageSelectionMode, } from '../../../state/selectors/conversations'; +import { getIncrement } from '../../../util/timer'; import { ExpireTimer } from '../ExpireTimer'; import { ReadableMessage } from '../ReadableMessage'; import { MessageAvatar } from './MessageAvatar'; @@ -24,12 +30,66 @@ export type GenericReadableMessageSelectorProps = Pick< | 'expirationLength' | 'expirationTimestamp' | 'isKickedFromGroup' + | 'isExpired' + | 'convoId' >; +type ExpiringProps = { + isExpired?: boolean; + expirationTimestamp?: number | null; + expirationLength?: number | null; + convoId?: string; + messageId: string; +}; +const EXPIRATION_CHECK_MINIMUM = 2000; + +function useIsExpired(props: ExpiringProps) { + const { + convoId, + messageId, + expirationLength, + expirationTimestamp, + isExpired: isExpiredProps, + } = props; + + const dispatch = useDispatch(); + + const [isExpired] = useState(isExpiredProps); + async function checkExpired() { + const now = Date.now(); + + if (!expirationTimestamp || !expirationLength) { + return; + } + + if (isExpired || now >= expirationTimestamp) { + await removeMessage(messageId); + if (convoId) { + dispatch( + messageExpired({ + conversationKey: convoId, + messageId, + }) + ); + const convo = getConversationController().get(convoId); + convo?.updateLastMessage(); + } + } + } + + const increment = getIncrement(expirationLength || EXPIRATION_CHECK_MINIMUM); + const checkFrequency = Math.max(EXPIRATION_CHECK_MINIMUM, increment); + + useEffect(() => { + void checkExpired(); + }, []); // check on mount + useInterval(checkExpired, checkFrequency); // check every 2sec or sooner if needed + + return { isExpired }; +} + type Props = { messageId: string; - expired: boolean; - expiring: boolean; onQuoteClick: (quote: QuoteClickOptions) => void; ctxMenuID: string; isDetailView?: boolean; @@ -40,6 +100,15 @@ export const GenericReadableMessage = (props: Props) => { getGenericReadableMessageSelectorProps(state as any, props.messageId) ); + const expiringProps: ExpiringProps = { + convoId: msgProps?.convoId, + expirationLength: msgProps?.expirationLength, + messageId: props.messageId, + expirationTimestamp: msgProps?.expirationTimestamp, + isExpired: msgProps?.isExpired, + }; + const { isExpired } = useIsExpired(expiringProps); + const quotedMessageToAnimate = useSelector(getQuotedMessageToAnimate); const isMessageSelected = useSelector(state => getIsMessageSelected(state as any, props.messageId) @@ -63,7 +132,7 @@ export const GenericReadableMessage = (props: Props) => { [props.ctxMenuID, multiSelectMode, msgProps?.isKickedFromGroup] ); - const { messageId, expired, isDetailView } = props; + const { messageId, isDetailView } = props; if (!msgProps) { return null; @@ -77,7 +146,7 @@ export const GenericReadableMessage = (props: Props) => { expirationTimestamp, } = msgProps; - if (expired) { + if (isExpired) { return null; } @@ -110,7 +179,6 @@ export const GenericReadableMessage = (props: Props) => { diff --git a/ts/components/conversation/message/MessageContentWithStatus.tsx b/ts/components/conversation/message/MessageContentWithStatus.tsx index f966810e1..02c9a33d8 100644 --- a/ts/components/conversation/message/MessageContentWithStatus.tsx +++ b/ts/components/conversation/message/MessageContentWithStatus.tsx @@ -18,7 +18,6 @@ export type MessageContentWithStatusSelectorProps = Pick void; ctxMenuID: string; isDetailView?: boolean; @@ -58,7 +57,7 @@ export const MessageContentWithStatuses = (props: Props) => { [window.contextMenuShown, props?.messageId, multiSelectMode, props?.isDetailView] ); - const { messageId, expiring, onQuoteClick, ctxMenuID, isDetailView } = props; + const { messageId, onQuoteClick, ctxMenuID, isDetailView } = props; if (!contentProps) { return null; } @@ -67,11 +66,7 @@ export const MessageContentWithStatuses = (props: Props) => { return (
diff --git a/ts/components/dialog/SessionNicknameDialog.tsx b/ts/components/dialog/SessionNicknameDialog.tsx index cb917f400..47dd9bbf6 100644 --- a/ts/components/dialog/SessionNicknameDialog.tsx +++ b/ts/components/dialog/SessionNicknameDialog.tsx @@ -5,7 +5,7 @@ import _ from 'lodash'; import { SpacerLG } from '../basic/Text'; import { useDispatch } from 'react-redux'; import { changeNickNameModal } from '../../state/ducks/modalDialog'; -import { SessionButton } from '../session/SessionButton'; +import { SessionButton, SessionButtonColor } from '../session/SessionButton'; import { SessionWrapperModal } from '../session/SessionWrapperModal'; type Props = { @@ -70,7 +70,11 @@ export const SessionNicknameDialog = (props: Props) => { />
- +
diff --git a/ts/components/dialog/SessionPasswordDialog.tsx b/ts/components/dialog/SessionPasswordDialog.tsx index 3dbfdac35..a9d4edc1c 100644 --- a/ts/components/dialog/SessionPasswordDialog.tsx +++ b/ts/components/dialog/SessionPasswordDialog.tsx @@ -57,7 +57,7 @@ export class SessionPasswordDialog extends React.Component { : [window.i18n('enterPassword'), window.i18n('confirmPassword')]; const confirmButtonColor = - passwordAction === 'remove' ? SessionButtonColor.Danger : SessionButtonColor.Primary; + passwordAction === 'remove' ? SessionButtonColor.Danger : SessionButtonColor.Green; return ( { {recoveryPhrase}
-
- -
-
{ copyRecoveryPhrase(recoveryPhrase); }} />
+ +
+ +
); }; @@ -190,7 +191,6 @@ const SessionSeedModalInner = (props: ModalInnerProps) => { )} )} - : ); }; diff --git a/ts/components/dialog/UserDetailsDialog.tsx b/ts/components/dialog/UserDetailsDialog.tsx index 5d08d067a..10166436c 100644 --- a/ts/components/dialog/UserDetailsDialog.tsx +++ b/ts/components/dialog/UserDetailsDialog.tsx @@ -1,13 +1,15 @@ import React, { useState } from 'react'; +// tslint:disable no-submodule-imports + +import useCopyToClipboard from 'react-use/lib/useCopyToClipboard'; -// tslint:disable-next-line: no-submodule-imports import useKey from 'react-use/lib/useKey'; import { ConversationTypeEnum } from '../../models/conversation'; import { getConversationController } from '../../session/conversations'; import { openConversationWithMessages } from '../../state/ducks/conversations'; import { updateUserDetailsModal } from '../../state/ducks/modalDialog'; import { Avatar, AvatarSize } from '../Avatar'; -import { SpacerMD } from '../basic/Text'; +import { SpacerLG } from '../basic/Text'; import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton'; import { SessionIdEditable } from '../session/SessionIdEditable'; import { SessionWrapperModal } from '../session/SessionWrapperModal'; @@ -24,6 +26,8 @@ export const UserDetailsDialog = (props: Props) => { const size = isEnlargedImageShown ? AvatarSize.HUGE : AvatarSize.XL; const userName = props.userName || props.conversationId; + const [_, copyToClipboard] = useCopyToClipboard(); + function closeDialog() { window.inboxStore?.dispatch(updateUserDetailsModal(null)); } @@ -63,14 +67,22 @@ export const UserDetailsDialog = (props: Props) => { - +
{ + copyToClipboard(props.conversationId); + }} + /> +
diff --git a/ts/components/session/ActionsPanel.tsx b/ts/components/session/ActionsPanel.tsx index 36e75d32a..cd2930b2c 100644 --- a/ts/components/session/ActionsPanel.tsx +++ b/ts/components/session/ActionsPanel.tsx @@ -43,6 +43,7 @@ import { loadDefaultRooms } from '../../opengroup/opengroupV2/ApiUtil'; // tslint:disable-next-line: no-import-side-effect no-submodule-imports import { ActionPanelOnionStatusLight } from '../dialog/OnionStatusPathDialog'; +import { switchHtmlToDarkTheme, switchHtmlToLightTheme } from '../../state/ducks/SessionTheme'; const Section = (props: { type: SectionType; avatarPath?: string | null }) => { const ourNumber = useSelector(getOurNumber); const unreadMessageCount = useSelector(getUnreadMessageCount); @@ -60,6 +61,11 @@ const Section = (props: { type: SectionType; avatarPath?: string | null }) => { const themeFromSettings = window.Events.getThemeSetting(); const updatedTheme = themeFromSettings === 'dark' ? 'light' : 'dark'; window.setTheme(updatedTheme); + if (updatedTheme === 'dark') { + switchHtmlToDarkTheme(); + } else { + switchHtmlToLightTheme(); + } const newThemeObject = updatedTheme === 'dark' ? 'dark' : 'light'; dispatch(applyTheme(newThemeObject)); @@ -132,7 +138,11 @@ const cleanUpMediasInterval = DURATION.MINUTES * 30; const setupTheme = () => { const theme = window.Events.getThemeSetting(); window.setTheme(theme); - + if (theme === 'dark') { + switchHtmlToDarkTheme(); + } else { + switchHtmlToLightTheme(); + } const newThemeObject = theme === 'dark' ? 'dark' : 'light'; window?.inboxStore?.dispatch(applyTheme(newThemeObject)); }; diff --git a/ts/components/session/LeftPaneSectionHeader.tsx b/ts/components/session/LeftPaneSectionHeader.tsx index e130a64c6..72c816269 100644 --- a/ts/components/session/LeftPaneSectionHeader.tsx +++ b/ts/components/session/LeftPaneSectionHeader.tsx @@ -115,11 +115,11 @@ const StyledProgressBarContainer = styled.div` width: 100%; height: 5px; flex-direction: row; - background: ${p => p.theme.colors.sessionBorderColor}; + background: var(--color-session-border); `; const StyledProgressBarInner = styled.div` - background: ${p => p.theme.colors.accent}; + background: var(--color-accent); width: 90%; transition: width 0.5s ease-in; height: 100%; @@ -127,21 +127,20 @@ const StyledProgressBarInner = styled.div` export const StyledBannerTitle = styled.div` line-height: 1.3; - font-size: ${p => p.theme.common.fonts.md}; + font-size: var(--font-size-md); font-weight: bold; - margin: ${p => p.theme.common.margins.sm} ${p => p.theme.common.margins.sm} 0 - ${p => p.theme.common.margins.sm}; + margin: var(--margins-sm) var(--margins-sm) 0 var(--margins-sm); span { - color: ${p => p.theme.colors.textAccent}; + color: var(--color-text-accent); } `; export const StyledLeftPaneBanner = styled.div` - background: ${p => p.theme.colors.recoveryPhraseBannerBackground}; + background: var(--color-recovery-phrase-banner-background); display: flex; flex-direction: column; - border-bottom: ${p => p.theme.colors.sessionBorder}; + border-bottom: var(--session-border); `; const StyledBannerInner = styled.div` diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx index 2ff8505af..dab9060fa 100644 --- a/ts/components/session/conversation/SessionCompositionBox.tsx +++ b/ts/components/session/conversation/SessionCompositionBox.tsx @@ -91,7 +91,7 @@ const AddStagedAttachmentButton = (props: { onClick: () => void }) => { return ( void }) => { void }) => { return ( void }) => {
{ {getChangeNicknameMenuItem(isMe, isGroup, conversationId)} {getClearNicknameMenuItem(isMe, hasNickname, isGroup, conversationId)} {getDeleteMessagesMenuItem(isPublic, conversationId)} - {getAddModeratorsMenuItem(weAreAdmin, isKickedFromGroup, conversationId)} - {getRemoveModeratorsMenuItem(weAreAdmin, isKickedFromGroup, conversationId)} + {getAddModeratorsMenuItem(weAreAdmin, isPublic, isKickedFromGroup, conversationId)} + {getRemoveModeratorsMenuItem(weAreAdmin, isPublic, isKickedFromGroup, conversationId)} {getUpdateGroupNameMenuItem(weAreAdmin, isKickedFromGroup, left, conversationId)} {getLeaveGroupMenuItem(isKickedFromGroup, left, isGroup, isPublic, conversationId)} {/* TODO: add delete group */} diff --git a/ts/components/session/menu/Menu.tsx b/ts/components/session/menu/Menu.tsx index 484ba5f8b..23f92ee09 100644 --- a/ts/components/session/menu/Menu.tsx +++ b/ts/components/session/menu/Menu.tsx @@ -79,12 +79,20 @@ function showDeleteContact( return (!isMe && !isGroup) || (isGroup && (isGroupLeft || isKickedFromGroup || isPublic)); } -function showAddModerators(isAdmin: boolean, isKickedFromGroup: boolean): boolean { - return !isKickedFromGroup && isAdmin; +function showAddModerators( + isAdmin: boolean, + isPublic: boolean, + isKickedFromGroup: boolean +): boolean { + return !isKickedFromGroup && isAdmin && isPublic; } -function showRemoveModerators(isAdmin: boolean, isKickedFromGroup: boolean): boolean { - return !isKickedFromGroup && isAdmin; +function showRemoveModerators( + isAdmin: boolean, + isPublic: boolean, + isKickedFromGroup: boolean +): boolean { + return !isKickedFromGroup && isAdmin && isPublic; } function showUpdateGroupName(isAdmin: boolean, isKickedFromGroup: boolean, left: boolean): boolean { @@ -252,10 +260,11 @@ export function getUpdateGroupNameMenuItem( export function getRemoveModeratorsMenuItem( isAdmin: boolean | undefined, + isPublic: boolean | undefined, isKickedFromGroup: boolean | undefined, conversationId: string ): JSX.Element | null { - if (showRemoveModerators(Boolean(isAdmin), Boolean(isKickedFromGroup))) { + if (showRemoveModerators(Boolean(isAdmin), Boolean(isPublic), Boolean(isKickedFromGroup))) { return ( { @@ -271,10 +280,11 @@ export function getRemoveModeratorsMenuItem( export function getAddModeratorsMenuItem( isAdmin: boolean | undefined, + isPublic: boolean | undefined, isKickedFromGroup: boolean | undefined, conversationId: string ): JSX.Element | null { - if (showAddModerators(Boolean(isAdmin), Boolean(isKickedFromGroup))) { + if (showAddModerators(Boolean(isAdmin), Boolean(isPublic), Boolean(isKickedFromGroup))) { return ( { diff --git a/ts/models/message.ts b/ts/models/message.ts index b0ae504fb..64f9f7d03 100644 --- a/ts/models/message.ts +++ b/ts/models/message.ts @@ -1029,6 +1029,9 @@ export class MessageModel extends Backbone.Model { public async markRead(readAt: number) { this.markReadNoCommit(readAt); await this.commit(); + // the line below makes sure that getNextExpiringMessage will find this message as expiring. + // getNextExpiringMessage is used on app start to clean already expired messages which should have been removed already, but are not + await this.setToExpire(); const convo = this.getConversation(); if (convo) { diff --git a/ts/state/ducks/SessionTheme.tsx b/ts/state/ducks/SessionTheme.tsx index dde5ac3f1..c96838e0e 100644 --- a/ts/state/ducks/SessionTheme.tsx +++ b/ts/state/ducks/SessionTheme.tsx @@ -15,6 +15,8 @@ const borderDarkThemeColor = '#ffffff0F'; const darkColorAccent = accentDarkTheme; const darkColorAccentButton = accentDarkTheme; const darkColorText = white; +const darkColorTextOpposite = black; + const darkColorTextSubtle = `${white}99`; const darkColorTextAccent = accentDarkTheme; const darkColorSessionShadow = `0 0 4px 0 ${white}33`; @@ -29,6 +31,30 @@ const darkColorPillDivider = '#353535'; const darkColorLastSeenIndicator = '#353535'; const darkColorLastSeenIndicatorText = '#a8a9aa'; const darkColorQuoteBottomBarBg = '#404040'; +const darkColorCellBackground = '#1b1b1b'; +const darkColorReceivedMessageBg = '#2d2d2d'; +const darkColorReceivedMessageText = white; + +const darkColorPillDividerText = '#a0a0a0'; +const darkInputBackground = darkColorCellBackground; +const darkFilterSessionText = 'none'; +const darkUnreadBorder = `4px solid ${accentDarkTheme}`; + +const darkScrollbarThumb = '#474646'; +const darkScrollbarTrack = '#1b1b1b'; +const darkFakeChatBubbleBg = '#212121'; + +const darkInboxBackground = '#171717'; +const darkLeftPaneOverlayBg = darkInboxBackground; +const darkConversationItemSelected = '#404040'; +const darkConversationItemHasUnread = '#2c2c2c'; +const darkConversationList = '#1b1b1b'; + +const darkTextHighlight = accentDarkTheme; +const darkForegroundPrimary = white; +const darkBackgroundPrimary = '#474646'; +const darkButtonGreen = accentDarkTheme; +const darkModalBackground = '#101011'; export const switchHtmlToDarkTheme = () => { document.documentElement.style.setProperty('--color-accent', darkColorAccent); @@ -36,9 +62,10 @@ export const switchHtmlToDarkTheme = () => { document.documentElement.style.setProperty('--color-text', darkColorText); document.documentElement.style.setProperty('--color-text-subtle', darkColorTextSubtle); document.documentElement.style.setProperty('--color-text-accent', darkColorTextAccent); + document.documentElement.style.setProperty('--color-text-opposite', darkColorTextOpposite); document.documentElement.style.setProperty('--color-session-shadow', darkColorSessionShadow); document.documentElement.style.setProperty( - '--color-compose-view-background', + '--color-compose-view-button-background', darkColorComposeViewBg ); document.documentElement.style.setProperty( @@ -51,10 +78,7 @@ export const switchHtmlToDarkTheme = () => { darkColorClickableHovered ); document.documentElement.style.setProperty('--color-session-border', darkColorSessionBorder); - document.documentElement.style.setProperty( - '--color-session-border-color', - darkColorSessionBorderColor - ); + document.documentElement.style.setProperty('--color-session-border', darkColorSessionBorderColor); document.documentElement.style.setProperty( '--color-recovery-phrase-banner-background', darkColorRecoveryPhraseBannerBg @@ -72,12 +96,54 @@ export const switchHtmlToDarkTheme = () => { '--color-quote-bottom-bar-background', darkColorQuoteBottomBarBg ); + document.documentElement.style.setProperty('--color-cell-background', darkColorCellBackground); + document.documentElement.style.setProperty( + '--color-received-message-text', + darkColorReceivedMessageText + ); + document.documentElement.style.setProperty( + '--color-received-message-background', + darkColorReceivedMessageBg + ); + document.documentElement.style.setProperty('--color-pill-divider-text', darkColorPillDividerText); + document.documentElement.style.setProperty('--color-input-background', darkInputBackground); + + document.documentElement.style.setProperty('--filter-session-text', darkFilterSessionText); + document.documentElement.style.setProperty('--border-unread', darkUnreadBorder); + + document.documentElement.style.setProperty('--color-scroll-bar-thumb', darkScrollbarThumb); + document.documentElement.style.setProperty('--color-scroll-bar-track', darkScrollbarTrack); + document.documentElement.style.setProperty( + '--color-fake-chat-bubble-background', + darkFakeChatBubbleBg + ); + document.documentElement.style.setProperty('--color-inbox-background', darkInboxBackground); + document.documentElement.style.setProperty( + '--color-left-pane-overlay-background', + darkLeftPaneOverlayBg + ); + document.documentElement.style.setProperty( + '--color-conversation-item-selected', + darkConversationItemSelected + ); + document.documentElement.style.setProperty( + '--color-conversation-item-has-unread', + darkConversationItemHasUnread + ); + document.documentElement.style.setProperty('--color-conversation-list', darkConversationList); + + document.documentElement.style.setProperty('--color-text-highlight', darkTextHighlight); + document.documentElement.style.setProperty('--color-foreground-primary', darkForegroundPrimary); + document.documentElement.style.setProperty('--color-background-primary', darkBackgroundPrimary); + document.documentElement.style.setProperty('--color-button-green', darkButtonGreen); + document.documentElement.style.setProperty('--color-modal-background', darkModalBackground); }; // LIGHT COLORS const lightColorAccent = accentLightTheme; const lightColorAccentButton = black; const lightColorText = black; +const lightColorTextOpposite = white; const lightColorTextSubtle = `${black}99`; const lightColorTextAccent = '#00c769'; const lightColorSessionShadow = `0 0 4px 0 ${black}5E`; @@ -92,6 +158,31 @@ const lightColorPillDivider = `${black}1A`; const lightColorLastSeenIndicator = '#62656a'; const lightColorLastSeenIndicatorText = '#070c14'; const lightColorQuoteBottomBarBg = '#f0f0f0'; +const lightColorCellBackground = '#f9f9f9'; +const lightColorReceivedMessageBg = '#f5f5f5'; +const lightColorReceivedMessageText = black; + +const lightColorPillDividerText = '#555555'; + +const lightInputBackground = '#efefef'; +const lightFilterSessionText = 'brightness(0) saturate(100%)'; +const lightUnreadBorder = `4px solid ${accentLightTheme}`; + +const lightScrollbarThumb = '#474646'; +const lightScrollbarTrack = '#fcfcfc'; +const lightFakeChatBubbleBg = '#f5f5f5'; + +const lightInboxBackground = white; +const lightLeftPaneOverlayBg = lightInboxBackground; +const lightConversationItemSelected = '#f0f0f0'; +const lightConversationItemHasUnread = '#fcfcfc'; +const lightConversationList = '#f9f9f9'; + +const lightTextHighlight = accentLightTheme; +const lightForegroundPrimary = white; +const lightBackgroundPrimary = '#272726'; +const lightButtonGreen = '#272726'; +const lightModalBackground = '#fcfcfc'; export const switchHtmlToLightTheme = () => { document.documentElement.style.setProperty('--color-accent', lightColorAccent); @@ -99,9 +190,11 @@ export const switchHtmlToLightTheme = () => { document.documentElement.style.setProperty('--color-text', lightColorText); document.documentElement.style.setProperty('--color-text-subtle', lightColorTextSubtle); document.documentElement.style.setProperty('--color-text-accent', lightColorTextAccent); + document.documentElement.style.setProperty('--color-text-opposite', lightColorTextOpposite); + document.documentElement.style.setProperty('--color-session-shadow', lightColorSessionShadow); document.documentElement.style.setProperty( - '--color-compose-view-background', + '--color-compose-view-button-background', lightColorComposeViewBg ); document.documentElement.style.setProperty( @@ -118,7 +211,7 @@ export const switchHtmlToLightTheme = () => { ); document.documentElement.style.setProperty('--color-session-border', lightColorSessionBorder); document.documentElement.style.setProperty( - '--color-session-border-color', + '--color-session-border', lightColorSessionBorderColor ); document.documentElement.style.setProperty( @@ -138,6 +231,49 @@ export const switchHtmlToLightTheme = () => { '--color-quote-bottom-bar-background', lightColorQuoteBottomBarBg ); + document.documentElement.style.setProperty('--color-cell-background', lightColorCellBackground); + document.documentElement.style.setProperty( + '--color-received-message-text', + lightColorReceivedMessageText + ); + document.documentElement.style.setProperty( + '--color-received-message-background', + lightColorReceivedMessageBg + ); + document.documentElement.style.setProperty( + '--color-pill-divider-text', + lightColorPillDividerText + ); + document.documentElement.style.setProperty('--color-input-background', lightInputBackground); + document.documentElement.style.setProperty('--filter-session-text', lightFilterSessionText); + document.documentElement.style.setProperty('--border-unread', lightUnreadBorder); + + document.documentElement.style.setProperty('--color-scroll-bar-thumb', lightScrollbarThumb); + document.documentElement.style.setProperty('--color-scroll-bar-track', lightScrollbarTrack); + document.documentElement.style.setProperty( + '--color-fake-chat-bubble-background', + lightFakeChatBubbleBg + ); + document.documentElement.style.setProperty('--color-inbox-background', lightInboxBackground); + document.documentElement.style.setProperty( + '--color-left-pane-overlay-background', + lightLeftPaneOverlayBg + ); + document.documentElement.style.setProperty( + '--color-conversation-item-selected', + lightConversationItemSelected + ); + document.documentElement.style.setProperty( + '--color-conversation-item-has-unread', + lightConversationItemHasUnread + ); + document.documentElement.style.setProperty('--color-conversation-list', lightConversationList); + + document.documentElement.style.setProperty('--color-text-highlight', lightTextHighlight); + document.documentElement.style.setProperty('--color-foreground-primary', lightForegroundPrimary); + document.documentElement.style.setProperty('--color-background-primary', lightBackgroundPrimary); + document.documentElement.style.setProperty('--color-button-green', lightButtonGreen); + document.documentElement.style.setProperty('--color-modal-background', lightModalBackground); }; // default to dark theme @@ -147,18 +283,24 @@ export const SessionGlobalStyles = createGlobalStyle` --font-default: 'Roboto'; --font-font-accent: 'Loor'; --font-font-mono: 'SpaceMono'; - --font-size-xs: '11px'; - --font-size-sm: '13px'; - --font-size-md: '15px'; + --font-size-xs: 11px; + --font-size-sm: 13px; + --font-size-md: 15px; /* MARGINS */ - --margins-xs: '5px'; - --margins-sm: '10px'; - --margins-md: '15px'; - --margins-lg: '20px'; + --margins-xs: 5px; + --margins-sm: 10px; + --margins-md: 15px; + --margins-lg: 20px; /* ANIMATIONS */ --default-duration: '0.25s'; + /* FILTERS */ + --filter-session-text: ${darkFilterSessionText}; + /* BORDERS */ + --border-unread: ${darkUnreadBorder}; + --border-session: ${darkColorSessionBorder}; + /* COLORS NOT CHANGING BETWEEN THEMES */ --color-warning: ${warning}; --color-destructive: ${destructive}; @@ -169,19 +311,37 @@ export const SessionGlobalStyles = createGlobalStyle` --color-text: ${darkColorText}; --color-text-subtle: ${darkColorTextSubtle}; --color-text-accent: ${darkColorTextAccent}; + --color-text-opposite: ${darkColorTextOpposite}; --color-session-shadow: ${darkColorSessionShadow}; - --color-compose-view-background: ${darkColorComposeViewBg}; + --color-compose-view-button-background: ${darkColorComposeViewBg}; --color-sent-message-background: ${darkColorSentMessageBg}; --color-sent-message-text: ${darkColorSentMessageText}; --color-clickable-hovered: ${darkColorClickableHovered}; - --color-session-border: ${darkColorSessionBorder}; - --color-session-border-color: ${darkColorSessionBorderColor}; + --color-session-border: ${darkColorSessionBorderColor}; --color-recovery-phrase-banner-background: ${darkColorRecoveryPhraseBannerBg}; --color-pill-divider: ${darkColorPillDivider}; --color-last-seen-indicator: ${darkColorLastSeenIndicator}; --color-last-seen-indicator-text: ${darkColorLastSeenIndicatorText}; --color-quote-bottom-bar-background: ${darkColorQuoteBottomBarBg}; + --color-cell-background: ${darkColorCellBackground}; + --color-pill-divider-text: ${darkColorPillDividerText}; + --color-input-background: ${darkInputBackground}; + --color-scroll-bar-thumb: ${darkScrollbarThumb}; + --color-scroll-bar-track: ${darkScrollbarTrack}; + --color-fake-chat-bubble-background: ${darkFakeChatBubbleBg}; + --color-inbox-background: ${darkInboxBackground}; + --color-left-pane-overlay-background: ${darkLeftPaneOverlayBg}; + --color-conversation-item-selected: ${darkConversationItemSelected}; + --color-conversation-item-has-unread: ${darkConversationItemHasUnread}; + --color-conversation-list: ${darkConversationList}; + --color-text-highlight: ${darkTextHighlight}; + --color-foreground-primary: ${darkForegroundPrimary}; + --color-background-primary: ${darkBackgroundPrimary}; + --color-button-green: ${darkButtonGreen}; + --color-modal-background: ${darkModalBackground}; + + }; `; diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts index 265d66678..61fe507a3 100644 --- a/ts/state/selectors/conversations.ts +++ b/ts/state/selectors/conversations.ts @@ -976,6 +976,7 @@ export const getGenericReadableMessageSelectorProps = createSelector( conversationType, expirationLength, expirationTimestamp, + isExpired, isUnread, receivedAt, isKickedFromGroup, @@ -987,6 +988,8 @@ export const getGenericReadableMessageSelectorProps = createSelector( expirationLength, expirationTimestamp, isUnread, + isExpired, + convoId: props.propsForMessage.convoId, receivedAt, isKickedFromGroup, };