feat: styled conversation header and composition box

stylesheets/_modules.scss

@@ -316,7 +316,7 @@
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
-  color: var(--color-text);
+  color: var(--text-primary-color);
 
   // width of avatar (28px) and our 6px left margin
   max-width: calc(100% - 34px);
@@ -327,7 +327,7 @@
   display: flex;
   align-items: center;
 
-  -webkit-user-select: text;
+  user-select: text;
   cursor: pointer;
 
   .module-contact-name__profile-name {
@@ -347,6 +347,7 @@
 }
 
 .module-conversation-header__expiration__clock-icon {
+  // TODO Theming update
   @include color-svg('../images/timer.svg', var(--color-gray-color));
   height: 20px;
   width: 20px;

stylesheets/_session.scss

@@ -127,7 +127,7 @@ textarea {
   font-size: $session-font-md;
 
   &-text {
-    color: var(--color-text-subtle);
+    color: var(--text-primary-color);
     font-weight: 400;
     font-size: $session-font-sm;
     line-height: $session-font-sm;

stylesheets/_session_conversation.scss

@@ -68,7 +68,7 @@
     align-items: center;
     justify-content: space-between;
     height: var(--main-view-header-height);
-    background: var(--color-cell-background);
+    background: var(--background-primary-color);
 
     .close-button {
       float: left;
@@ -159,8 +159,8 @@
   align-items: center;
   padding: 0px var(--margins-md);
   min-height: min-content;
-  background: var(--color-cell-background);
+  border-top: 1px solid var(--border-color);
-  border-top: var(--border-session);
+  border-left: 1px solid var(--border-color);
   z-index: 1;
 
   .session-icon-button {

stylesheets/_session_theme.scss

@@ -3,7 +3,7 @@
   background: none !important;
 }
 .module-conversation-header {
-  background: var(--color-cell-background);
+  background: var(--background-primary-color);
 }
 
 .module-message {

ts/themes/SessionTheme.tsx

@@ -552,7 +552,7 @@ export const SessionGlobalStyles = createGlobalStyle`
     /* TODO Theming Consolidate with code */
     /* Conversation Tab */
     /* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner, Member List Item etc. */
-    --conversation-tab-background-color: ${THEMES.CLASSIC_LIGHT.COLOR5};
+    --conversation-tab-background-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
     --conversation-tab-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
     --conversation-tab-background-selected-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
     --conversation-tab-background-unread-color: var(--background-primary-color);