From 0bb3035ebb3f3fb7eb1f185a225d8e3e04b106df Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Wed, 28 Sep 2022 14:32:18 +1000
Subject: [PATCH] feat: styled unread scroll, expire timer, last seen, click to
 trust

---
 ts/components/SessionScrollButton.tsx         |  4 +++
 ts/components/conversation/ExpireTimer.tsx    |  4 +--
 .../conversation/SessionLastSeenIndicator.tsx | 35 ++++++++++++-------
 .../message-content/ClickToTrustSender.tsx    |  2 +-
 4 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/ts/components/SessionScrollButton.tsx b/ts/components/SessionScrollButton.tsx
index 48fb63ca1..94606b593 100644
--- a/ts/components/SessionScrollButton.tsx
+++ b/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 }) => {
diff --git a/ts/components/conversation/ExpireTimer.tsx b/ts/components/conversation/ExpireTimer.tsx
index dc60f7774..25f324db5 100644
--- a/ts/components/conversation/ExpireTimer.tsx
+++ b/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>;
diff --git a/ts/components/conversation/SessionLastSeenIndicator.tsx b/ts/components/conversation/SessionLastSeenIndicator.tsx
index 6a1d2ecb2..3c694d2ac 100644
--- a/ts/components/conversation/SessionLastSeenIndicator.tsx
+++ b/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;
+`;
+
+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)'};
+  }
 
-  color: var(--color-last-seen-indicator);
+  ${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>
 
diff --git a/ts/components/conversation/message/message-content/ClickToTrustSender.tsx b/ts/components/conversation/message/message-content/ClickToTrustSender.tsx
index 668b04510..2adefdd95 100644
--- a/ts/components/conversation/message/message-content/ClickToTrustSender.tsx
+++ b/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();