diff --git a/ts/components/conversation/SessionLastSeenIndicator.tsx b/ts/components/conversation/SessionLastSeenIndicator.tsx index 3128d7592..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,8 +29,10 @@ const LastSeenText = styled.div` letter-spacing: 0.3px; text-transform: uppercase; text-align: center; + flex-shrink: 0; + margin-inline: 1rem; - color: #00f782; + color: var(--color-last-seen-indicator); `; export const SessionLastSeenIndicator = (props: { messageId: string }) => { @@ -50,9 +56,10 @@ export const SessionLastSeenIndicator = (props: { messageId: string }) => { return ( - - {window.i18n('unreadMessages')} - + + {window.i18n('unreadMessages')} + + ); }; diff --git a/ts/components/conversation/message/message-item/DateBreak.tsx b/ts/components/conversation/message/message-item/DateBreak.tsx index 81dbaefd1..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-text); + color: var(--color-text); `; export const MessageDateBreak = (props: { timestamp: number; messageId: string }) => { diff --git a/ts/state/ducks/SessionTheme.tsx b/ts/state/ducks/SessionTheme.tsx index 2b7a377e2..6439354ee 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'; @@ -95,10 +94,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 @@ -179,8 +174,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'; @@ -250,10 +244,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 @@ -366,7 +356,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};