feat: updated theming for search bars

ts/components/SessionHeaderSearchInput.tsx

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
 export const SessionHeaderSearchInput = styled.input<{ darkMode: boolean }>`
-  color: var(--input-text-color);
+  color: var(--search-bar-text-control-color);
-  background-color: var(--input-background-color);
+  background-color: var(--search-bar-background-color);
   border: 1px solid var(--input-border-color);
   padding: 0 26px 0 30px;
   margin-inline-start: 8px;
@@ -19,11 +19,13 @@ export const SessionHeaderSearchInput = styled.input<{ darkMode: boolean }>`
   border-radius: '4px';
 
   &::placeholder {
-    color: var(--input-text-placeholder-color);
+    color: var(--search-bar-text-control-color);
   }
 
   &:focus {
-    border: solid 1px var(${props => (props.darkMode ? '--primary-color' : '--input-text-color')});
+    border: solid 1px
+      var(${props => (props.darkMode ? '--primary-color' : '--search-bar-text-user-color')});
+    color: var(--search-bar-text-user-color);
     outline: none;
   }
 `;

ts/components/SessionSearchInput.tsx

@@ -8,7 +8,6 @@ import { getOverlayMode } from '../state/selectors/section';
 import { cleanSearchTerm } from '../util/cleanSearchTerm';
 import { SessionIconButton } from './icon';
 
-// TODO Theming possibly update to use Search Bar Component Colors
 const StyledSearchInput = styled.div`
   height: var(--search-input-height);
   width: 100%;
@@ -19,6 +18,15 @@ const StyledSearchInput = styled.div`
 
   .session-icon-button {
     margin: auto 10px;
+    &:hover svg path {
+      fill: var(--search-bar-icon-hover-color);
+    }
+  }
+
+  &:hover {
+    svg path:first-child {
+      fill: var(--search-bar-icon-hover-color);
+    }
   }
 `;
 
@@ -31,9 +39,10 @@ const StyledInput = styled.input`
   font-family: var(--font-default);
   text-overflow: ellipsis;
   background: none;
-  color: var(--conversation-tab-text-color);
+  color: var(--search-bar-text-control-color);
 
   &:focus {
+    color: var(--search-bar-text-user-color);
     outline: none !important;
   }
 `;
@@ -81,7 +90,11 @@ export const SessionSearchInput = () => {
 
   return (
     <StyledSearchInput>
-      <SessionIconButton iconSize="medium" iconType="search" />
+      <SessionIconButton
+        iconColor="var(--search-bar-icon-color)"
+        iconSize="medium"
+        iconType="search"
+      />
       <StyledInput
         value={currentSearchTerm}
         onChange={e => {
@@ -93,6 +106,7 @@ export const SessionSearchInput = () => {
       />
       {Boolean(currentSearchTerm.length) && (
         <SessionIconButton
+          iconColor="var(--search-bar-icon-color)"
           iconSize="tiny"
           iconType="exit"
           onClick={() => {

ts/themes/SessionTheme.tsx

@@ -556,9 +556,8 @@ export const SessionGlobalStyles = createGlobalStyle`
     --button-icon-stroke-hover-color: var(--text-primary-color);
     --button-icon-stroke-selected-color: var(--text-primary-color);
 
-    /* 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, Contact List Items, Message Right Click Highlighting etc. */
+    /* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Message Requests Banner, Member List Item, Contact List Items, Message Right Click Highlighting etc. */
     --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};
@@ -569,7 +568,6 @@ export const SessionGlobalStyles = createGlobalStyle`
     --conversation-tab-text-secondary-color: var(--text-secondary-color);
     --conversation-tab-bubble-background-color: ${THEMES.CLASSIC_LIGHT.COLOR3};
     --conversation-tab-bubble-text-color: var(--text-primary-color);
-    /* TODO Theming account for overriding */
     --conversation-tab-color-strip-color: var(--primary-color);
 
     /* Search Bar */