From 31a0c07ab30a4ba5107dafdda4a88c18aa8b8c16 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Sun, 9 Jun 2024 04:04:04 +0530 Subject: [PATCH 1/4] feat(theme): toolbar comps Signed-off-by: Sudhanshu Dasgupta --- .../CustomColumnVisibilityControl.tsx | 6 ++++-- src/custom/SearchBar.tsx | 13 +++++-------- src/custom/UniversalFilter.tsx | 6 ++++-- 3 files changed, 13 insertions(+), 12 deletions(-) diff --git a/src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx b/src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx index 9ffcbe8c..dd05495f 100644 --- a/src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx +++ b/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); + const theme = useTheme(); const handleOpen = (event: React.MouseEvent) => { setAnchorEl(event.currentTarget); @@ -54,7 +56,7 @@ export function CustomColumnVisibilityControl({ } + icon={} arrow /> {columns.map((col) => ( diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx index b77b317d..9da4e95f 100644 --- a/src/custom/SearchBar.tsx +++ b/src/custom/SearchBar.tsx @@ -61,7 +61,6 @@ export interface SearchBarProps { onClear?: () => void; expanded: boolean; setExpanded: (expanded: boolean) => void; - iconFill?: string; } function SearchBar({ @@ -69,13 +68,11 @@ function SearchBar({ placeholder, onClear, expanded, - setExpanded, - iconFill + setExpanded }: SearchBarProps): JSX.Element { const [searchText, setSearchText] = React.useState(''); const searchRef = React.useRef(null); - - const outerTheme = useTheme(); + const theme = useTheme(); const handleSearchChange = (event: React.ChangeEvent): void => { setSearchText(event.target.value); @@ -123,7 +120,7 @@ function SearchBar({ }} >
- + } + icon={} arrow /> ) : ( } + icon={} arrow /> )} diff --git a/src/custom/UniversalFilter.tsx b/src/custom/UniversalFilter.tsx index dd4fe57e..8f878703 100644 --- a/src/custom/UniversalFilter.tsx +++ b/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); 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({ } + icon={} arrow /> {Object.keys(filters).map((filterColumn) => { From e7473c53e8a3c58f2ae6446660e3433427745651 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Sun, 9 Jun 2024 22:12:13 +0530 Subject: [PATCH 2/4] fix(theme): good ux Signed-off-by: Sudhanshu Dasgupta --- .../CustomColumnVisibilityControl.tsx | 2 +- src/custom/UniversalFilter.tsx | 2 +- src/theme/components/outlinedinput.modifier.ts | 6 +++++- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx b/src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx index dd05495f..faf61645 100644 --- a/src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx +++ b/src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx @@ -89,7 +89,7 @@ export function CustomColumnVisibilityControl({ flexDirection: 'column', padding: '1rem', boxShadow: open ? '0px 4px 8px rgba(0, 0, 0, 0.2)' : 'none', - background: theme.palette.background.blur?.heavy + background: theme.palette.background.surfaces }} > {columns.map((col) => ( diff --git a/src/custom/UniversalFilter.tsx b/src/custom/UniversalFilter.tsx index 8f878703..1df8dbab 100644 --- a/src/custom/UniversalFilter.tsx +++ b/src/custom/UniversalFilter.tsx @@ -94,7 +94,7 @@ function UniversalFilter({ padding: '1rem', paddingTop: '1.8rem', boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)', - backgroundColor: theme.palette.background.blur?.heavy + backgroundColor: theme.palette.background.surfaces }} > {Object.keys(filters).map((filterColumn) => { diff --git a/src/theme/components/outlinedinput.modifier.ts b/src/theme/components/outlinedinput.modifier.ts index fdff0d1c..7e3d9d27 100644 --- a/src/theme/components/outlinedinput.modifier.ts +++ b/src/theme/components/outlinedinput.modifier.ts @@ -9,7 +9,8 @@ export const MuiOutlinedInput: Components['MuiOutlinedInput'] = { root: ({ theme }) => { const { palette: { - background: { graphics, brand } + background: { graphics, brand }, + border: { strong } }, typography: { textB1Regular } } = theme; @@ -26,6 +27,9 @@ export const MuiOutlinedInput: Components['MuiOutlinedInput'] = { }, '&:hover .MuiOutlinedInput-notchedOutline': { borderColor: brand?.default + }, + '& .MuiOutlinedInput-notchedOutline': { + borderColor: strong } }; } From a62b94cf9b80f4511efa1f2d52386fe82dce5ada Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Sun, 9 Jun 2024 22:30:18 +0530 Subject: [PATCH 3/4] fix(theme): search Signed-off-by: Sudhanshu Dasgupta --- src/custom/SearchBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx index 9da4e95f..4ae07bc7 100644 --- a/src/custom/SearchBar.tsx +++ b/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': { From 7776ad665e48471076d77cee743f80412d1d010d Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Wed, 24 Jul 2024 09:58:52 +0530 Subject: [PATCH 4/4] fix colors issue Signed-off-by: Sudhanshu Dasgupta --- src/custom/SearchBar.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx index 4ae07bc7..3f68868d 100644 --- a/src/custom/SearchBar.tsx +++ b/src/custom/SearchBar.tsx @@ -39,6 +39,7 @@ const customTheme = (theme: Theme) => MuiInput: { styleOverrides: { root: { + color: theme.palette.text.default, '&::before': { borderBottom: '2px solid var(--TextField-brandBorderColor)' },