From f4483c8ba4633842ac4412942420bdd31075b1b9 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Mon, 19 Sep 2022 11:28:45 +1000
Subject: [PATCH] feat: updated conversation and group panel colors

---
 stylesheets/_session_conversation.scss |  1 +
 stylesheets/_session_group_panel.scss  | 20 ++++++++------------
 ts/themes/SessionTheme.tsx             |  7 ++++++-
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss
index d05e514c3..43982fb5f 100644
--- a/stylesheets/_session_conversation.scss
+++ b/stylesheets/_session_conversation.scss
@@ -121,6 +121,7 @@
     background-color: inherit;
     outline: none;
     position: relative;
+    background-color: var(--background-secondary-color);
     border-top: 1px solid var(--border-color);
   }
 
diff --git a/stylesheets/_session_group_panel.scss b/stylesheets/_session_group_panel.scss
index 69342de9f..da84c0c0e 100644
--- a/stylesheets/_session_group_panel.scss
+++ b/stylesheets/_session_group_panel.scss
@@ -28,10 +28,7 @@
     margin: var(--margins-md) 0;
     min-height: 4rem;
     width: inherit;
-    color: var(--color-text);
-    background: var(--color-cell-background);
-    border: var(--border-session);
-
+    color: var(--text-secondary-color);
     text-align: center;
     display: none;
   }
@@ -41,10 +38,10 @@
     align-items: center;
     min-height: 3rem;
     font-size: 0.8rem;
-    color: var(--color-text);
-    background: var(--color-cell-background);
-    border-top: var(--border-session);
-    border-bottom: var(--border-session);
+    color: var(--right-panel-item-text-color);
+    background-color: var(--right-panel-item-background-color);
+    border-top: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
 
     width: -webkit-fill-available;
     padding: 0 var(--margins-md);
@@ -52,7 +49,7 @@
     cursor: pointer;
 
     &:hover {
-      background: var(--color-clickable-hovered);
+      background-color: var(--right-panel-item-background-hover-color);
     }
   }
 
@@ -84,8 +81,7 @@
       }
 
       &__tab {
-        color: var(--color-text);
-
+        color: var(--text-primary-color);
         font-weight: bold;
         font-size: 0.9rem;
         padding: 0.6rem;
@@ -101,7 +97,7 @@
             margin: 0 auto;
             width: 70%;
             padding-top: 0.5rem;
-            border-bottom: var(--border-unread);
+            border-bottom: 4px solid var(--primary-color);
           }
         }
       }
diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx
index c47f17a5b..421178af9 100644
--- a/ts/themes/SessionTheme.tsx
+++ b/ts/themes/SessionTheme.tsx
@@ -617,7 +617,12 @@ export const SessionGlobalStyles = createGlobalStyle`
     --modal-background-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
     --modal-text-color: var(--text-primary-color);
     --modal-text-danger-color: var(--danger-color);
-    --toast-progress-color: rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.1)
+    --toast-progress-color: rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.1);
+
+    /* Right Panel Items */
+    --right-panel-item-background-color: var(--background-secondary-color);
+    --right-panel-item-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
+    --right-panel-item-text-color: var(--text-primary-color);
 
   };
 `;