From 4560419ddcd11e1f2971a0572c4adf030ff91fe0 Mon Sep 17 00:00:00 2001 From: CSab6482 Date: Tue, 29 Jun 2021 02:48:36 -0400 Subject: [PATCH 1/6] Made the `To` text in the transcript toolbar and the background color of the acknowledgment menu more dark mode friendly --- src/styles/_colors.scss | 8 ++++++++ src/styles/ack-picker/AcknowledgmentPicker.scss | 4 ++-- src/styles/toolbar/_transcript-toolbar.scss | 2 +- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss index 397b767..9aba8ce 100644 --- a/src/styles/_colors.scss +++ b/src/styles/_colors.scss @@ -93,6 +93,14 @@ $colors: ( light: rgba(0, 0, 0, 0.1), dark: rgba(255, 255, 255, 0.1) ), + tapback-background: ( + light: rgba(255, 255, 255, 1), + dark: rgba(32, 33, 36, 1) + ), + to-text: ( + light: rgba(0, 0, 0, 0.6), + dark: rgba(157, 157, 157, 1) + ), lp-bottom-caption: rgb(142, 142, 145) ); diff --git a/src/styles/ack-picker/AcknowledgmentPicker.scss b/src/styles/ack-picker/AcknowledgmentPicker.scss index a946c69..ef91d92 100644 --- a/src/styles/ack-picker/AcknowledgmentPicker.scss +++ b/src/styles/ack-picker/AcknowledgmentPicker.scss @@ -13,7 +13,7 @@ width: 200px; column-gap: 5px; - background: white; + background: var(--tapback-background); border-radius: 25px; @@ -39,7 +39,7 @@ } &::before { - background-color: white; + background-color: var(--tapback-background); } &[attr-selected=true] { diff --git a/src/styles/toolbar/_transcript-toolbar.scss b/src/styles/toolbar/_transcript-toolbar.scss index c97cf47..c4ec927 100644 --- a/src/styles/toolbar/_transcript-toolbar.scss +++ b/src/styles/toolbar/_transcript-toolbar.scss @@ -13,7 +13,7 @@ &::before { content: 'To: '; - color: rgba(0, 0, 0, 0.6); + color: var(--to-text); } } From 74f9eeb767005b24f2afdc50c267eab436d55ba0 Mon Sep 17 00:00:00 2001 From: CSab6482 Date: Tue, 29 Jun 2021 03:11:27 -0400 Subject: [PATCH 2/6] Removed the `border-radiusborder-radius: 25px;` line from `AcknowledgmentPicker.scss` --- src/styles/ack-picker/AcknowledgmentPicker.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/styles/ack-picker/AcknowledgmentPicker.scss b/src/styles/ack-picker/AcknowledgmentPicker.scss index ef91d92..0a444df 100644 --- a/src/styles/ack-picker/AcknowledgmentPicker.scss +++ b/src/styles/ack-picker/AcknowledgmentPicker.scss @@ -15,8 +15,6 @@ background: var(--tapback-background); - border-radius: 25px; - padding: 2.5px 7.5px; .acknowledgment-button { From 1cd4a2bbef351383f2116f8895db29ff053d08d9 Mon Sep 17 00:00:00 2001 From: CSab6482 Date: Tue, 29 Jun 2021 03:33:41 -0400 Subject: [PATCH 3/6] Made the dark mode acknowledgment picker a little less darker --- src/styles/_colors.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss index 9aba8ce..d769e9b 100644 --- a/src/styles/_colors.scss +++ b/src/styles/_colors.scss @@ -94,8 +94,8 @@ $colors: ( dark: rgba(255, 255, 255, 0.1) ), tapback-background: ( - light: rgba(255, 255, 255, 1), - dark: rgba(32, 33, 36, 1) + light: rgba(45, 45, 46, 255), + dark: rgba(45, 45, 46, 255) ), to-text: ( light: rgba(0, 0, 0, 0.6), From 72fe1656456b700bda099d5a7c8882a525baa975 Mon Sep 17 00:00:00 2001 From: CSab6482 Date: Tue, 29 Jun 2021 03:43:33 -0400 Subject: [PATCH 4/6] I accidentally broke light mode in [this](https://github.com/open-imcore/imcore.react/pull/46) pull request, so now I'm undoing that mistake. My bad. --- src/styles/_colors.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss index d769e9b..264bdc1 100644 --- a/src/styles/_colors.scss +++ b/src/styles/_colors.scss @@ -94,7 +94,7 @@ $colors: ( dark: rgba(255, 255, 255, 0.1) ), tapback-background: ( - light: rgba(45, 45, 46, 255), + light: rgba(255, 255, 255, 1), dark: rgba(45, 45, 46, 255) ), to-text: ( From 6676aeb10e01d617a59551cedcd6fbd50b1ea50e Mon Sep 17 00:00:00 2001 From: CSab6482 Date: Tue, 29 Jun 2021 04:30:38 -0400 Subject: [PATCH 5/6] Fixed incorrect coloring on URL previews --- src/styles/transcript/items/LPRichLink.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/transcript/items/LPRichLink.scss b/src/styles/transcript/items/LPRichLink.scss index 1d4a615..6de7f51 100644 --- a/src/styles/transcript/items/LPRichLink.scss +++ b/src/styles/transcript/items/LPRichLink.scss @@ -8,7 +8,7 @@ --lp-background-override: var(--dark-lp-background-override); } - background-color: var(--lp-background-override, rgb(229, 230, 233)); + background-color: var(--lp-background-override, var(--not-from-me)); max-width: 300px; From 2b5a4b87f3f39513275c2a866e19426a0c03000a Mon Sep 17 00:00:00 2001 From: CSab6482 Date: Tue, 29 Jun 2021 04:57:07 -0400 Subject: [PATCH 6/6] Changed dark mode to more closely resemble iOS --- src/styles/_colors.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss index 264bdc1..70151c5 100644 --- a/src/styles/_colors.scss +++ b/src/styles/_colors.scss @@ -14,7 +14,7 @@ $colors: ( from-me-text: white, not-from-me: ( light: rgb(229,229,234), - dark: #3B3B3D + dark: #272729 ), not-from-me-text: ( light: black, @@ -29,11 +29,11 @@ $colors: ( active-chat-text: white, master-detail-background: ( light: #F0F0F0, - dark: #242424 + dark: #010001 ), master-detail-border-color: ( light: #E2E2E2, - dark: #424242 + dark: #2a2a2c ), chat-sidebar-title: ( light: #555655, @@ -41,11 +41,11 @@ $colors: ( ), ack-bubble-background: ( light: rgb(229, 229, 234), - dark: rgb(92, 86, 84) + dark: rgb(39, 39, 41) ), ack-glyph-color: ( light: rgb(124, 124, 124), - dark: rgb(206, 206, 210) + dark: rgb(129, 129, 128) ), chat-sidebar-description: #808080, blue-text: #2888F6, @@ -61,7 +61,7 @@ $colors: ( light: linear-gradient($transcript-business-chat-gradient-stop, $transcript-business-chat-gradient-start), dark: linear-gradient($transcript-business-chat-gradient-dark-stop, $transcript-business-chat-gradient-dark-start) ), - heart-active: #E86895, + heart-active: #FA5C99, ack-active: white, attachment-background: ( light: #E9E9EB, @@ -75,7 +75,7 @@ $colors: ( ), composition-placeholder: ( light: rgba(0, 0, 0, 0.3), - dark: rgba(255, 255, 255, 0.3) + dark: rgba(70, 71, 75, 255) ), text: ( light: black, @@ -87,7 +87,7 @@ $colors: ( ), background: ( light: white, - dark: #1E1E1E + dark: #010001 ), background-secondary: ( light: rgba(0, 0, 0, 0.1),