fix(theme): searchbar

Signed-off-by: Sudhanshu Dasgupta <[email protected]>
layer5io · Apr 17, 2024 · 3a145fe · 3a145fe
1 parent 9e21451
commit 3a145fe
Showing 1 changed file with 69 additions and 15 deletions.
diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx
@@ -1,9 +1,59 @@
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { Theme, ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
 import React from 'react';
 import { ClickAwayListener } from '../base/ClickAwayListener';
 import { TextField } from '../base/TextField';
 import { CloseIcon, SearchIcon } from '../icons';
 import TooltipIcon from './TooltipIcon';
 
+const customTheme = (theme: Theme) =>
+  createTheme({
+    components: {
+      MuiTextField: {
+        styleOverrides: {
+          root: {
+            '--TextField-brandBorderColor': 'rgba(0, 0, 0, 0.5)',
+            '--TextField-brandBorderHoverColor': theme.palette.background.graphics?.default,
+            '--TextField-brandBorderFocusedColor': theme.palette.background.graphics?.default,
+            '& label.Mui-focused': {
+              color: 'var(--TextField-brandBorderFocusedColor)'
+            }
+          }
+        }
+      },
+      MuiOutlinedInput: {
+        styleOverrides: {
+          notchedOutline: {
+            borderColor: 'var(--TextField-brandBorderColor)'
+          },
+          root: {
+            [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
+              borderColor: 'var(--TextField-brandBorderHoverColor)'
+            },
+            [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: {
+              borderColor: 'var(--TextField-brandBorderFocusedColor)'
+            }
+          }
+        }
+      },
+      MuiInput: {
+        styleOverrides: {
+          root: {
+            '&::before': {
+              borderBottom: '2px solid var(--TextField-brandBorderColor)'
+            },
+            '&:hover:not(.Mui-disabled, .Mui-error):before': {
+              borderBottom: '2px solid var(--TextField-brandBorderHoverColor)'
+            },
+            '&.Mui-focused:after': {
+              borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)'
+            }
+          }
+        }
+      }
+    }
+  });
+
 export interface SearchBarProps {
   onSearch: (searchText: string) => void;
   style?: React.CSSProperties;
@@ -25,6 +75,8 @@ function SearchBar({
   const [searchText, setSearchText] = React.useState('');
   const searchRef = React.useRef<HTMLInputElement | null>(null);
 
+  const outerTheme = useTheme();
+
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
     setSearchText(event.target.value);
   };
@@ -71,21 +123,23 @@ function SearchBar({
       }}
     >
       <div>
-        <TextField
-          variant="standard"
-          value={searchText}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            handleSearchChange(e);
-            onSearch(e.target.value);
-          }}
-          inputRef={searchRef}
-          placeholder={placeholder}
-          style={{
-            width: expanded ? '150px' : '0',
-            opacity: expanded ? 1 : 0,
-            transition: 'width 0.3s ease, opacity 0.3s ease'
-          }}
-        />
+        <ThemeProvider theme={customTheme(outerTheme)}>
+          <TextField
+            variant="standard"
+            value={searchText}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              handleSearchChange(e);
+              onSearch(e.target.value);
+            }}
+            inputRef={searchRef}
+            placeholder={placeholder}
+            style={{
+              width: expanded ? '150px' : '0',
+              opacity: expanded ? 1 : 0,
+              transition: 'width 0.3s ease, opacity 0.3s ease'
+            }}
+          />
+        </ThemeProvider>
         {expanded ? (
           <TooltipIcon
             title="Close"