From 769927f649bf43c314824be292ac366066cdf97a Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Tue, 28 May 2024 18:25:46 +0530 Subject: [PATCH 1/5] feat(theme): tables Signed-off-by: Sudhanshu Dasgupta --- src/custom/ResponsiveDataTable.tsx | 73 ++++++++++++++++++++++++++---- 1 file changed, 65 insertions(+), 8 deletions(-) diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx index 07fd470f9..5ba676b36 100644 --- a/src/custom/ResponsiveDataTable.tsx +++ b/src/custom/ResponsiveDataTable.tsx @@ -1,6 +1,61 @@ +import { Theme, ThemeProvider, createTheme } from '@mui/material'; import MUIDataTable from 'mui-datatables'; import React, { useCallback } from 'react'; +const dataTableTheme = (theme: Theme) => + createTheme({ + components: { + MuiTable: { + styleOverrides: { + root: { + border: `2px solid ${theme.palette.border.normal}`, + width: '-webkit-fill-available', + '@media (max-width: 500px)': { + wordWrap: 'break-word' + } + } + } + }, + MUIDataTableHeadCell: { + styleOverrides: { + data: { + fontWeight: 'bold', + textTransform: 'uppercase' + }, + root: { + fontWeight: 'bold', + textTransform: 'uppercase', + color: theme.palette.text.default + } + } + }, + MUIDataTableSearch: { + styleOverrides: { + main: { + '@media (max-width: 600px)': { + justifyContent: 'center' + } + } + } + }, + MuiInput: { + styleOverrides: { + root: { + '&:before': { + borderBottom: `2px solid ${theme.palette.border.brand}` + }, + '&.Mui-focused:after': { + borderBottom: `2px solid ${theme.palette.border.brand}` + }, + '&:hover:not(.Mui-disabled):before': { + borderBottom: `2px solid ${theme.palette.border.brand}` + } + } + } + } + } + }); + export interface Column { name: string; label: string; @@ -130,14 +185,16 @@ const ResponsiveDataTable = ({ }; return ( - + + + ); }; From 253f2c6a49728ce305f248754654c9acb2092a8d Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Tue, 28 May 2024 18:25:46 +0530 Subject: [PATCH 2/5] feat(theme): tables Signed-off-by: Sudhanshu Dasgupta --- src/custom/ResponsiveDataTable.tsx | 73 ++++++++++++++++++++++++++---- 1 file changed, 65 insertions(+), 8 deletions(-) diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx index 07fd470f9..5ba676b36 100644 --- a/src/custom/ResponsiveDataTable.tsx +++ b/src/custom/ResponsiveDataTable.tsx @@ -1,6 +1,61 @@ +import { Theme, ThemeProvider, createTheme } from '@mui/material'; import MUIDataTable from 'mui-datatables'; import React, { useCallback } from 'react'; +const dataTableTheme = (theme: Theme) => + createTheme({ + components: { + MuiTable: { + styleOverrides: { + root: { + border: `2px solid ${theme.palette.border.normal}`, + width: '-webkit-fill-available', + '@media (max-width: 500px)': { + wordWrap: 'break-word' + } + } + } + }, + MUIDataTableHeadCell: { + styleOverrides: { + data: { + fontWeight: 'bold', + textTransform: 'uppercase' + }, + root: { + fontWeight: 'bold', + textTransform: 'uppercase', + color: theme.palette.text.default + } + } + }, + MUIDataTableSearch: { + styleOverrides: { + main: { + '@media (max-width: 600px)': { + justifyContent: 'center' + } + } + } + }, + MuiInput: { + styleOverrides: { + root: { + '&:before': { + borderBottom: `2px solid ${theme.palette.border.brand}` + }, + '&.Mui-focused:after': { + borderBottom: `2px solid ${theme.palette.border.brand}` + }, + '&:hover:not(.Mui-disabled):before': { + borderBottom: `2px solid ${theme.palette.border.brand}` + } + } + } + } + } + }); + export interface Column { name: string; label: string; @@ -130,14 +185,16 @@ const ResponsiveDataTable = ({ }; return ( - + + + ); }; From 78f885729a4f41f5bad9f066fac71c15aff0d817 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Fri, 31 May 2024 03:26:54 +0530 Subject: [PATCH 3/5] fix(theme): comps Signed-off-by: Sudhanshu Dasgupta --- src/custom/ResponsiveDataTable.tsx | 38 +++++++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx index 5ba676b36..f29f9fa53 100644 --- a/src/custom/ResponsiveDataTable.tsx +++ b/src/custom/ResponsiveDataTable.tsx @@ -8,7 +8,7 @@ const dataTableTheme = (theme: Theme) => MuiTable: { styleOverrides: { root: { - border: `2px solid ${theme.palette.border.normal}`, + // border: `2px solid ${theme.palette.border.normal}`, width: '-webkit-fill-available', '@media (max-width: 500px)': { wordWrap: 'break-word' @@ -38,6 +38,42 @@ const dataTableTheme = (theme: Theme) => } } }, + MuiCheckbox: { + styleOverrides: { + root: { + intermediate: false, + color: 'transparent', + '&.Mui-checked': { + color: theme.palette.text.default, + '& .MuiSvgIcon-root': { + width: '1.25rem', + height: '1.25rem', + borderColor: theme.palette.border.brand, + marginLeft: '0px', + padding: '0px' + } + }, + '&.MuiCheckbox-indeterminate': { + color: theme.palette.background.brand?.default + }, + '& .MuiSvgIcon-root': { + width: '1.25rem', + height: '1.25rem', + border: `.75px solid ${theme.palette.border.strong}`, + borderRadius: '2px', + padding: '0px' + }, + '&:hover': { + backgroundColor: 'transparent' + }, + '&.Mui-disabled': { + '&:hover': { + cursor: 'not-allowed' + } + } + } + } + }, MuiInput: { styleOverrides: { root: { From 91b7694102bae316fbfded998b3fafc617a1b1fe Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Fri, 31 May 2024 18:03:55 +0530 Subject: [PATCH 4/5] fix(theme): enhance Signed-off-by: Sudhanshu Dasgupta --- src/custom/ResponsiveDataTable.tsx | 31 ++++++++++++++++++++++++++++-- src/theme/palette.ts | 9 +++++++-- 2 files changed, 36 insertions(+), 4 deletions(-) diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx index f29f9fa53..830daa8ae 100644 --- a/src/custom/ResponsiveDataTable.tsx +++ b/src/custom/ResponsiveDataTable.tsx @@ -12,7 +12,9 @@ const dataTableTheme = (theme: Theme) => width: '-webkit-fill-available', '@media (max-width: 500px)': { wordWrap: 'break-word' - } + }, + background: theme.palette.background.constant?.table, + color: theme.palette.text.default } } }, @@ -20,7 +22,8 @@ const dataTableTheme = (theme: Theme) => styleOverrides: { data: { fontWeight: 'bold', - textTransform: 'uppercase' + textTransform: 'uppercase', + color: theme.palette.text.default }, root: { fontWeight: 'bold', @@ -74,6 +77,30 @@ const dataTableTheme = (theme: Theme) => } } }, + MuiTableCell: { + styleOverrides: { + body: { + color: theme.palette.text.default + }, + root: { + borderBottom: 'none' + } + } + }, + MUIDataTablePagination: { + styleOverrides: { + toolbar: { + color: theme.palette.text.default + } + } + }, + MUIDataTableSelectCell: { + styleOverrides: { + headerCell: { + background: theme.palette.background.constant?.table + } + } + }, MuiInput: { styleOverrides: { root: { diff --git a/src/theme/palette.ts b/src/theme/palette.ts index 3369d7604..062246e03 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -33,6 +33,7 @@ declare module '@mui/material/styles' { constant?: { disabled: string; white: string; + table: string; }; inverse?: string; brand?: Interactiveness; @@ -84,6 +85,7 @@ declare module '@mui/material/styles' { constant?: { white: string; disabled: string; + table: string; }; inverse?: string; brand?: Interactiveness; @@ -116,6 +118,7 @@ declare module '@mui/material/styles' { constant?: { white: string; disabled: string; + table: string; }; inverse?: string; brand?: Interactiveness; @@ -252,7 +255,8 @@ export const lightModePalette: PaletteOptions = { code: Colors.charcoal[90], constant: { white: Colors.accentGrey[100], - disabled: Colors.charcoal[70] + disabled: Colors.charcoal[70], + table: Colors.charcoal[100] }, surfaces: Colors.accentGrey[100] }, @@ -365,7 +369,8 @@ export const darkModePalette: PaletteOptions = { code: Colors.accentGrey[90], constant: { white: Colors.accentGrey[100], - disabled: Colors.charcoal[70] + disabled: Colors.charcoal[70], + table: '#363636' }, surfaces: Colors.accentGrey[10] }, From 2eb0eb9a4561061413b95cd51d2edef6dd1b6f2b Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Mon, 3 Jun 2024 22:43:24 +0530 Subject: [PATCH 5/5] fix(border): theme Signed-off-by: Sudhanshu Dasgupta --- src/custom/ResponsiveDataTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx index 830daa8ae..22d5bf673 100644 --- a/src/custom/ResponsiveDataTable.tsx +++ b/src/custom/ResponsiveDataTable.tsx @@ -83,7 +83,7 @@ const dataTableTheme = (theme: Theme) => color: theme.palette.text.default }, root: { - borderBottom: 'none' + borderBottom: `1px solid ${theme.palette.border.default}` } } },