Merge pull request #645 from sudhanshutech/toolbar/options

Add theming to toolbar options

Author: sudhanshutech

src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@mui/material';
 import React from 'react';
 import { Box } from '../../base/Box';
 import { Card } from '../../base/Card';
@@ -30,6 +31,7 @@ export function CustomColumnVisibilityControl({
 }: CustomColumnVisibilityControlProps): JSX.Element {
   const [open, setOpen] = React.useState(false);
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const theme = useTheme();
 
   const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -54,7 +56,7 @@ export function CustomColumnVisibilityControl({
         <TooltipIcon
           title="View Columns"
           onClick={handleOpen}
-          icon={<ColumnIcon fill="#3c494f" />}
+          icon={<ColumnIcon fill={theme.palette.icon.default} />}
           arrow
         />
         <PopperListener
@@ -87,7 +89,7 @@ export function CustomColumnVisibilityControl({
                     flexDirection: 'column',
                     padding: '1rem',
                     boxShadow: open ? '0px 4px 8px rgba(0, 0, 0, 0.2)' : 'none',
-                    background: '#f4f5f7'
+                    background: theme.palette.background.surfaces
                   }}
                 >
                   {columns.map((col) => (

src/custom/SearchBar.tsx

@@ -12,7 +12,7 @@ const customTheme = (theme: Theme) =>
       MuiTextField: {
         styleOverrides: {
           root: {
-            '--TextField-brandBorderColor': 'rgba(0, 0, 0, 0.5)',
+            '--TextField-brandBorderColor': theme.palette.border.strong,
             '--TextField-brandBorderHoverColor': theme.palette.background.graphics?.default,
             '--TextField-brandBorderFocusedColor': theme.palette.background.graphics?.default,
             '& label.Mui-focused': {
@@ -39,6 +39,7 @@ const customTheme = (theme: Theme) =>
       MuiInput: {
         styleOverrides: {
           root: {
+            color: theme.palette.text.default,
             '&::before': {
               borderBottom: '2px solid var(--TextField-brandBorderColor)'
             },
@@ -61,21 +62,18 @@ export interface SearchBarProps {
   onClear?: () => void;
   expanded: boolean;
   setExpanded: (expanded: boolean) => void;
-  iconFill?: string;
 }
 
 function SearchBar({
   onSearch,
   placeholder,
   onClear,
   expanded,
-  setExpanded,
-  iconFill
+  setExpanded
 }: SearchBarProps): JSX.Element {
   const [searchText, setSearchText] = React.useState('');
   const searchRef = React.useRef<HTMLInputElement | null>(null);
-
-  const outerTheme = useTheme();
+  const theme = useTheme();
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
     setSearchText(event.target.value);
@@ -123,7 +121,7 @@ function SearchBar({
       }}
     >
       <div>
-        <ThemeProvider theme={customTheme(outerTheme)}>
+        <ThemeProvider theme={customTheme(theme)}>
           <TextField
             variant="standard"
             value={searchText}
@@ -144,14 +142,14 @@ function SearchBar({
           <TooltipIcon
             title="Close"
             onClick={handleClearIconClick}
-            icon={<CloseIcon fill={iconFill} />}
+            icon={<CloseIcon fill={theme.palette.icon.default} />}
             arrow
           />
         ) : (
           <TooltipIcon
             title="Search"
             onClick={handleSearchIconClick}
-            icon={<SearchIcon fill={iconFill} />}
+            icon={<SearchIcon fill={theme.palette.icon.default} />}
             arrow
           />
         )}

src/custom/UniversalFilter.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@mui/material';
 import { SelectChangeEvent } from '@mui/material/Select';
 import React from 'react';
 import { Button } from '../base/Button';
@@ -36,6 +37,7 @@ function UniversalFilter({
 }: UniversalFilterProps): JSX.Element {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const [open, setOpen] = React.useState(false);
+  const theme = useTheme();
 
   const handleFilterChange = (event: React.ChangeEvent<{ value: string }>, columnName: string) => {
     const value = event.target.value;
@@ -70,7 +72,7 @@ function UniversalFilter({
         <TooltipIcon
           title="Filter"
           onClick={handleClick}
-          icon={<FilterIcon fill="#3c494f" />}
+          icon={<FilterIcon fill={theme.palette.icon.default} />}
           arrow
         />
         <PopperListener
@@ -92,7 +94,7 @@ function UniversalFilter({
                     padding: '1rem',
                     paddingTop: '1.8rem',
                     boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
-                    backgroundColor: '#f4f5f7'
+                    backgroundColor: theme.palette.background.surfaces
                   }}
                 >
                   {Object.keys(filters).map((filterColumn) => {

src/theme/components/outlinedinput.modifier.ts

@@ -9,7 +9,8 @@ export const MuiOutlinedInput: Components<Theme>['MuiOutlinedInput'] = {
     root: ({ theme }) => {
       const {
         palette: {
-          background: { graphics, brand }
+          background: { graphics, brand },
+          border: { strong }
         },
         typography: { textB1Regular }
       } = theme;
@@ -26,6 +27,9 @@ export const MuiOutlinedInput: Components<Theme>['MuiOutlinedInput'] = {
         },
         '&:hover .MuiOutlinedInput-notchedOutline': {
           borderColor: brand?.default
+        },
+        '& .MuiOutlinedInput-notchedOutline': {
+          borderColor: strong
         }
       };
     }