Merge pull request #2191 from Bilb/fix-unread-indicator-light

Fix unread indicator light and design

ts/components/conversation/SessionLastSeenIndicator.tsx

@@ -6,16 +6,20 @@ import { ScrollToLoadedMessageContext } from './SessionMessagesListContainer';
 
 const LastSeenBarContainer = styled.div`
   padding-bottom: 35px;
-  margin-inline-start: 10rem;
+  max-width: 300px;
-  margin-inline-end: 10rem;
+  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 (
     <LastSeenBarContainer id="unread-indicator">
-      <LastSeenBar>
+      <LastSeenBar />
-        <LastSeenText>{window.i18n('unreadMessages')}</LastSeenText>
+      <LastSeenText>{window.i18n('unreadMessages')}</LastSeenText>
-      </LastSeenBar>
+
+      <LastSeenBar />
     </LastSeenBarContainer>
   );
 };

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 }) => {

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 lightColorLastSeenIndicator = black;
-const lightColorLastSeenIndicatorText = '#070c14';
 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};