From 4560419ddcd11e1f2971a0572c4adf030ff91fe0 Mon Sep 17 00:00:00 2001 From: CSab6482 Date: Tue, 29 Jun 2021 02:48:36 -0400 Subject: [PATCH 1/9] 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/9] 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/9] 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/9] 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/9] 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/9] 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), From 3731e3b8ca665a120ba943f8ad7fca6c5b425691 Mon Sep 17 00:00:00 2001 From: CSab6482 Date: Tue, 29 Jun 2021 05:33:40 -0400 Subject: [PATCH 7/9] Fixed transparent context menu text when in light mode --- src/styles/_context-menu.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/_context-menu.scss b/src/styles/_context-menu.scss index 6822a44..7cd1c5e 100644 --- a/src/styles/_context-menu.scss +++ b/src/styles/_context-menu.scss @@ -12,7 +12,7 @@ .react-contexify__item__content { padding: 4px 6px; - color: white !important; + color: var(--not-from-me-text) !important; } } } \ No newline at end of file From c42bbb4226cc6c4e0aaec38f7b40080e1776d4cd Mon Sep 17 00:00:00 2001 From: CSab6482 Date: Tue, 29 Jun 2021 16:20:51 -0400 Subject: [PATCH 8/9] Fixed the white border and flash when bringing up the tapback menu in dark mode --- src/styles/ack-picker/AcknowledgmentPicker.scss | 1 + src/styles/transcript/AcknowledgmentPickerPresenter.scss | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/ack-picker/AcknowledgmentPicker.scss b/src/styles/ack-picker/AcknowledgmentPicker.scss index 0a444df..0fe223f 100644 --- a/src/styles/ack-picker/AcknowledgmentPicker.scss +++ b/src/styles/ack-picker/AcknowledgmentPicker.scss @@ -14,6 +14,7 @@ column-gap: 5px; background: var(--tapback-background); + border-radius: 25px; padding: 2.5px 7.5px; diff --git a/src/styles/transcript/AcknowledgmentPickerPresenter.scss b/src/styles/transcript/AcknowledgmentPickerPresenter.scss index 018ff9e..aa75e48 100644 --- a/src/styles/transcript/AcknowledgmentPickerPresenter.scss +++ b/src/styles/transcript/AcknowledgmentPickerPresenter.scss @@ -64,7 +64,7 @@ $acknowledgment-button-initial: scale(1, 1) translate(75px, -100px); top: 0; left: 0; - background: white; + background: var(--tapback-background); border-radius: 25px; width: 100px; From 3842e7ef49f776f23ee13f26ba635bcb5e4a17c4 Mon Sep 17 00:00:00 2001 From: CSab6482 Date: Tue, 29 Jun 2021 17:05:00 -0400 Subject: [PATCH 9/9] Fixed non-transparent backgrounds for emoji only texts --- src/styles/transcript/items/IMChatItem.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/styles/transcript/items/IMChatItem.scss b/src/styles/transcript/items/IMChatItem.scss index 04021bc..0d7e9e1 100644 --- a/src/styles/transcript/items/IMChatItem.scss +++ b/src/styles/transcript/items/IMChatItem.scss @@ -190,7 +190,7 @@ margin-left: 1.5em; font-size: 10px; margin-bottom: 3px; - color: #7e7e7e; + color: #7E7E7E; } .buddy-name + [data-has-acknowledgments=true] { @@ -343,10 +343,11 @@ mask-border-source: none !important; mask-border-slice: none !important; mask-border-width: none !important; - background: none !important; + --bubble-background: var(--background) !important; &[data-item-type=text] { --font-size: 48px !important; + --text-color: var(--background).invert !important; .item-inner { padding-left: 8px !important;