From 10c53bddb01fa1a0185285c68525390edb38820d Mon Sep 17 00:00:00 2001 From: Scott Nonnenberg Date: Tue, 25 Sep 2018 17:26:06 -0700 Subject: [PATCH] Move to new colors, switch incoming/outgoing colors --- js/background.js | 2 +- js/models/conversations.js | 8 +- js/models/messages.js | 6 +- js/views/app_view.js | 7 - js/views/identicon_svg_view.js | 27 +- stylesheets/_index.scss | 6 +- stylesheets/_ios.scss | 440 ------------------ stylesheets/_modules.scss | 410 ++++++++-------- stylesheets/_theme_dark.scss | 399 +++++++++------- stylesheets/_variables.scss | 103 +++- stylesheets/manifest.scss | 1 - ts/components/conversation/EmbeddedContact.md | 86 ++-- ts/components/conversation/ExpireTimer.md | 45 +- ts/components/conversation/Message.md | 358 ++++++++++---- ts/components/conversation/Message.tsx | 23 +- ts/components/conversation/MessageDetail.md | 8 +- ts/components/conversation/Quote.md | 266 ++++------- ts/components/conversation/Quote.tsx | 14 +- ts/components/conversation/Timestamp.md | 80 ++-- ts/styleguide/ConversationContext.tsx | 7 +- ts/styleguide/StyleGuideUtil.ts | 3 +- ts/util/migrateColor.ts | 50 +- 22 files changed, 1116 insertions(+), 1233 deletions(-) delete mode 100644 stylesheets/_ios.scss diff --git a/js/background.js b/js/background.js index 9f820beb0..12eeeb83b 100644 --- a/js/background.js +++ b/js/background.js @@ -768,7 +768,6 @@ if (firstRun === true && deviceId !== '1') { const hasThemeSetting = Boolean(storage.get('theme-setting')); if (!hasThemeSetting && textsecure.storage.get('userAgent') === 'OWI') { - storage.put('theme-setting', 'ios'); onChangeTheme(); } const syncRequest = new textsecure.SyncRequest( @@ -961,6 +960,7 @@ const updates = { name: details.name, members: details.members, + color: details.color, type: 'group', }; diff --git a/js/models/conversations.js b/js/models/conversations.js index 071f04a7a..099d4dab1 100644 --- a/js/models/conversations.js +++ b/js/models/conversations.js @@ -37,19 +37,15 @@ const COLORS = [ 'red', + 'deep_orange', + 'brown', 'pink', 'purple', - 'deep_purple', 'indigo', 'blue', - 'light_blue', - 'cyan', 'teal', 'green', 'light_green', - 'orange', - 'deep_orange', - 'amber', 'blue_grey', ]; diff --git a/js/models/messages.js b/js/models/messages.js index 3be7b90b1..924289cfa 100644 --- a/js/models/messages.js +++ b/js/models/messages.js @@ -394,7 +394,6 @@ const contact = this.findAndFormatContact(phoneNumber); const contactModel = this.findContact(phoneNumber); - const authorColor = contactModel ? contactModel.getColor() : null; const authorAvatar = contactModel ? contactModel.getAvatar() : null; const authorAvatarPath = authorAvatar ? authorAvatar.url : null; @@ -407,6 +406,7 @@ const conversation = this.getConversation(); const isGroup = conversation && !conversation.isPrivate(); + const conversationColor = conversation && conversation.getColor(); const attachments = this.get('attachments'); const firstAttachment = attachments && attachments[0]; @@ -421,7 +421,7 @@ authorName: contact.name, authorProfileName: contact.profileName, authorPhoneNumber: contact.phoneNumber, - authorColor, + conversationColor, conversationType: isGroup ? 'group' : 'direct', attachment: this.getPropsForAttachment(firstAttachment), quote: this.getPropsForQuote(), @@ -536,7 +536,6 @@ const authorPhoneNumber = author; const authorProfileName = contact ? contact.getProfileName() : null; const authorName = contact ? contact.getName() : null; - const authorColor = contact ? contact.getColor() : 'grey'; const isFromMe = contact ? contact.id === this.OUR_NUMBER : false; const onClick = () => { this.trigger('scroll-to-message', { @@ -557,7 +556,6 @@ authorPhoneNumber, authorProfileName, authorName, - authorColor, onClick, referencedMessageNotFound, }; diff --git a/js/views/app_view.js b/js/views/app_view.js index 1db6314e3..65dc701c3 100644 --- a/js/views/app_view.js +++ b/js/views/app_view.js @@ -21,18 +21,11 @@ openInbox: 'openInbox', }, applyTheme() { - const iOS = storage.get('userAgent') === 'OWI'; const theme = storage.get('theme-setting') || 'light'; this.$el .removeClass('light-theme') .removeClass('dark-theme') .addClass(`${theme}-theme`); - - if (iOS) { - this.$el.addClass('ios-theme'); - } else { - this.$el.removeClass('ios-theme'); - } }, applyHideMenu() { const hideMenuBar = storage.get('hide-menu-bar', false); diff --git a/js/views/identicon_svg_view.js b/js/views/identicon_svg_view.js index e044f0bd4..2ff381bf1 100644 --- a/js/views/identicon_svg_view.js +++ b/js/views/identicon_svg_view.js @@ -42,20 +42,17 @@ }); const COLORS = { - red: '#EF5350', - pink: '#EC407A', - purple: '#AB47BC', - deep_purple: '#7E57C2', - indigo: '#5C6BC0', - blue: '#2196F3', - light_blue: '#03A9F4', - cyan: '#00BCD4', - teal: '#009688', - green: '#4CAF50', - light_green: '#7CB342', - orange: '#FF9800', - deep_orange: '#FF5722', - amber: '#FFB300', - blue_grey: '#607D8B', + red: '#cc163d', + deep_orange: '#c73800', + brown: '#746c53', + pink: '#a23474', + purple: '#862caf', + indigo: '#5951c8', + blue: '#336ba3', + teal: '#067589', + green: '#3b7845', + light_green: '#895d66', + blue_grey: '#607d8b', + grey: '#6b6b78', }; })(); diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss index ef7111075..f655c8fd6 100644 --- a/stylesheets/_index.scss +++ b/stylesheets/_index.scss @@ -19,14 +19,14 @@ } .gutter { - background-color: $color-black-008-no-tranparency; + background-color: $color-gray-02; ::-webkit-scrollbar-track { - background: $color-black-008-no-tranparency; + background: $color-gray-02; } ::-webkit-scrollbar-thumb { - border: 2px solid $color-black-008-no-tranparency; + border: 2px solid $color-gray-02; } float: left; diff --git a/stylesheets/_ios.scss b/stylesheets/_ios.scss deleted file mode 100644 index fcc331b92..000000000 --- a/stylesheets/_ios.scss +++ /dev/null @@ -1,440 +0,0 @@ -// When paired with an iOS device, this stylesheet will apply - -.ios-theme { - // _modules - - .module-message__container--outgoing { - background-color: $color-signal-blue; - color: $color-white; - } - - .module-message__container--incoming { - background-color: $color-light-10; - color: $color-light-90; - } - - .module-message__container--incoming-grey { - background-color: $color-light-10; - } - .module-message__container--incoming-blue { - background-color: $color-light-10; - } - .module-message__container--incoming-cyan { - background-color: $color-light-10; - } - .module-message__container--incoming-deep_orange { - background-color: $color-light-10; - } - .module-message__container--incoming-green { - background-color: $color-light-10; - } - .module-message__container--incoming-indigo { - background-color: $color-light-10; - } - .module-message__container--incoming-pink { - background-color: $color-light-10; - } - .module-message__container--incoming-purple { - background-color: $color-light-10; - } - .module-message__container--incoming-red { - background-color: $color-light-10; - } - .module-message__container--incoming-teal { - background-color: $color-light-10; - } - - .module-message__author { - color: $color-light-90; - } - - .module-message__text { - color: $color-white; - font-size: 14px; - a { - text-decoration: underline; - color: $color-white; - } - } - - .module-message__text--incoming { - color: $color-light-90; - a { - text-decoration: underline; - color: $color-light-90; - } - } - - .module-message__metadata__date { - color: $color-white-07; - } - .module-message__metadata__date--incoming { - color: $color-light-45; - } - .module-message__metadata__date--with-image-no-caption { - color: $color-white; - } - - .module-message__metadata__status-icon--sending { - @include color-svg('../images/sending.svg', $color-white); - } - - .module-message__metadata__status-icon--sent { - @include color-svg('../images/check-circle-outline.svg', $color-white-07); - } - .module-message__metadata__status-icon--delivered { - @include color-svg('../images/double-check.svg', $color-white-07); - } - .module-message__metadata__status-icon--read { - @include color-svg('../images/read.svg', $color-white-07); - } - - .module-message__metadata__status-icon--with-image-no-caption { - background-color: $color-white; - } - - .module-message__broken-image { - color: $color-white; - } - - .module-message__broken-image--incoming { - color: $color-light-90; - } - - .module-message__broken-video-screenshot { - color: $color-white; - } - - .module-message__broken-video-screenshot--incoming { - color: $color-light-90; - } - - .module-message__generic-attachment__file-name { - color: $color-white; - } - - .module-message__generic-attachment__file-name--incoming { - color: $color-light-90; - } - - .module-message__generic-attachment__file-size { - color: $color-white; - } - - .module-message__generic-attachment__file-size--incoming { - color: $color-light-90; - } - - .module-expire-timer { - background-color: $color-white-07; - } - - .module-expire-timer--incoming { - background-color: $color-light-45; - } - - .module-quote--incoming { - background-color: $color-signal-blue-025; - border-left-color: $color-signal-blue; - } - - .module-quote--outgoing-you { - border-left-color: $color-white; - background-color: $color-white-06; - } - .module-quote--outgoing-grey { - border-left-color: $color-white; - background-color: $color-white-06; - } - .module-quote--outgoing-blue { - border-left-color: $color-white; - background-color: $color-white-06; - } - .module-quote--outgoing-cyan { - border-left-color: $color-white; - background-color: $color-white-06; - } - .module-quote--outgoing-deep_orange { - border-left-color: $color-white; - background-color: $color-white-06; - } - .module-quote--outgoing-green { - border-left-color: $color-white; - background-color: $color-white-06; - } - .module-quote--outgoing-indigo { - border-left-color: $color-white; - background-color: $color-white-06; - } - .module-quote--outgoing-pink { - border-left-color: $color-white; - background-color: $color-white-06; - } - .module-quote--outgoing-purple { - border-left-color: $color-white; - background-color: $color-white-06; - } - .module-quote--outgoing-red { - border-left-color: $color-white; - background-color: $color-white-06; - } - .module-quote--outgoing-teal { - border-left-color: $color-white; - background-color: $color-white-06; - } - - .module-quote__primary__author--grey { - color: $color-light-90; - } - .module-quote__primary__author--blue { - color: $color-light-90; - } - .module-quote__primary__author--cyan { - color: $color-light-90; - } - .module-quote__primary__author--deep_orange { - color: $color-light-90; - } - .module-quote__primary__author--green { - color: $color-light-90; - } - .module-quote__primary__author--indigo { - color: $color-light-90; - } - .module-quote__primary__author--pink { - color: $color-light-90; - } - .module-quote__primary__author--purple { - color: $color-light-90; - } - .module-quote__primary__author--red { - color: $color-light-90; - } - .module-quote__primary__author--teal { - color: $color-light-90; - } - - .module-quote__reference-warning--incoming { - background-color: $color-signal-blue-mix; - } - - // When you're composing a new quote - .bottom-bar { - .module-quote { - background-color: $color-signal-blue-025; - border-left-color: $color-signal-blue; - } - } - - .module-embedded-contact__contact-name { - color: $color-white; - } - - .module-embedded-contact__contact-method { - color: $color-white-07; - } - - .module-embedded-contact__contact-name--incoming { - color: $color-light-90; - } - - .module-embedded-contact__contact-method--incoming { - color: $color-light-60; - } - - &.dark-theme { - // _modules - - .module-message__container--incoming { - background-color: $color-dark-70; - color: $color-white; - } - - .module-message__container--incoming-grey { - background-color: $color-dark-70; - } - .module-message__container--incoming-blue { - background-color: $color-dark-70; - } - .module-message__container--incoming-cyan { - background-color: $color-dark-70; - } - .module-message__container--incoming-deep_orange { - background-color: $color-dark-70; - } - .module-message__container--incoming-green { - background-color: $color-dark-70; - } - .module-message__container--incoming-indigo { - background-color: $color-dark-70; - } - .module-message__container--incoming-pink { - background-color: $color-dark-70; - } - .module-message__container--incoming-purple { - background-color: $color-dark-70; - } - .module-message__container--incoming-red { - background-color: $color-dark-70; - } - .module-message__container--incoming-teal { - background-color: $color-dark-70; - } - - .module-message__author { - color: $color-white; - } - - .module-message__text--incoming { - color: $color-white; - a { - text-decoration: underline; - color: $color-white; - } - } - - .module-message__metadata__date--incoming { - color: $color-white-07; - } - - .module-message__broken-image--incoming { - color: $color-white; - } - .module-message__broken-video-screenshot--incoming { - color: $color-white; - } - .module-message__generic-attachment__file-name--incoming { - color: $color-white; - } - .module-message__generic-attachment__file-size--incoming { - color: $color-white; - } - - .module-expire-timer--incoming { - background-color: $color-white-07; - } - - .module-quote__primary__author { - color: $color-light-90; - } - - .module-quote__primary__author--grey { - color: $color-light-90; - } - .module-quote__primary__author--blue { - color: $color-light-90; - } - .module-quote__primary__author--cyan { - color: $color-light-90; - } - .module-quote__primary__author--deep_orange { - color: $color-light-90; - } - .module-quote__primary__author--green { - color: $color-light-90; - } - .module-quote__primary__author--indigo { - color: $color-light-90; - } - .module-quote__primary__author--pink { - color: $color-light-90; - } - .module-quote__primary__author--purple { - color: $color-light-90; - } - .module-quote__primary__author--red { - color: $color-light-90; - } - .module-quote__primary__author--teal { - color: $color-light-90; - } - - .module-quote__primary__text { - color: $color-light-90; - a { - color: $color-light-90; - } - } - - .module-quote__primary__type-label { - color: $color-light-90; - } - - .module-quote__primary__type-label--incoming { - color: $color-white; - } - - .module-quote__primary__author--incoming { - color: $color-white; - } - - .module-quote__primary__text--incoming { - color: $color-white; - a { - color: $color-white; - } - } - - .module-quote__generic-file__text { - color: $color-light-90; - } - - .module-quote__generic-file__text--incoming { - color: $color-white; - } - - .module-quote__reference-warning { - background-color: $color-white-04; - } - - .module-quote__reference-warning--incoming { - background-color: $color-signal-blue-050; - } - - .module-quote__reference-warning__text { - color: $color-light-90; - } - - .module-quote__reference-warning__text--incoming { - color: $color-white; - } - - .module-quote__reference-warning__icon { - @include color-svg('../images/broken-link.svg', $color-light-60); - } - - .module-quote__reference-warning__icon--incoming { - @include color-svg('../images/broken-link.svg', $color-white-085); - } - - // When you're composing a new quote - .bottom-bar { - .module-quote__primary__author { - color: $color-white; - } - - .module-quote__primary__type-label { - color: $color-white; - } - - .module-quote__generic-file__text { - color: $color-white; - } - - .module-quote__primary__text { - color: $color-white; - a { - color: $color-white; - } - } - } - - .module-embedded-contact__contact-name--incoming { - color: $color-white; - } - - .module-embedded-contact__contact-method--incoming { - color: $color-white-07; - } - } -} diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index e76af0045..c256a4847 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -156,45 +156,48 @@ padding-bottom: 10px; } -.module-message__container--outgoing { +.module-message__container--incoming { background-color: $color-light-10; } // In case the color gets messed up -.module-message__container--incoming { +.module-message__container--outgoing { background-color: $color-conversation-grey; } -.module-message__container--incoming-grey { - background-color: $color-conversation-grey; -} -.module-message__container--incoming-blue { - background-color: $color-conversation-blue; -} -.module-message__container--incoming-cyan { - background-color: $color-conversation-cyan; -} -.module-message__container--incoming-deep_orange { - background-color: $color-conversation-deep_orange; -} -.module-message__container--incoming-green { - background-color: $color-conversation-green; -} -.module-message__container--incoming-indigo { - background-color: $color-conversation-indigo; -} -.module-message__container--incoming-pink { - background-color: $color-conversation-pink; -} -.module-message__container--incoming-purple { - background-color: $color-conversation-purple; -} -.module-message__container--incoming-red { +.module-message__container--outgoing-red { background-color: $color-conversation-red; } -.module-message__container--incoming-teal { +.module-message__container--outgoing-deep_orange { + background-color: $color-conversation-deep_orange; +} +.module-message__container--outgoing-brown { + background-color: $color-conversation-brown; +} +.module-message__container--outgoing-pink { + background-color: $color-conversation-pink; +} +.module-message__container--outgoing-purple { + background-color: $color-conversation-purple; +} +.module-message__container--outgoing-indigo { + background-color: $color-conversation-indigo; +} +.module-message__container--outgoing-blue { + background-color: $color-conversation-blue; +} +.module-message__container--outgoing-teal { background-color: $color-conversation-teal; } +.module-message__container--outgoing-green { + background-color: $color-conversation-green; +} +.module-message__container--outgoing-light_green { + background-color: $color-conversation-light_green; +} +.module-message__container--outgoing-blue_grey { + background-color: $color-conversation-blue_grey; +} .module-message__attachment-container { // Entirely to ensure that images are centered if they aren't full width of bubble @@ -233,7 +236,7 @@ left: 0; right: 0; border-radius: 16px; - box-shadow: inset 0px 0px 0px 1px $color-black-02; + box-shadow: inset 0px 0px 0px 1px $color-black-015; } .module-message__img-border-overlay--with-content-below { @@ -383,7 +386,7 @@ } .module-message__generic-attachment__file-name { - color: $color-light-90; + color: $color-white; font-size: 14px; line-height: 18px; font-weight: 300; @@ -396,11 +399,11 @@ } .module-message__generic-attachment__file-name--incoming { - color: $color-white; + color: $color-light-90; } .module-message__generic-attachment__file-size { - color: $color-light-90; + color: $color-white; font-size: 11px; line-height: 16px; letter-spacing: 0.3px; @@ -408,11 +411,11 @@ } .module-message__generic-attachment__file-size--incoming { - color: $color-white; + color: $color-light-90; } .module-message__author { - color: $color-white; + color: $color-light-90; font-size: 13px; font-weight: 300; line-height: 18px; @@ -428,7 +431,7 @@ } .module-message__text { - color: $color-light-90; + color: $color-white; font-size: 14px; line-height: 18px; text-align: start; @@ -440,15 +443,15 @@ a { text-decoration: underline; - color: $color-light-90; + color: $color-white; } } .module-message__text--incoming { - color: $color-white; + color: $color-light-90; a { text-decoration: underline; - color: $color-white; + color: $color-light-90; } } @@ -480,11 +483,11 @@ font-size: 11px; line-height: 16px; letter-spacing: 0.3px; - color: $color-light-60; + color: $color-white-08; text-transform: uppercase; } .module-message__metadata__date--incoming { - color: $color-white-07; + color: $color-light-60; } .module-message__metadata__date--with-image-no-caption { color: $color-white; @@ -515,14 +518,14 @@ } .module-message__metadata__status-icon--sent { - @include color-svg('../images/check-circle-outline.svg', $color-light-35); + @include color-svg('../images/check-circle-outline.svg', $color-white-08); } .module-message__metadata__status-icon--delivered { - @include color-svg('../images/double-check.svg', $color-light-35); + @include color-svg('../images/double-check.svg', $color-white-08); width: 18px; } .module-message__metadata__status-icon--read { - @include color-svg('../images/read.svg', $color-light-35); + @include color-svg('../images/read.svg', $color-white-08); width: 18px; } @@ -579,25 +582,19 @@ flex-direction: row; align-items: center; text-align: center; -} -.module-message__author-default-avatar--grey { + // Default, in case we have no color background-color: $color-conversation-grey; } -.module-message__author-default-avatar--blue { - background-color: $color-conversation-blue; -} -.module-message__author-default-avatar--cyan { - background-color: $color-conversation-cyan; + +.module-message__author-default-avatar--red { + background-color: $color-conversation-red; } .module-message__author-default-avatar--deep_orange { background-color: $color-conversation-deep_orange; } -.module-message__author-default-avatar--green { - background-color: $color-conversation-green; -} -.module-message__author-default-avatar--indigo { - background-color: $color-conversation-indigo; +.module-message__author-default-avatar--brown { + background-color: $color-conversation-brown; } .module-message__author-default-avatar--pink { background-color: $color-conversation-pink; @@ -605,12 +602,24 @@ .module-message__author-default-avatar--purple { background-color: $color-conversation-purple; } -.module-message__author-default-avatar--red { - background-color: $color-conversation-red; +.module-message__author-default-avatar--indigo { + background-color: $color-conversation-indigo; +} +.module-message__author-default-avatar--blue { + background-color: $color-conversation-blue; } .module-message__author-default-avatar--teal { background-color: $color-conversation-teal; } +.module-message__author-default-avatar--green { + background-color: $color-conversation-green; +} +.module-message__author-default-avatar--light_green { + background-color: $color-conversation-light_green; +} +.module-message__author-default-avatar--blue_grey { + background-color: $color-conversation-blue_grey; +} .module-message__author-default-avatar__label { width: 100%; @@ -722,53 +731,90 @@ } .module-quote--incoming { - background-color: $color-white-075; - border-left-color: $color-white; + border-left-color: $color-conversation-grey; + background-color: $color-conversation-grey-tint; +} +.module-quote--incoming-red { + border-left-color: $color-conversation-red; + background-color: $color-conversation-red-tint; +} +.module-quote--incoming-deep_orange { + border-left-color: $color-conversation-deep_orange; + background-color: $color-conversation-deep_orange-tint; +} +.module-quote--incoming-brown { + border-left-color: $color-conversation-brown; + background-color: $color-conversation-brown-tint; +} +.module-quote--incoming-pink { + border-left-color: $color-conversation-pink; + background-color: $color-conversation-pink-tint; +} +.module-quote--incoming-purple { + border-left-color: $color-conversation-purple; + background-color: $color-conversation-purple-tint; +} +.module-quote--incoming-indigo { + border-left-color: $color-conversation-indigo; + background-color: $color-conversation-indigo-tint; +} +.module-quote--incoming-blue { + border-left-color: $color-conversation-blue; + background-color: $color-conversation-blue-tint; +} +.module-quote--incoming-teal { + border-left-color: $color-conversation-teal; + background-color: $color-conversation-teal-tint; +} +.module-quote--incoming-green { + border-left-color: $color-conversation-green; + background-color: $color-conversation-green-tint; +} +.module-quote--incoming-light_green { + border-left-color: $color-conversation-light_green; + background-color: $color-conversation-light_green-tint; +} +.module-quote--incoming-blue_grey { + border-left-color: $color-conversation-blue_grey; + background-color: $color-conversation-blue_grey-tint; } -.module-quote--outgoing-you { - border-left-color: $color-light-35; - background-color: $color-light-02; -} -.module-quote--outgoing-grey { - border-left-color: $color-conversation-grey; - background-color: rgba($color-conversation-grey, 0.25); -} -.module-quote--outgoing-blue { - border-left-color: $color-conversation-blue; - background-color: rgba($color-conversation-blue, 0.25); -} -.module-quote--outgoing-cyan { - border-left-color: $color-conversation-cyan; - background-color: rgba($color-conversation-cyan, 0.25); -} -.module-quote--outgoing-deep_orange { - border-left-color: $color-conversation-deep_orange; - background-color: rgba($color-conversation-deep_orange, 0.25); -} -.module-quote--outgoing-green { - border-left-color: $color-conversation-green; - background-color: rgba($color-conversation-green, 0.25); -} -.module-quote--outgoing-indigo { - border-left-color: $color-conversation-indigo; - background-color: rgba($color-conversation-indigo, 0.25); -} -.module-quote--outgoing-pink { - border-left-color: $color-conversation-pink; - background-color: rgba($color-conversation-pink, 0.25); -} -.module-quote--outgoing-purple { - border-left-color: $color-conversation-purple; - background-color: rgba($color-conversation-purple, 0.25); +.module-quote--outgoing { + border-left-color: $color-white; + background-color: $color-conversation-grey-tint; } .module-quote--outgoing-red { - border-left-color: $color-conversation-red; - background-color: rgba($color-conversation-red, 0.25); + background-color: $color-conversation-red-tint; +} +.module-quote--outgoing-deep_orange { + background-color: $color-conversation-deep_orange-tint; +} +.module-quote--outgoing-brown { + background-color: $color-conversation-brown-tint; +} +.module-quote--outgoing-pink { + background-color: $color-conversation-pink-tint; +} +.module-quote--outgoing-purple { + background-color: $color-conversation-purple-tint; +} +.module-quote--outgoing-indigo { + background-color: $color-conversation-indigo-tint; +} +.module-quote--outgoing-blue { + background-color: $color-conversation-blue-tint; } .module-quote--outgoing-teal { - border-left-color: $color-conversation-teal; - background-color: rgba($color-conversation-teal, 0.25); + background-color: $color-conversation-teal-tint; +} +.module-quote--outgoing-green { + background-color: $color-conversation-green-tint; +} +.module-quote--outgoing-light_green { + background-color: $color-conversation-light_green-tint; +} +.module-quote--outgoing-blue_grey { + background-color: $color-conversation-blue_grey-tint; } .module-quote__primary { @@ -792,37 +838,6 @@ text-overflow: ellipsis; } -.module-quote__primary__author--grey { - color: $color-conversation-grey; -} -.module-quote__primary__author--blue { - color: $color-conversation-blue; -} -.module-quote__primary__author--cyan { - color: $color-conversation-cyan; -} -.module-quote__primary__author--deep_orange { - color: $color-conversation-deep_orange; -} -.module-quote__primary__author--green { - color: $color-conversation-green; -} -.module-quote__primary__author--indigo { - color: $color-conversation-indigo; -} -.module-quote__primary__author--pink { - color: $color-conversation-pink; -} -.module-quote__primary__author--purple { - color: $color-conversation-purple; -} -.module-quote__primary__author--red { - color: $color-conversation-red; -} -.module-quote__primary__author--teal { - color: $color-conversation-teal; -} - .module-quote__primary__profile-name { font-style: italic; } @@ -1053,7 +1068,7 @@ line-height: 18px; font-weight: 300; margin-top: 6px; - color: $color-light-90; + color: $color-white; max-width: 100%; white-space: nowrap; @@ -1062,7 +1077,7 @@ } .module-embedded-contact__contact-name--incoming { - color: $color-white; + color: $color-light-90; } .module-embedded-contact__contact-method { @@ -1070,7 +1085,7 @@ line-height: 16px; letter-spacing: 0.3px; margin-top: 3px; - color: $color-light-60; + color: $color-white-07; max-width: 100%; white-space: nowrap; @@ -1079,7 +1094,7 @@ } .module-embedded-contact__contact-method--incoming { - color: $color-white-07; + color: $color-light-60; } // Module: Contact Detail @@ -1374,23 +1389,14 @@ background-color: $color-conversation-grey; } -.module-contact-list-item__avatar-default--grey { - background-color: $color-conversation-grey; -} -.module-contact-list-item__avatar-default--blue { - background-color: $color-conversation-blue; -} -.module-contact-list-item__avatar-default--cyan { - background-color: $color-conversation-cyan; +.module-contact-list-item__avatar-default--red { + background-color: $color-conversation-red; } .module-contact-list-item__avatar-default--deep_orange { background-color: $color-conversation-deep_orange; } -.module-contact-list-item__avatar-default--green { - background-color: $color-conversation-green; -} -.module-contact-list-item__avatar-default--indigo { - background-color: $color-conversation-indigo; +.module-contact-list-item__avatar-default--brown { + background-color: $color-conversation-brown; } .module-contact-list-item__avatar-default--pink { background-color: $color-conversation-pink; @@ -1398,12 +1404,24 @@ .module-contact-list-item__avatar-default--purple { background-color: $color-conversation-purple; } -.module-contact-list-item__avatar-default--red { - background-color: $color-conversation-red; +.module-contact-list-item__avatar-default--indigo { + background-color: $color-conversation-indigo; +} +.module-contact-list-item__avatar-default--blue { + background-color: $color-conversation-blue; } .module-contact-list-item__avatar-default--teal { background-color: $color-conversation-teal; } +.module-contact-list-item__avatar-default--green { + background-color: $color-conversation-green; +} +.module-contact-list-item__avatar-default--light_green { + background-color: $color-conversation-light_green; +} +.module-contact-list-item__avatar-default--blue_grey { + background-color: $color-conversation-blue_grey; +} .module-contact-list-item__avatar-default__label { width: 100%; @@ -1504,20 +1522,14 @@ text-align: center; } -.module-conversation-header___default-avatar--blue { - background-color: $color-conversation-blue; -} -.module-conversation-header___default-avatar--cyan { - background-color: $color-conversation-cyan; +.module-conversation-header___default-avatar--red { + background-color: $color-conversation-red; } .module-conversation-header___default-avatar--deep_orange { background-color: $color-conversation-deep_orange; } -.module-conversation-header___default-avatar--green { - background-color: $color-conversation-green; -} -.module-conversation-header___default-avatar--indigo { - background-color: $color-conversation-indigo; +.module-conversation-header___default-avatar--brown { + background-color: $color-conversation-brown; } .module-conversation-header___default-avatar--pink { background-color: $color-conversation-pink; @@ -1525,12 +1537,24 @@ .module-conversation-header___default-avatar--purple { background-color: $color-conversation-purple; } -.module-conversation-header___default-avatar--red { - background-color: $color-conversation-red; +.module-conversation-header___default-avatar--indigo { + background-color: $color-conversation-indigo; +} +.module-conversation-header___default-avatar--blue { + background-color: $color-conversation-blue; } .module-conversation-header___default-avatar--teal { background-color: $color-conversation-teal; } +.module-conversation-header___default-avatar--green { + background-color: $color-conversation-green; +} +.module-conversation-header___default-avatar--light_green { + background-color: $color-conversation-light_green; +} +.module-conversation-header___default-avatar--blue_grey { + background-color: $color-conversation-blue_grey; +} .module-conversation-header__title { margin-left: 8px; @@ -1666,20 +1690,14 @@ text-align: center; } -.module-message-detail__contact__default-avatar--blue { - background-color: $color-conversation-blue; -} -.module-message-detail__contact__default-avatar--cyan { - background-color: $color-conversation-cyan; +.module-message-detail__contact__default-avatar--red { + background-color: $color-conversation-red; } .module-message-detail__contact__default-avatar--deep_orange { background-color: $color-conversation-deep_orange; } -.module-message-detail__contact__default-avatar--green { - background-color: $color-conversation-green; -} -.module-message-detail__contact__default-avatar--indigo { - background-color: $color-conversation-indigo; +.module-message-detail__contact__default-avatar--brown { + background-color: $color-conversation-brown; } .module-message-detail__contact__default-avatar--pink { background-color: $color-conversation-pink; @@ -1687,12 +1705,24 @@ .module-message-detail__contact__default-avatar--purple { background-color: $color-conversation-purple; } -.module-message-detail__contact__default-avatar--red { - background-color: $color-conversation-red; +.module-message-detail__contact__default-avatar--indigo { + background-color: $color-conversation-indigo; +} +.module-message-detail__contact__default-avatar--blue { + background-color: $color-conversation-blue; } .module-message-detail__contact__default-avatar--teal { background-color: $color-conversation-teal; } +.module-message-detail__contact__default-avatar--green { + background-color: $color-conversation-green; +} +.module-message-detail__contact__default-avatar--light_green { + background-color: $color-conversation-light_green; +} +.module-message-detail__contact__default-avatar--blue_grey { + background-color: $color-conversation-blue_grey; +} .module-message-detail__contact__text { margin-left: 10px; @@ -1968,7 +1998,7 @@ cursor: pointer; &:hover { - background-color: $color-black-016-no-tranparency; + background-color: $color-gray-05; } } @@ -1978,7 +2008,7 @@ } .module-conversation-list-item--is-selected { - background-color: $color-black-016-no-tranparency; + background-color: $color-gray-05; } .module-conversation-list-item__avatar { @@ -2000,20 +2030,14 @@ background-color: $color-conversation-grey; } -.module-conversation-list-item__default-avatar--blue { - background-color: $color-conversation-blue; -} -.module-conversation-list-item__default-avatar--cyan { - background-color: $color-conversation-cyan; +.module-conversation-list-item__default-avatar--red { + background-color: $color-conversation-red; } .module-conversation-list-item__default-avatar--deep_orange { background-color: $color-conversation-deep_orange; } -.module-conversation-list-item__default-avatar--green { - background-color: $color-conversation-green; -} -.module-conversation-list-item__default-avatar--indigo { - background-color: $color-conversation-indigo; +.module-conversation-list-item__default-avatar--brown { + background-color: $color-conversation-brown; } .module-conversation-list-item__default-avatar--pink { background-color: $color-conversation-pink; @@ -2021,12 +2045,24 @@ .module-conversation-list-item__default-avatar--purple { background-color: $color-conversation-purple; } -.module-conversation-list-item__default-avatar--red { - background-color: $color-conversation-red; +.module-conversation-list-item__default-avatar--indigo { + background-color: $color-conversation-indigo; +} +.module-conversation-list-item__default-avatar--blue { + background-color: $color-conversation-blue; } .module-conversation-list-item__default-avatar--teal { background-color: $color-conversation-teal; } +.module-conversation-list-item__default-avatar--green { + background-color: $color-conversation-green; +} +.module-conversation-list-item__default-avatar--light_green { + background-color: $color-conversation-light_green; +} +.module-conversation-list-item__default-avatar--blue_grey { + background-color: $color-conversation-blue_grey; +} .module-conversation-list-item__content { flex-grow: 1; @@ -2094,6 +2130,8 @@ font-size: 13px; line-height: 18px; + color: $color-gray-60; + height: 1.3em; overflow: hidden; white-space: nowrap; diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index 75147420f..e48bd08d4 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -2,18 +2,18 @@ body.dark-theme { background-color: $color-black; - color: $color-dark-05; + color: $color-gray-95; } .dark-theme { // _conversation .conversation { - background-color: $color-black; + background-color: $color-gray-95; } .discussion-container { - background-color: $color-black; + background-color: $color-gray-95; } .key-verification { @@ -42,7 +42,7 @@ body.dark-theme { } form.send { - background-color: $color-black; + background-color: $color-gray-95; &.video-attachment { .outer { @@ -90,7 +90,7 @@ body.dark-theme { } .conversation-loading-screen { - background-color: $color-black; + background-color: $color-gray-95; } .module-last-seen-indicator__bar { @@ -157,7 +157,7 @@ body.dark-theme { // _emoji .ep-emojies { - background-color: $color-black; + background-color: $color-gray-95; } .ep-categories { @@ -200,7 +200,7 @@ body.dark-theme { } .dark-overlay { - background-color: $color-black; + background-color: $color-gray-95; } .title-bar { @@ -341,7 +341,7 @@ body.dark-theme { } .app-loading-screen { - background-color: $color-black; + background-color: $color-gray-95; .dot { border: 3px solid $blue; @@ -498,7 +498,7 @@ body.dark-theme { input.search { border: 1px solid $color-light-60; color: $color-dark-05; - background-color: $color-black; + background-color: $color-gray-95; &:focus { outline: solid 1px $blue; @@ -587,7 +587,7 @@ body.dark-theme { background-color: rgba(0, 0, 0, 0.3); .content { - background-color: $color-black; + background-color: $color-gray-95; box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); } } @@ -621,52 +621,55 @@ body.dark-theme { @include color-svg('../images/error.svg', $color-core-red); } - .module-message__container--outgoing { + .module-message__container--incoming { background-color: $color-dark-70; } // In case the color gets messed up - .module-message__container--incoming { + .module-message__container--outgoing { background-color: $color-conversation-grey; } - .module-message__container--incoming-grey { - background-color: $color-conversation-grey; - } - .module-message__container--incoming-blue { - background-color: $color-conversation-blue; - } - .module-message__container--incoming-cyan { - background-color: $color-conversation-cyan; - } - .module-message__container--incoming-deep_orange { - background-color: $color-conversation-deep_orange; - } - .module-message__container--incoming-green { - background-color: $color-conversation-green; - } - .module-message__container--incoming-indigo { - background-color: $color-conversation-indigo; - } - .module-message__container--incoming-pink { - background-color: $color-conversation-pink; - } - .module-message__container--incoming-purple { - background-color: $color-conversation-purple; - } - .module-message__container--incoming-red { + .module-message__container--outgoing-red { background-color: $color-conversation-red; } - .module-message__container--incoming-teal { + .module-message__container--outgoing-deep_orange { + background-color: $color-conversation-deep_orange; + } + .module-message__container--outgoing-brown { + background-color: $color-conversation-brown; + } + .module-message__container--outgoing-pink { + background-color: $color-conversation-pink; + } + .module-message__container--outgoing-purple { + background-color: $color-conversation-purple; + } + .module-message__container--outgoing-indigo { + background-color: $color-conversation-indigo; + } + .module-message__container--outgoing-blue { + background-color: $color-conversation-blue; + } + .module-message__container--outgoing-teal { background-color: $color-conversation-teal; } + .module-message__container--outgoing-green { + background-color: $color-conversation-green; + } + .module-message__container--outgoing-light_green { + background-color: $color-conversation-light_green; + } + .module-message__container--outgoing-blue_grey { + background-color: $color-conversation-blue_grey; + } .module-message__attachment-container { - background-color: $color-black; + background-color: $color-gray-95; } .module-message__img-border-overlay { - box-shadow: inset 0px 0px 0px 1px rgba($color-dark-30, 0.25); + box-shadow: inset 0px 0px 0px 1px $color-white-015; } .module-message__img-overlay { @@ -758,29 +761,29 @@ body.dark-theme { } .module-message__metadata__date { - color: $color-dark-30; + color: $color-white-08; } .module-message__metadata__date--incoming { - color: $color-white-07; + color: $color-white-08; } .module-message__metadata__date--with-image-no-caption { - color: $color-dark-05; + color: $color-white-08; } .module-message__metadata__status-icon--sending { - @include color-svg('../images/sending.svg', $color-light-35); + @include color-svg('../images/sending.svg', $color-white-08); } .module-message__metadata__status-icon--sent { - @include color-svg('../images/check-circle-outline.svg', $color-light-35); + @include color-svg('../images/check-circle-outline.svg', $color-white-08); } .module-message__metadata__status-icon--delivered { - @include color-svg('../images/double-check.svg', $color-light-35); + @include color-svg('../images/double-check.svg', $color-white-08); } .module-message__metadata__status-icon--read { - @include color-svg('../images/read.svg', $color-light-35); + @include color-svg('../images/read.svg', $color-white-08); } // When status indicators are overlaid on top of an image, they use different colors @@ -794,23 +797,14 @@ body.dark-theme { border: 1px solid $color-dark-60; } - .module-message__author-default-avatar--grey { - background-color: $color-conversation-grey; - } - .module-message__author-default-avatar--blue { - background-color: $color-conversation-blue; - } - .module-message__author-default-avatar--cyan { - background-color: $color-conversation-cyan; + .module-message__author-default-avatar--red { + background-color: $color-conversation-red; } .module-message__author-default-avatar--deep_orange { background-color: $color-conversation-deep_orange; } - .module-message__author-default-avatar--green { - background-color: $color-conversation-green; - } - .module-message__author-default-avatar--indigo { - background-color: $color-conversation-indigo; + .module-message__author-default-avatar--brown { + background-color: $color-conversation-brown; } .module-message__author-default-avatar--pink { background-color: $color-conversation-pink; @@ -818,12 +812,24 @@ body.dark-theme { .module-message__author-default-avatar--purple { background-color: $color-conversation-purple; } - .module-message__author-default-avatar--red { - background-color: $color-conversation-red; + .module-message__author-default-avatar--indigo { + background-color: $color-conversation-indigo; + } + .module-message__author-default-avatar--blue { + background-color: $color-conversation-blue; } .module-message__author-default-avatar--teal { background-color: $color-conversation-teal; } + .module-message__author-default-avatar--green { + background-color: $color-conversation-green; + } + .module-message__author-default-avatar--light_green { + background-color: $color-conversation-light_green; + } + .module-message__author-default-avatar--blue_grey { + background-color: $color-conversation-blue_grey; + } .module-message__author-default-avatar__label { color: $color-white; @@ -884,87 +890,127 @@ body.dark-theme { // Module: Quoted Reply .module-quote--incoming { - background-color: $color-black-04; - border-left-color: $color-black; + border-left-color: $color-conversation-grey; + background-color: $color-conversation-grey-shade; + } + .module-quote--incoming-red { + border-left-color: $color-conversation-red; + background-color: $color-conversation-red-shade; + } + .module-quote--incoming-deep_orange { + border-left-color: $color-conversation-deep_orange; + background-color: $color-conversation-deep_orange-shade; + } + .module-quote--incoming-brown { + border-left-color: $color-conversation-brown; + background-color: $color-conversation-brown-shade; + } + .module-quote--incoming-pink { + border-left-color: $color-conversation-pink; + background-color: $color-conversation-pink-shade; + } + .module-quote--incoming-purple { + border-left-color: $color-conversation-purple; + background-color: $color-conversation-purple-shade; + } + .module-quote--incoming-indigo { + border-left-color: $color-conversation-indigo; + background-color: $color-conversation-indigo-shade; + } + .module-quote--incoming-blue { + border-left-color: $color-conversation-blue; + background-color: $color-conversation-blue-shade; + } + .module-quote--incoming-teal { + border-left-color: $color-conversation-teal; + background-color: $color-conversation-teal-shade; + } + .module-quote--incoming-green { + border-left-color: $color-conversation-green; + background-color: $color-conversation-green-shade; + } + .module-quote--incoming-light_green { + border-left-color: $color-conversation-light_green; + background-color: $color-conversation-light_green-shade; + } + .module-quote--incoming-blue_grey { + border-left-color: $color-conversation-blue_grey; + background-color: $color-conversation-blue_grey-shade; } - .module-quote--outgoing-you { - border-left-color: $color-light-35; - background-color: $color-dark-60; - } - .module-quote--outgoing-grey { - border-left-color: $color-conversation-grey; - background-color: rgba($color-conversation-grey, 0.6); - } - .module-quote--outgoing-blue { - border-left-color: $color-conversation-blue; - background-color: rgba($color-conversation-blue, 0.6); - } - .module-quote--outgoing-cyan { - border-left-color: $color-conversation-cyan; - background-color: rgba($color-conversation-cyan, 0.6); - } - .module-quote--outgoing-deep_orange { - border-left-color: $color-conversation-deep_orange; - background-color: rgba($color-conversation-deep_orange, 0.6); - } - .module-quote--outgoing-green { - border-left-color: $color-conversation-green; - background-color: rgba($color-conversation-green, 0.6); - } - .module-quote--outgoing-indigo { - border-left-color: $color-conversation-indigo; - background-color: rgba($color-conversation-indigo, 0.6); - } - .module-quote--outgoing-pink { - border-left-color: $color-conversation-pink; - background-color: rgba($color-conversation-pink, 0.6); - } - .module-quote--outgoing-purple { - border-left-color: $color-conversation-purple; - background-color: rgba($color-conversation-purple, 0.6); + .module-quote--outgoing { + border-left-color: $color-black; + background-color: $color-conversation-grey-shade; } .module-quote--outgoing-red { - border-left-color: $color-conversation-red; - background-color: rgba($color-conversation-red, 0.6); + background-color: $color-conversation-red-shade; + } + .module-quote--outgoing-deep_orange { + background-color: $color-conversation-deep_orange-shade; + } + .module-quote--outgoing-brown { + background-color: $color-conversation-brown-shade; + } + .module-quote--outgoing-pink { + background-color: $color-conversation-pink-shade; + } + .module-quote--outgoing-purple { + background-color: $color-conversation-purple-shade; + } + .module-quote--outgoing-indigo { + background-color: $color-conversation-indigo-shade; + } + .module-quote--outgoing-blue { + background-color: $color-conversation-blue-shade; } .module-quote--outgoing-teal { - border-left-color: $color-conversation-teal; - background-color: rgba($color-conversation-teal, 0.6); + background-color: $color-conversation-teal-shade; + } + .module-quote--outgoing-green { + background-color: $color-conversation-green-shade; + } + .module-quote--outgoing-light_green { + background-color: $color-conversation-light_green-shade; + } + .module-quote--outgoing-blue_grey { + background-color: $color-conversation-blue_grey-shade; } .module-quote__primary__author { color: $color-dark-05; } - .module-quote__primary__author--grey { + .module-quote__primary__author-red { color: $color-dark-05; } - .module-quote__primary__author--blue { + .module-quote__primary__author-deep_orange { color: $color-dark-05; } - .module-quote__primary__author--cyan { + .module-quote__primary__author-brown { color: $color-dark-05; } - .module-quote__primary__author--deep_orange { + .module-quote__primary__author-pink { color: $color-dark-05; } - .module-quote__primary__author--green { + .module-quote__primary__author-purple { color: $color-dark-05; } - .module-quote__primary__author--indigo { + .module-quote__primary__author-indigo { color: $color-dark-05; } - .module-quote__primary__author--pink { + .module-quote__primary__author-blue { color: $color-dark-05; } - .module-quote__primary__author--purple { + .module-quote__primary__author-teal { color: $color-dark-05; } - .module-quote__primary__author--red { + .module-quote__primary__author-green { color: $color-dark-05; } - .module-quote__primary__author--teal { + .module-quote__primary__author-light_green { + color: $color-dark-05; + } + .module-quote__primary__author-blue_grey { color: $color-dark-05; } @@ -1044,7 +1090,7 @@ body.dark-theme { } .module-embedded-contact__contact-method { - color: $color-dark-30; + color: $color-white-07; } .module-embedded-contact__contact-method--incoming { @@ -1140,23 +1186,14 @@ body.dark-theme { background-color: $color-conversation-grey; } - .module-contact-list-item__avatar-default--grey { - background-color: $color-conversation-grey; - } - .module-contact-list-item__avatar-default--blue { - background-color: $color-conversation-blue; - } - .module-contact-list-item__avatar-default--cyan { - background-color: $color-conversation-cyan; + .module-contact-list-item__avatar-default--red { + background-color: $color-conversation-red; } .module-contact-list-item__avatar-default--deep_orange { background-color: $color-conversation-deep_orange; } - .module-contact-list-item__avatar-default--green { - background-color: $color-conversation-green; - } - .module-contact-list-item__avatar-default--indigo { - background-color: $color-conversation-indigo; + .module-contact-list-item__avatar-default--brown { + background-color: $color-conversation-brown; } .module-contact-list-item__avatar-default--pink { background-color: $color-conversation-pink; @@ -1164,12 +1201,24 @@ body.dark-theme { .module-contact-list-item__avatar-default--purple { background-color: $color-conversation-purple; } - .module-contact-list-item__avatar-default--red { - background-color: $color-conversation-red; + .module-contact-list-item__avatar-default--indigo { + background-color: $color-conversation-indigo; + } + .module-contact-list-item__avatar-default--blue { + background-color: $color-conversation-blue; } .module-contact-list-item__avatar-default--teal { background-color: $color-conversation-teal; } + .module-contact-list-item__avatar-default--green { + background-color: $color-conversation-green; + } + .module-contact-list-item__avatar-default--light_green { + background-color: $color-conversation-light_green; + } + .module-contact-list-item__avatar-default--blue_grey { + background-color: $color-conversation-blue_grey; + } .module-contact-list-item__avatar-default__label { color: $color-white; @@ -1183,7 +1232,7 @@ body.dark-theme { .module-conversation-header { color: $color-dark-05; - background-color: $color-black; + background-color: $color-gray-95; border-bottom: 1px solid $color-light-60; } @@ -1196,20 +1245,14 @@ body.dark-theme { color: $color-white; } - .module-conversation-header___default-avatar--blue { - background-color: $color-conversation-blue; - } - .module-conversation-header___default-avatar--cyan { - background-color: $color-conversation-cyan; + .module-conversation-header___default-avatar--red { + background-color: $color-conversation-red; } .module-conversation-header___default-avatar--deep_orange { background-color: $color-conversation-deep_orange; } - .module-conversation-header___default-avatar--green { - background-color: $color-conversation-green; - } - .module-conversation-header___default-avatar--indigo { - background-color: $color-conversation-indigo; + .module-conversation-header___default-avatar--brown { + background-color: $color-conversation-brown; } .module-conversation-header___default-avatar--pink { background-color: $color-conversation-pink; @@ -1217,12 +1260,24 @@ body.dark-theme { .module-conversation-header___default-avatar--purple { background-color: $color-conversation-purple; } - .module-conversation-header___default-avatar--red { - background-color: $color-conversation-red; + .module-conversation-header___default-avatar--indigo { + background-color: $color-conversation-indigo; + } + .module-conversation-header___default-avatar--blue { + background-color: $color-conversation-blue; } .module-conversation-header___default-avatar--teal { background-color: $color-conversation-teal; } + .module-conversation-header___default-avatar--green { + background-color: $color-conversation-green; + } + .module-conversation-header___default-avatar--light_green { + background-color: $color-conversation-light_green; + } + .module-conversation-header___default-avatar--blue_grey { + background-color: $color-conversation-blue_grey; + } .module-conversation-header__title { color: $color-dark-05; @@ -1258,20 +1313,14 @@ body.dark-theme { color: $color-white; } - .module-message-detail__contact__default-avatar--blue { - background-color: $color-conversation-blue; - } - .module-message-detail__contact__default-avatar--cyan { - background-color: $color-conversation-cyan; + .module-message-detail__contact__default-avatar--red { + background-color: $color-conversation-red; } .module-message-detail__contact__default-avatar--deep_orange { background-color: $color-conversation-deep_orange; } - .module-message-detail__contact__default-avatar--green { - background-color: $color-conversation-green; - } - .module-message-detail__contact__default-avatar--indigo { - background-color: $color-conversation-indigo; + .module-message-detail__contact__default-avatar--brown { + background-color: $color-conversation-brown; } .module-message-detail__contact__default-avatar--pink { background-color: $color-conversation-pink; @@ -1279,12 +1328,24 @@ body.dark-theme { .module-message-detail__contact__default-avatar--purple { background-color: $color-conversation-purple; } - .module-message-detail__contact__default-avatar--red { - background-color: $color-conversation-red; + .module-message-detail__contact__default-avatar--indigo { + background-color: $color-conversation-indigo; + } + .module-message-detail__contact__default-avatar--blue { + background-color: $color-conversation-blue; } .module-message-detail__contact__default-avatar--teal { background-color: $color-conversation-teal; } + .module-message-detail__contact__default-avatar--green { + background-color: $color-conversation-green; + } + .module-message-detail__contact__default-avatar--light_green { + background-color: $color-conversation-light_green; + } + .module-message-detail__contact__default-avatar--blue_grey { + background-color: $color-conversation-blue_grey; + } .module-message-detail__contact__error { color: $color-core-red; @@ -1381,20 +1442,14 @@ body.dark-theme { background-color: $color-conversation-grey; } - .module-conversation-list-item__default-avatar--blue { - background-color: $color-conversation-blue; - } - .module-conversation-list-item__default-avatar--cyan { - background-color: $color-conversation-cyan; + .module-conversation-list-item__default-avatar--red { + background-color: $color-conversation-red; } .module-conversation-list-item__default-avatar--deep_orange { background-color: $color-conversation-deep_orange; } - .module-conversation-list-item__default-avatar--green { - background-color: $color-conversation-green; - } - .module-conversation-list-item__default-avatar--indigo { - background-color: $color-conversation-indigo; + .module-conversation-list-item__default-avatar--brown { + background-color: $color-conversation-brown; } .module-conversation-list-item__default-avatar--pink { background-color: $color-conversation-pink; @@ -1402,12 +1457,24 @@ body.dark-theme { .module-conversation-list-item__default-avatar--purple { background-color: $color-conversation-purple; } - .module-conversation-list-item__default-avatar--red { - background-color: $color-conversation-red; + .module-conversation-list-item__default-avatar--indigo { + background-color: $color-conversation-indigo; + } + .module-conversation-list-item__default-avatar--blue { + background-color: $color-conversation-blue; } .module-conversation-list-item__default-avatar--teal { background-color: $color-conversation-teal; } + .module-conversation-list-item__default-avatar--green { + background-color: $color-conversation-green; + } + .module-conversation-list-item__default-avatar--light_green { + background-color: $color-conversation-light_green; + } + .module-conversation-list-item__default-avatar--blue_grey { + background-color: $color-conversation-blue_grey; + } .module-conversation-list-item__message__status-icon--sending { @include color-svg('../images/sending.svg', $color-light-35); diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss index 7274dc362..52a92e4e1 100644 --- a/stylesheets/_variables.scss +++ b/stylesheets/_variables.scss @@ -35,11 +35,64 @@ $color-signal-blue-025: rgba($color-signal-blue, 0.25); $color-signal-blue-050: rgba($color-signal-blue, 0.5); $color-white: #ffffff; +$color-gray-02: #f8f9f9; +$color-gray-05: #eeefef; +$color-gray-15: #d5d6d6; +$color-gray-25: #bbbdbe; +$color-gray-45: #898a8c; +$color-gray-60: #636467; +$color-gray-75: #3d3e44; +$color-gray-85: #23252a; +$color-gray-90: #17191d; +$color-gray-95: #0f1012; +$color-black: #000000; + +$color-crimson: #cc163d; +$color-vermilion: #c73800; +$color-burlap: #746c53; +$color-forest: #3b7845; +$color-wintergreen: #1c8260; +$color-teal: #067589; +$color-blue: #336ba3; +$color-indigo: #5951c8; +$color-violet: #862caf; +$color-plum: #a23474; +$color-taupe: #895d66; +$color-steel: #6b6b78; + +$color-crimson-tint: #eda6ae; +$color-vermilion-tint: #eba78e; +$color-burlap-tint: #c4b997; +$color-forest-tint: #8fcc9a; +$color-wintergreen-tint: #9bcfbd; +$color-teal-tint: #a5cad5; +$color-blue-tint: #adc8e1; +$color-indigo-tint: #c2c1e7; +$color-violet-tint: #cdaddc; +$color-plum-tint: #dcb2ca; +$color-taupe-tint: #cfb5bb; +$color-steel-tint: #bebec6; + +$color-crimson-shade: #8a0f29; +$color-vermilion-shade: #872600; +$color-burlap-shade: #58513c; +$color-forest-shade: #2b5934; +$color-wintergreen-shade: #36544a; +$color-teal-shade: #055968; +$color-blue-shade: #285480; +$color-indigo-shade: #4840a0; +$color-violet-shade: #6b248a; +$color-plum-shade: #881b5b; +$color-taupe-shade: #6a4e54; +$color-steel-shade: #5a5a63; + +$color-white-015: rgba($color-white, 0.15); $color-white-02: rgba($color-white, 0.2); $color-white-04: rgba($color-white, 0.4); $color-white-06: rgba($color-white, 0.6); $color-white-07: rgba($color-white, 0.7); $color-white-075: rgba($color-white, 0.75); +$color-white-08: rgba($color-white, 0.8); $color-white-085: rgba($color-white, 0.85); $color-light-02: #f9fafa; $color-light-10: #eeefef; @@ -54,27 +107,55 @@ $color-dark-55: #88898c; $color-dark-60: #797a7c; $color-dark-70: #414347; $color-dark-85: #1a1c20; -$color-black: #000000; $color-black-008: rgba($color-black, 0.08); $color-black-008-no-tranparency: #ededed; $color-black-016-no-tranparency: #d9d9d9; $color-black-012: rgba($color-black, 0.12); +$color-black-015: rgba($color-black, 0.15); $color-black-02: rgba($color-black, 0.2); $color-black-04: rgba($color-black, 0.4); $color-black-06: rgba($color-black, 0.6); $color-signal-blue-mix: mix($color-signal-blue-025, $color-white-04); -$color-conversation-grey: #757575; -$color-conversation-blue: #1976d2; -$color-conversation-cyan: #00838f; -$color-conversation-deep_orange: #bf360c; -$color-conversation-green: #2e7d32; -$color-conversation-indigo: #3949ab; -$color-conversation-pink: #d81b60; -$color-conversation-purple: #8e24aa; -$color-conversation-red: #d32f2f; -$color-conversation-teal: #00796b; +$color-conversation-red: $color-crimson; +$color-conversation-deep_orange: $color-vermilion; +$color-conversation-brown: $color-burlap; +$color-conversation-pink: $color-plum; +$color-conversation-purple: $color-violet; +$color-conversation-indigo: $color-indigo; +$color-conversation-blue: $color-blue; +$color-conversation-teal: $color-teal; +$color-conversation-green: $color-forest; +$color-conversation-light_green: $color-wintergreen; +$color-conversation-blue_grey: $color-taupe; +$color-conversation-grey: $color-steel; + +$color-conversation-red-tint: $color-crimson-tint; +$color-conversation-deep_orange-tint: $color-vermilion-tint; +$color-conversation-brown-tint: $color-burlap-tint; +$color-conversation-pink-tint: $color-plum-tint; +$color-conversation-purple-tint: $color-violet-tint; +$color-conversation-indigo-tint: $color-indigo-tint; +$color-conversation-blue-tint: $color-blue-tint; +$color-conversation-teal-tint: $color-teal-tint; +$color-conversation-green-tint: $color-forest-tint; +$color-conversation-light_green-tint: $color-wintergreen-tint; +$color-conversation-blue_grey-tint: $color-taupe-tint; +$color-conversation-grey-tint: $color-steel-tint; + +$color-conversation-red-shade: $color-crimson-shade; +$color-conversation-deep_orange-shade: $color-vermilion-shade; +$color-conversation-brown-shade: $color-burlap-shade; +$color-conversation-pink-shade: $color-plum-shade; +$color-conversation-purple-shade: $color-violet-shade; +$color-conversation-indigo-shade: $color-indigo-shade; +$color-conversation-blue-shade: $color-blue-shade; +$color-conversation-teal-shade: $color-teal-shade; +$color-conversation-green-shade: $color-forest-shade; +$color-conversation-light_green-shade: $color-wintergreen-shade; +$color-conversation-blue_grey-shade: $color-taupe-shade; +$color-conversation-grey-shade: $color-steel-shade; // Old colors diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index c5b5b81d4..94c566e75 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -18,7 +18,6 @@ // Themes @import 'theme_dark'; -@import 'ios'; // New CSS @import 'modules'; diff --git a/ts/components/conversation/EmbeddedContact.md b/ts/components/conversation/EmbeddedContact.md index b1e3f2b9a..bf4842b37 100644 --- a/ts/components/conversation/EmbeddedContact.md +++ b/ts/components/conversation/EmbeddedContact.md @@ -22,10 +22,10 @@ const contact = { onSendMessage: () => console.log('onSendMessage'), hasSignalAccount: true, }; - +
  • -
  • +
  • +
    • -
  • +
    • +
  • +
    • + contact={contact}/> +     ; ``` @@ -120,10 +127,10 @@ const contact = { }, hasSignalAccount: true, }; - +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • console.log('onDownload')} @@ -22,7 +22,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean console.log('onDownload')} @@ -36,7 +36,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean collapseMetadata direction="incoming" timestamp={Date.now()} - authorColor="red" + conversationColor="red" text="Hello there from the new world!" i18n={util.i18n} onDownload={() => console.log('onDownload')} @@ -49,7 +49,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean console.log('onDownload')} @@ -61,7 +61,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +     +``` + ### Long data ```jsx - +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
    • @@ -1919,11 +2085,11 @@ Note that the author avatar goes away if `collapseMetadata` is set. @@ -1931,7 +2097,7 @@ Note that the author avatar goes away if `collapseMetadata` is set.
  • void; referencedMessageNotFound: boolean; }; @@ -551,7 +550,13 @@ export class Message extends React.Component { } public renderQuote() { - const { conversationType, direction, i18n, quote } = this.props; + const { + conversationType, + conversationColor, + direction, + i18n, + quote, + } = this.props; if (!quote) { return null; @@ -570,7 +575,7 @@ export class Message extends React.Component { authorPhoneNumber={quote.authorPhoneNumber} authorProfileName={quote.authorProfileName} authorName={quote.authorName} - authorColor={quote.authorColor} + conversationColor={conversationColor} referencedMessageNotFound={quote.referencedMessageNotFound} isFromMe={quote.isFromMe} withContentAbove={withContentAbove} @@ -632,7 +637,7 @@ export class Message extends React.Component { authorPhoneNumber, authorProfileName, authorAvatarPath, - authorColor, + conversationColor, collapseMetadata, conversationType, direction, @@ -658,7 +663,7 @@ export class Message extends React.Component {
    @@ -864,7 +869,7 @@ export class Message extends React.Component { public render() { const { authorPhoneNumber, - authorColor, + conversationColor, direction, id, timestamp, @@ -893,8 +898,8 @@ export class Message extends React.Component { className={classNames( 'module-message__container', `module-message__container--${direction}`, - direction === 'incoming' - ? `module-message__container--incoming-${authorColor}` + direction === 'outgoing' + ? `module-message__container--outgoing-${conversationColor}` : null )} > diff --git a/ts/components/conversation/MessageDetail.md b/ts/components/conversation/MessageDetail.md index e0d09fd54..c14c72817 100644 --- a/ts/components/conversation/MessageDetail.md +++ b/ts/components/conversation/MessageDetail.md @@ -6,7 +6,7 @@ disableMenu: true, direction: 'incoming', timestamp: Date.now(), - authorColor: 'grey', + conversationColor: 'pink', text: 'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.', onDelete: () => console.log('onDelete'), @@ -31,7 +31,7 @@ disableMenu: true, direction: 'outgoing', timestamp: Date.now(), - authorColor: 'grey', + conversationColor: 'pink', text: 'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.', status: 'read', @@ -68,7 +68,7 @@ disableMenu: true, direction: 'outgoing', timestamp: Date.now(), - authorColor: 'grey', + conversationColor: 'pink', text: 'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.', status: 'sending', @@ -94,7 +94,7 @@ disableMenu: true, direction: 'outgoing', timestamp: Date.now(), - authorColor: 'grey', + conversationColor: 'pink', text: 'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.', status: 'error', diff --git a/ts/components/conversation/Quote.md b/ts/components/conversation/Quote.md index d273e835c..a5cc2cd23 100644 --- a/ts/components/conversation/Quote.md +++ b/ts/components/conversation/Quote.md @@ -3,16 +3,15 @@ #### Plain text ```jsx - +
  • console.log('onClick'), @@ -24,11 +23,10 @@ direction="outgoing" timestamp={Date.now()} status="sending" - authorColor="green" + conversationColor="green" text="About six" i18n={util.i18n} quote={{ - authorColor: 'red', text: 'How many ferrets do you have?', authorPhoneNumber: '(202) 555-0011', onClick: () => console.log('onClick'), @@ -41,16 +39,15 @@ #### Name variations ```jsx - +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
    +
    +
    +
    +
    +
    +
    +
    { authorProfileName, authorPhoneNumber, authorName, - authorColor, i18n, isFromMe, isIncoming, @@ -264,7 +263,6 @@ export class Quote extends React.Component {
    @@ -320,8 +318,7 @@ export class Quote extends React.Component { public render() { const { - authorColor, - isFromMe, + conversationColor, isIncoming, onClick, referencedMessageNotFound, @@ -345,10 +342,9 @@ export class Quote extends React.Component { className={classNames( 'module-quote', isIncoming ? 'module-quote--incoming' : 'module-quote--outgoing', - !isIncoming && !isFromMe - ? `module-quote--outgoing-${authorColor}` - : null, - !isIncoming && isFromMe ? 'module-quote--outgoing-you' : null, + isIncoming + ? `module-quote--incoming-${conversationColor}` + : `module-quote--outgoing-${conversationColor}`, !onClick ? 'module-quote--no-click' : null, withContentAbove ? 'module-quote--with-content-above' : null, referencedMessageNotFound diff --git a/ts/components/conversation/Timestamp.md b/ts/components/conversation/Timestamp.md index 29ab84cc1..2d94b0d9e 100644 --- a/ts/components/conversation/Timestamp.md +++ b/ts/components/conversation/Timestamp.md @@ -21,8 +21,9 @@ function getDecember1159() {
  • { public render() { - const { theme, type, ios } = this.props; + const { theme, type } = this.props; return ( -
    +
      {this.props.children}
    diff --git a/ts/styleguide/StyleGuideUtil.ts b/ts/styleguide/StyleGuideUtil.ts index 6bf8176fb..0c4788881 100644 --- a/ts/styleguide/StyleGuideUtil.ts +++ b/ts/styleguide/StyleGuideUtil.ts @@ -82,7 +82,6 @@ export { const query = window.location.search.replace(/^\?/, ''); const urlOptions = QueryString.parse(query); const theme = urlOptions.theme || 'light-theme'; -const ios = urlOptions.ios || false; const locale = urlOptions.locale || 'en'; // @ts-ignore @@ -92,7 +91,7 @@ import localeMessages from '../../_locales/en/messages.json'; import { setup } from '../../js/modules/i18n'; const i18n = setup(locale, localeMessages); -export { theme, ios, locale, i18n }; +export { theme, locale, i18n }; // Telling Lodash to relinquish _ for use by underscore // @ts-ignore diff --git a/ts/util/migrateColor.ts b/ts/util/migrateColor.ts index 94801999c..1eeaece1d 100644 --- a/ts/util/migrateColor.ts +++ b/ts/util/migrateColor.ts @@ -22,22 +22,28 @@ type OldColor = | 'yellow'; type NewColor = - | 'blue' - | 'cyan' + | 'red' | 'deep_orange' - | 'grey' - | 'green' - | 'indigo' + | 'brown' | 'pink' | 'purple' - | 'red' - | 'teal'; + | 'indigo' + | 'blue' + | 'teal' + | 'green' + | 'light_green' + | 'blue_grey' + | 'grey'; export function migrateColor(color: OldColor): NewColor { switch (color) { // These colors no longer exist - case 'brown': - return 'red'; + case 'orange': + case 'amber': + return 'deep_orange'; + + case 'yellow': + return 'brown'; case 'deep_purple': return 'purple'; @@ -45,29 +51,25 @@ export function migrateColor(color: OldColor): NewColor { case 'light_blue': return 'blue'; - case 'blue_grey': - return 'cyan'; + case 'cyan': + return 'teal'; - case 'light_green': case 'lime': - return 'green'; - - case 'orange': - case 'amber': - case 'yellow': - return 'deep_orange'; + return 'light_green'; // These can stay as they are - case 'blue': - case 'cyan': + case 'red': case 'deep_orange': - case 'green': - case 'grey': - case 'indigo': + case 'brown': case 'pink': case 'purple': - case 'red': + case 'indigo': + case 'blue': case 'teal': + case 'green': + case 'light_green': + case 'blue_grey': + case 'grey': return color; // Can uncomment this to ensure that we've covered all potential cases