From 692ebd3e47e80b116875adf95aa2e9c5c9b441ed Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Mon, 10 Oct 2022 11:35:26 +1100
Subject: [PATCH] feat: updated theming for search bars

---
 ts/components/SessionHeaderSearchInput.tsx | 10 ++++++----
 ts/components/SessionSearchInput.tsx       | 20 +++++++++++++++++---
 ts/themes/SessionTheme.tsx                 |  4 +---
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/ts/components/SessionHeaderSearchInput.tsx b/ts/components/SessionHeaderSearchInput.tsx
index 0559ff6ab..cb647ca83 100644
--- a/ts/components/SessionHeaderSearchInput.tsx
+++ b/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);
-  background-color: var(--input-background-color);
+  color: var(--search-bar-text-control-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;
   }
 `;
diff --git a/ts/components/SessionSearchInput.tsx b/ts/components/SessionSearchInput.tsx
index e2f902dab..4ef3e2166 100644
--- a/ts/components/SessionSearchInput.tsx
+++ b/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={() => {
diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx
index fc5881b60..756e50c4a 100644
--- a/ts/themes/SessionTheme.tsx
+++ b/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 */