feat: styled unread scroll, expire timer, last seen, click to trust

ts/components/SessionScrollButton.tsx

@@ -10,6 +10,10 @@ const SessionScrollButtonDiv = styled.div`
   z-index: 2;
   right: 60px;
   animation: fadein var(--default-duration);
+
+  .session-icon-button {
+    background-color: var(--message-bubbles-received-background-color);
+  }
 `;
 
 export const SessionScrollButton = (props: { onClickScrollBottom: () => void }) => {

ts/components/conversation/ExpireTimer.tsx

@@ -32,7 +32,7 @@ const ExpireTimerBucket = styled.div`
   letter-spacing: 0.3px;
   text-transform: uppercase;
   user-select: none;
-  color: var(--color-text);
+  color: var(--text-primary-color);
 `;
 
 export const ExpireTimer = (props: Props) => {
@@ -57,7 +57,7 @@ export const ExpireTimer = (props: Props) => {
     return null;
   }
 
-  const expireTimerColor = 'var(--color-text)';
+  const expireTimerColor = 'var(--primary-text-color)';
 
   if (timeLeft <= 60) {
     return <ExpireTimerCount color={expireTimerColor}>{timeLeft}</ExpireTimerCount>;

ts/components/conversation/SessionLastSeenIndicator.tsx

@@ -2,21 +2,11 @@ import React, { useContext, useLayoutEffect } from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { getQuotedMessageToAnimate } from '../../state/selectors/conversations';
+import { getTheme } from '../../state/selectors/theme';
 import { ScrollToLoadedMessageContext } from './SessionMessagesListContainer';
 
-const LastSeenBarContainer = styled.div`
-  padding-bottom: 35px;
-  max-width: 300px;
-  align-self: center;
-  padding-top: 28px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`;
-
 const LastSeenBar = styled.div`
   height: 2px;
-  background-color: var(--color-last-seen-indicator);
   flex-grow: 1;
   min-width: 60px;
   flex-shrink: 0;
@@ -25,14 +15,32 @@ const LastSeenBar = styled.div`
 const LastSeenText = styled.div`
   margin-top: 3px;
   font-size: var(--font-size-xs);
+  font-weight: 500;
   line-height: 26px;
   letter-spacing: 0.3px;
   text-transform: uppercase;
   text-align: center;
   flex-shrink: 0;
   margin-inline: 1rem;
+`;
 
-  color: var(--color-last-seen-indicator);
+const LastSeenBarContainer = styled.div<{ darkMode?: boolean }>`
+  padding-bottom: 35px;
+  max-width: 300px;
+  align-self: center;
+  padding-top: 28px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  ${LastSeenBar} {
+    background-color: ${props =>
+      props.darkMode ? 'var(--primary-color)' : 'var(--text-primary-color)'};
+  }
+
+  ${LastSeenText} {
+    color: ${props => (props.darkMode ? 'var(--primary-color)' : 'var(--text-primary-color)')};
+  }
 `;
 
 export const SessionLastSeenIndicator = (props: {
@@ -40,6 +48,7 @@ export const SessionLastSeenIndicator = (props: {
   didScroll: boolean;
   setDidScroll: (scroll: boolean) => void;
 }) => {
+  const darkMode = useSelector(getTheme).includes('dark');
   // if this unread-indicator is not unique it's going to cause issues
   const quotedMessageToAnimate = useSelector(getQuotedMessageToAnimate);
   const scrollToLoadedMessage = useContext(ScrollToLoadedMessageContext);
@@ -64,7 +73,7 @@ export const SessionLastSeenIndicator = (props: {
   });
 
   return (
-    <LastSeenBarContainer id="unread-indicator">
+    <LastSeenBarContainer id="unread-indicator" darkMode={darkMode}>
       <LastSeenBar />
       <LastSeenText>{window.i18n('unreadMessages')}</LastSeenText>
 

ts/components/conversation/message/message-content/ClickToTrustSender.tsx

@@ -38,7 +38,7 @@ export const ClickToTrustSender = (props: { messageId: string }) => {
         message: window.i18n('trustThisContactDialogDescription', [
           convo.getContactProfileNameOrShortenedPubKey(),
         ]),
-        okTheme: SessionButtonColor.Green,
+        okTheme: SessionButtonColor.Primary,
         onClickOk: async () => {
           convo.set({ isTrustedForAttachmentDownload: true });
           await convo.commit();