feat: updated conversation and group panel colors

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);
   }
 

stylesheets/_session_group_panel.scss

@@ -28,10 +28,7 @@
     margin: var(--margins-md) 0;
     min-height: 4rem;
     width: inherit;
-    color: var(--color-text);
+    color: var(--text-secondary-color);
-    background: var(--color-cell-background);
-    border: var(--border-session);
-
     text-align: center;
     display: none;
   }
@@ -41,10 +38,10 @@
     align-items: center;
     min-height: 3rem;
     font-size: 0.8rem;
-    color: var(--color-text);
+    color: var(--right-panel-item-text-color);
-    background: var(--color-cell-background);
+    background-color: var(--right-panel-item-background-color);
-    border-top: var(--border-session);
+    border-top: 1px solid var(--border-color);
-    border-bottom: var(--border-session);
+    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);
           }
         }
       }

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);
 
   };
 `;