Use a subtle highlight for time/date captions.

Author: ianmacd

ts/components/conversation/message/message-item/DateBreak.tsx

@@ -12,7 +12,7 @@ const DateBreakText = styled.div`
   font-weight: bold;
   text-align: center;
 
-  color: var(--text-primary-color);
+  color: var(--text-last-seen-indicator-color);
 `;
 
 export const MessageDateBreak = (props: { timestamp: number; messageId: string }) => {

ts/themes/classicDark.ts

@@ -26,6 +26,7 @@ export const classicDark: ThemeColorVariables = {
   '--message-bubbles-received-text-color': 'var(--text-primary-color)',
 
   '--text-author-color': THEMES.CLASSIC_DARK.HIGHLIGHT,
+  '--text-last-seen-indicator-color': THEMES.CLASSIC_DARK.HIGHLIGHT,
 
   '--menu-button-background-color': 'var(--primary-color)',
   '--menu-button-background-hover-color': THEMES.CLASSIC_DARK.COLOR4,

ts/themes/classicLight.ts

@@ -26,6 +26,7 @@ export const classicLight: ThemeColorVariables = {
   '--message-bubbles-received-text-color': 'var(--text-primary-color)',
 
   '--text-author-color': THEMES.CLASSIC_LIGHT.HIGHLIGHT,
+  '--text-last-seen-indicator-color': THEMES.CLASSIC_LIGHT.HIGHLIGHT,
 
   '--menu-button-background-color': THEMES.CLASSIC_LIGHT.COLOR0,
   '--menu-button-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR1,

ts/themes/oceanDark.ts

@@ -27,6 +27,7 @@ export const oceanDark: ThemeColorVariables = {
   '--message-bubbles-received-text-color': 'var(--text-primary-color)',
 
   '--text-author-color': THEMES.OCEAN_DARK.HIGHLIGHT,
+  '--text-last-seen-indicator-color': THEMES.OCEAN_DARK.HIGHLIGHT,
 
   '--menu-button-background-color': 'var(--primary-color)',
   '--menu-button-background-hover-color': THEMES.OCEAN_DARK.COLOR6,

ts/themes/oceanLight.ts

@@ -27,6 +27,7 @@ export const oceanLight: ThemeColorVariables = {
   '--message-bubbles-received-text-color': 'var(--text-primary-color)',
 
   '--text-author-color': THEMES.OCEAN_LIGHT.HIGHLIGHT,
+  '--text-last-seen-indicator-color': THEMES.OCEAN_LIGHT.HIGHLIGHT,
 
   '--menu-button-background-color': 'var(--primary-color)',
   '--menu-button-background-hover-color': THEMES.OCEAN_LIGHT.COLOR3,

ts/themes/variableColors.tsx

@@ -12,6 +12,7 @@ export type ThemeColorVariables = {
   '--text-secondary-color': string;
   '--text-selection-color': string;
   '--text-author-color': string;
+  '--text-last-seen-indicator-color': string;
 
   /* Borders */
   '--border-color': string;