From 31f4e294c6487860ff3c036632a772d2643492c2 Mon Sep 17 00:00:00 2001
From: warrickct <warrickct@gmail.com>
Date: Tue, 1 Feb 2022 14:45:38 +1100
Subject: [PATCH] Altering message request banner styling

---
 .../conversation/SessionConversation.tsx      |  1 -
 .../leftpane/MessageRequestsBanner.tsx        | 10 ++---
 ts/state/ducks/SessionTheme.tsx               | 44 +++++++++++++++++++
 3 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/ts/components/conversation/SessionConversation.tsx b/ts/components/conversation/SessionConversation.tsx
index 5e3f2ae8e..7b77a89eb 100644
--- a/ts/components/conversation/SessionConversation.tsx
+++ b/ts/components/conversation/SessionConversation.tsx
@@ -238,7 +238,6 @@ export class SessionConversation extends React.Component<Props, State> {
           <div className={classNames('conversation-info-panel', showMessageDetails && 'show')}>
             <MessageDetail />
           </div>
-
           {lightBoxOptions?.media && this.renderLightBox(lightBoxOptions)}
 
           <div className="conversation-messages">
diff --git a/ts/components/leftpane/MessageRequestsBanner.tsx b/ts/components/leftpane/MessageRequestsBanner.tsx
index 28f07d442..da9f7c3a5 100644
--- a/ts/components/leftpane/MessageRequestsBanner.tsx
+++ b/ts/components/leftpane/MessageRequestsBanner.tsx
@@ -5,7 +5,6 @@ import { getConversationRequests } from '../../state/selectors/conversations';
 import { SessionIcon, SessionIconSize, SessionIconType } from '../icon';
 
 const StyledMessageRequestBanner = styled.div`
-  border-left: var(--border-unread);
   height: 64px;
   width: 100%;
   max-width: 300px;
@@ -15,6 +14,8 @@ const StyledMessageRequestBanner = styled.div`
   align-items: center;
   cursor: pointer;
 
+  background: var(--color-request-banner-background);
+
   transition: var(--session-transition-duration);
 
   &:hover {
@@ -42,7 +43,7 @@ const StyledCircleIcon = styled.div`
 const StyledUnreadCounter = styled.div`
   font-weight: bold;
   border-radius: var(--margins-sm);
-  background-color: var(--color-clickable-hovered);
+  background-color: var(--color-request-banner-unread-background);
   margin-left: 10px;
   min-width: 20px;
   height: 20px;
@@ -55,14 +56,13 @@ const StyledUnreadCounter = styled.div`
 `;
 
 const StyledGridContainer = styled.div`
-  border: solid 1px black;
   display: flex;
   width: 36px;
   height: 36px;
   align-items: center;
   border-radius: 50%;
   justify-content: center;
-  background-color: var(--color-conversation-item-has-unread);
+  background-color: var(--color-request-banner-icon-background);
 `;
 
 export const CirclularIcon = (props: { iconType: SessionIconType; iconSize: SessionIconSize }) => {
@@ -74,7 +74,7 @@ export const CirclularIcon = (props: { iconType: SessionIconType; iconSize: Sess
         <SessionIcon
           iconType={iconType}
           iconSize={iconSize}
-          iconColor={'var(--color-text-subtle)'}
+          iconColor="var(--color-request-banner-icon)"
         />
       </StyledGridContainer>
     </StyledCircleIcon>
diff --git a/ts/state/ducks/SessionTheme.tsx b/ts/state/ducks/SessionTheme.tsx
index 1f73c9bdc..84b7f69a8 100644
--- a/ts/state/ducks/SessionTheme.tsx
+++ b/ts/state/ducks/SessionTheme.tsx
@@ -56,6 +56,12 @@ const darkBackgroundPrimary = '#474646';
 const darkButtonGreen = accentDarkTheme;
 const darkModalBackground = '#101011';
 
+const grey67 = '#434343';
+const darkMessageRequestBannerBackground = '#2c2c2c';
+const darkMessageRequestBannerIconBackground = grey67;
+const darkMessageRequestBannerUnreadBackground = grey67;
+const darkMessageRequestBannerIcon = '#adadad';
+
 export const switchHtmlToDarkTheme = () => {
   document.documentElement.style.setProperty('--color-accent', darkColorAccent);
   document.documentElement.style.setProperty('--color-accent-button', darkColorAccentButton);
@@ -138,6 +144,23 @@ export const switchHtmlToDarkTheme = () => {
   document.documentElement.style.setProperty('--color-button-green', darkButtonGreen);
   document.documentElement.style.setProperty('--color-modal-background', darkModalBackground);
   document.documentElement.style.setProperty('--border-session', darkColorSessionBorder);
+
+  document.documentElement.style.setProperty(
+    '--color-request-banner-background',
+    darkMessageRequestBannerBackground
+  );
+  document.documentElement.style.setProperty(
+    '--color-request-banner-icon-background',
+    darkMessageRequestBannerIconBackground
+  );
+  document.documentElement.style.setProperty(
+    '--color-request-banner-unread-background',
+    darkMessageRequestBannerUnreadBackground
+  );
+  document.documentElement.style.setProperty(
+    '--color-request-banner-icon',
+    darkMessageRequestBannerIcon
+  );
 };
 
 // LIGHT COLORS
@@ -185,6 +208,11 @@ const lightBackgroundPrimary = '#272726';
 const lightButtonGreen = '#272726';
 const lightModalBackground = '#fcfcfc';
 
+const lightMessageRequestBannerBackground = '#f0f0f0';
+const lightMessageRequestBannerIconBackground = '#585858';
+const lightMessageRequestBannerUnreadBackground = '#dfdfdf';
+const lightMessageRequestBannerIcon = white;
+
 export const switchHtmlToLightTheme = () => {
   document.documentElement.style.setProperty('--color-accent', lightColorAccent);
   document.documentElement.style.setProperty('--color-accent-button', lightColorAccentButton);
@@ -276,6 +304,22 @@ export const switchHtmlToLightTheme = () => {
   document.documentElement.style.setProperty('--color-button-green', lightButtonGreen);
   document.documentElement.style.setProperty('--color-modal-background', lightModalBackground);
   document.documentElement.style.setProperty('--border-session', lightColorSessionBorder);
+  document.documentElement.style.setProperty(
+    '--color-request-banner-background',
+    lightMessageRequestBannerBackground
+  );
+  document.documentElement.style.setProperty(
+    '--color-request-banner-icon-background',
+    lightMessageRequestBannerIconBackground
+  );
+  document.documentElement.style.setProperty(
+    '--color-request-banner-unread-background',
+    lightMessageRequestBannerUnreadBackground
+  );
+  document.documentElement.style.setProperty(
+    '--color-request-banner-icon',
+    lightMessageRequestBannerIcon
+  );
 };
 
 // default to light theme