From e853f57e6b15b532c6cd9f3505ae60d8e4961411 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 9 Mar 2022 13:25:00 +1100 Subject: [PATCH 1/3] fix unread indicator color for light theme --- .../conversation/SessionLastSeenIndicator.tsx | 2 +- .../conversation/message/message-item/DateBreak.tsx | 2 +- ts/state/ducks/SessionTheme.tsx | 13 +------------ 3 files changed, 3 insertions(+), 14 deletions(-) diff --git a/ts/components/conversation/SessionLastSeenIndicator.tsx b/ts/components/conversation/SessionLastSeenIndicator.tsx index 3128d7592..f7efd83d0 100644 --- a/ts/components/conversation/SessionLastSeenIndicator.tsx +++ b/ts/components/conversation/SessionLastSeenIndicator.tsx @@ -26,7 +26,7 @@ const LastSeenText = styled.div` text-transform: uppercase; text-align: center; - color: #00f782; + color: var(--color-last-seen-indicator); `; export const SessionLastSeenIndicator = (props: { messageId: string }) => { diff --git a/ts/components/conversation/message/message-item/DateBreak.tsx b/ts/components/conversation/message/message-item/DateBreak.tsx index 81dbaefd1..29566691a 100644 --- a/ts/components/conversation/message/message-item/DateBreak.tsx +++ b/ts/components/conversation/message/message-item/DateBreak.tsx @@ -12,7 +12,7 @@ const DateBreakText = styled.div` font-weight: bold; text-align: center; - color: var(--color-last-seen-indicator-text); + color: var(--color-last-seen-indicator); `; export const MessageDateBreak = (props: { timestamp: number; messageId: string }) => { diff --git a/ts/state/ducks/SessionTheme.tsx b/ts/state/ducks/SessionTheme.tsx index e2146de40..9a0427206 100644 --- a/ts/state/ducks/SessionTheme.tsx +++ b/ts/state/ducks/SessionTheme.tsx @@ -29,7 +29,6 @@ const darkColorSessionBorderColor = borderDarkThemeColor; const darkColorRecoveryPhraseBannerBg = '#1f1f1f'; const darkColorPillDivider = '#353535'; const darkColorLastSeenIndicator = accentDarkTheme; -const darkColorLastSeenIndicatorText = '#a8a9aa'; const darkColorQuoteBottomBarBg = '#404040'; const darkColorCellBackground = '#1b1b1b'; const darkColorReceivedMessageBg = '#2d2d2d'; @@ -88,10 +87,6 @@ export const switchHtmlToDarkTheme = () => { '--color-last-seen-indicator', darkColorLastSeenIndicator ); - document.documentElement.style.setProperty( - '--color-last-seen-indicator-text', - darkColorLastSeenIndicatorText - ); document.documentElement.style.setProperty( '--color-quote-bottom-bar-background', darkColorQuoteBottomBarBg @@ -156,8 +151,7 @@ const lightColorSessionBorderColor = borderLightThemeColor; const lightColorSessionBorder = `1px solid ${lightColorSessionBorderColor}`; const lightColorRecoveryPhraseBannerBg = white; const lightColorPillDivider = `${black}1A`; -const lightColorLastSeenIndicator = '#62656a'; -const lightColorLastSeenIndicatorText = '#070c14'; +const lightColorLastSeenIndicator = black; const lightColorQuoteBottomBarBg = '#f0f0f0'; const lightColorCellBackground = '#f9f9f9'; const lightColorReceivedMessageBg = '#f5f5f5'; @@ -224,10 +218,6 @@ export const switchHtmlToLightTheme = () => { '--color-last-seen-indicator', lightColorLastSeenIndicator ); - document.documentElement.style.setProperty( - '--color-last-seen-indicator-text', - lightColorLastSeenIndicatorText - ); document.documentElement.style.setProperty( '--color-quote-bottom-bar-background', lightColorQuoteBottomBarBg @@ -324,7 +314,6 @@ export const SessionGlobalStyles = createGlobalStyle` --color-recovery-phrase-banner-background: ${lightColorRecoveryPhraseBannerBg}; --color-pill-divider: ${lightColorPillDivider}; --color-last-seen-indicator: ${lightColorLastSeenIndicator}; - --color-last-seen-indicator-text: ${lightColorLastSeenIndicatorText}; --color-quote-bottom-bar-background: ${lightColorQuoteBottomBarBg}; --color-cell-background: ${lightColorCellBackground}; --color-pill-divider-text: ${lightColorPillDividerText}; From 551fc4e2d7e9cd0879fc9b2a81647e49598ba88d Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Thu, 10 Mar 2022 14:52:47 +1100 Subject: [PATCH 2/3] make the unread message banner on a single line --- .../conversation/SessionLastSeenIndicator.tsx | 21 ++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/ts/components/conversation/SessionLastSeenIndicator.tsx b/ts/components/conversation/SessionLastSeenIndicator.tsx index f7efd83d0..ca41d3e44 100644 --- a/ts/components/conversation/SessionLastSeenIndicator.tsx +++ b/ts/components/conversation/SessionLastSeenIndicator.tsx @@ -6,16 +6,20 @@ import { ScrollToLoadedMessageContext } from './SessionMessagesListContainer'; const LastSeenBarContainer = styled.div` padding-bottom: 35px; - margin-inline-start: 10rem; - margin-inline-end: 10rem; + max-width: 300px; + align-self: center; padding-top: 28px; - overflow: hidden; + display: flex; + flex-direction: row; + align-items: center; `; const LastSeenBar = styled.div` - width: 100%; height: 2px; background-color: var(--color-last-seen-indicator); + flex-grow: 1; + min-width: 60px; + flex-shrink: 0; `; const LastSeenText = styled.div` @@ -25,6 +29,8 @@ const LastSeenText = styled.div` letter-spacing: 0.3px; text-transform: uppercase; text-align: center; + flex-shrink: 0; + margin-inline: 1rem; color: var(--color-last-seen-indicator); `; @@ -50,9 +56,10 @@ export const SessionLastSeenIndicator = (props: { messageId: string }) => { return ( - - {window.i18n('unreadMessages')} - + + {window.i18n('unreadMessages')} + + ); }; From 2cf2d9eff79c04a507f560247a7c955e3b74d2bf Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Thu, 10 Mar 2022 15:12:20 +1100 Subject: [PATCH 3/3] make sure datebreak keep text color --- ts/components/conversation/message/message-item/DateBreak.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/components/conversation/message/message-item/DateBreak.tsx b/ts/components/conversation/message/message-item/DateBreak.tsx index 29566691a..ca8329632 100644 --- a/ts/components/conversation/message/message-item/DateBreak.tsx +++ b/ts/components/conversation/message/message-item/DateBreak.tsx @@ -12,7 +12,7 @@ const DateBreakText = styled.div` font-weight: bold; text-align: center; - color: var(--color-last-seen-indicator); + color: var(--color-text); `; export const MessageDateBreak = (props: { timestamp: number; messageId: string }) => {