PNSPS-frontend-MaterialUI/src/themes/themeConst.js

import {createTheme} from "@mui/material";
import Palette from "./palette";
import Typography from "./typography";
import {alpha} from "@mui/material/styles";
import {GENERAL_TABLE_BOARDER_COLOR, TABLE_HEADER_TEXT_COLOR} from "./colorConst";
const FONT_SIZE = '1.1rem';
const TABLE_FONT_SIZE = '1.0rem';
const HELPER_FONT_SIZE = '0.9rem';
const ROW_HEIGHT = '46px';
const theme = Palette('light', 'default');
export const CARD_MAX_WIDTH = "98%"

const themeTypography = Typography(
    `'Public Sans', sans-serif`,
);

export const PNSPS_THEME = createTheme({
    palette: theme.palette,
    typography: themeTypography,
    components: {
        MuiImage: {
            root: {
                position: 'relative',
                '&:hover': {
                    '&::after': {
                        content: '""',
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        width: '100%',
                        height: '100%',
                        background: 'rgba(0, 0, 0, 0.5)',
                        opacity: 0,
                        transition: 'opacity 0.3s ease',
                    },
                    '&:hover::after': {
                        opacity: 1,
                    },
                },
            },
        },
        MuiInputAdornment: {
            styleOverrides: {
                root: {
                    marginLeft: '-1px',
                    //marginRight: '0px',
                },
            },
        },
        MuiFormHelperText: {
            styleOverrides: {
                root: {
                    fontSize: HELPER_FONT_SIZE, // Adjust the font size as needed
                },
            },
        },
        MuiPickersBasePicker: {
            styleOverrides: {
                toolbar: {
                    height: ROW_HEIGHT // Set the desired height value here
                }
            }
        },
        MuiPickersDay: {
            root:{
                height: ROW_HEIGHT,
            },
            day: {
                padding: '20px', // Set the desired padding value here
            },
        },
        MuiButtonBase:{
            styleOverrides:{
                root:{
                    '&.MuiChip-root.Mui-disabled':{
                        opacity: 0.75,
                    },
                    '&.MuiButton-root':{
                        fontSize: '1.2rem',
                        fontWeight: '600',
                        alignItems: 'center',
                    },
                }
            }
        },
        MuiIconButton: {
            styleOverrides: {
                root: {
                    marginRight: '-2px',
                    borderRadius: 3
                },
                marginRight: '-3px',
                sizeLarge: {
                    width: theme.spacing(5.5),
                    height: theme.spacing(5.5),
                    fontSize: '1.25rem'
                },
                sizeMedium: {
                    width: theme.spacing(4.5),
                    height: theme.spacing(4.5),
                    fontSize: '1rem'
                },
                sizeSmall: {
                    width: theme.spacing(3.75),
                    height: theme.spacing(3.75),
                    fontSize: '0.75rem'
                }
            }
        },
        MuiInputLabel: {
            styleOverrides: {
                root: {
                    color: 'rgba(0, 0, 0, 0.8)',
                    fontSize: '1.15rem',
                },
            },
        },
        MuiChip:{
            styleOverrides: {
                label: {
                    lineHeight: 'normal',
                    whiteSpace: "inherit",
                    paddingTop: '2px',
                    paddingBottom: '2px'
                },
            },
        },
        MuiAutocomplete: {
            styleOverrides: {
                tag: {
                    height: 'auto',
                    whiteSpace: 'normal',
                },
                inputRoot: {
                    maxHeight: '30vh', // Set the desired height value here
                },
                root: {
                    minHeight: ROW_HEIGHT,
                    '&:MuiAutocomplete-input': {
                        display: 'flex',
                        alignItems: 'center',
                    },
                },
                popupIndicator: {
                    height: '30px',
                    width: '30px',
                },
                endAdornment: {
                    root: {
                        height: '30px',
                        width: '30px',
                        marginRight: '-2px',
                        marginBottom: '3px',
                        borderRadius: 3
                    },
                    marginRight: '-3px',
                    sizeLarge: {
                        width: theme.spacing(5.5),
                        height: theme.spacing(5.5),
                        fontSize: '1.25rem'
                    },
                    sizeMedium: {
                        width: theme.spacing(3.75),
                        height: theme.spacing(3.75),
                        fontSize: '1rem'
                    },
                    sizeSmall: {
                        width: theme.spacing(3.75),
                        height: theme.spacing(3.75),
                        fontSize: '0.75rem'
                    },
                    top: "auto"
                },
            },
        },
        MuiInputBase: {
            root: {
                padding: '2px', // Set the desired padding value here
            },
        },
        MuiOutlinedInput: {
            styleOverrides: {
                input: {
                    padding: '10.5px 14px 10.5px 12px',
                    '&.MuiOutlinedInput-input.Mui-disabled': {
                        WebkitTextFillColor: 'rgba(0, 0, 0, 1)',
                    },
                    color: 'rgba(0, 0, 0, 0.85)'
                },
                root: {
                    '&:hover .MuiOutlinedInput-notchedOutline': {
                        borderColor: theme.palette.primary.light
                    },
                    '&.Mui-focused': {
                        boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}`,
                        '& .MuiOutlinedInput-notchedOutline': {
                            border: `1px solid ${theme.palette.primary.light}`
                        }
                    },
                    '&.Mui-error': {
                        '&:hover .MuiOutlinedInput-notchedOutline': {
                            borderColor: theme.palette.error.light
                        },
                        '&.Mui-focused': {
                            boxShadow: `0 0 0 2px ${alpha(theme.palette.error.main, 0.2)}`,
                            '& .MuiOutlinedInput-notchedOutline': {
                                border: `1px solid ${theme.palette.error.light}`
                            }
                        }
                    },
                    height: ROW_HEIGHT
                },
                inputSizeSmall: {
                    padding: '7.5px 8px 7.5px 12px'
                },
                inputMultiline: {
                    root:{
                        minHeight: ROW_HEIGHT,
                        maxHeight: '50vh'
                    },
                    padding: '7.5px 8px 7.5px 12px'
                }

            }
        },
        MuiTextField: {
            styleOverrides: {
                root: {
                    '& .MuiInputBase-input': {
                        fontSize: FONT_SIZE,
                        display: 'flex',
                        alignItems: 'center',
                        color: 'rgba(0, 0, 0, 0.85)'
                    },
                    '& .MuiInputBase-root': {
                        //height: '40px',
                        minHeight: ROW_HEIGHT,
                        maxHeight: ROW_HEIGHT,
                        boxSizing: 'border-box', // Ensure the background shape follows the size of the TextField
                        //padding: '1px', // Adjust the padding as needed
                    },
                    '& .MuiInputBase-input:disabled': {
                        color: 'rgba(0, 0, 0, 1)',
                        backgroundColor: "#f8f8f8",
                        //backgroundColor: '#777777', // Set background color to #777777 for disabled state
                        //color: '#010101', // Set text color to #111111 for disabled state
                    },
                    '& .Mui-focused.MuiAutocomplete-input': {
                        color: "red"
                    },
                },
            },
        },
        MuiTableCell: {
            styleOverrides: {
                root: {
                    fontSize: TABLE_FONT_SIZE,
                    borderColor: theme.palette.divider
                },
                head: {
                    fontWeight: 600,
                    paddingTop: 3,
                    paddingBottom: 3
                }
            }
        },
        MuiTablePagination:{
            styleOverrides:{
                root:{
                    fontSize: HELPER_FONT_SIZE,
                },
                selectLabel:{
                    fontSize: HELPER_FONT_SIZE,
                },
                displayedRows:{
                    fontSize: HELPER_FONT_SIZE,
                }
            }
        },
        MuiDataGrid: {
            styleOverrides: {
                '&>.MuiDataGrid-main': {
                    '&>.MuiDataGrid-columnHeaders': {
                        borderBottom: 'none',
                        fontWeight: '900',
                    },
                },
                root: {
                    fontSize: TABLE_FONT_SIZE, // Set the font size
                    maxWidth: '98vw',
                    border: 'none !important',
                    '& .MuiDataGrid-cell': {
                        whiteSpace: 'normal', // Enable auto-wrapping
                        wordBreak: 'break-word', // Break words if needed
                    },
                },
                footerContainer:{
                    maxHeight: "40px",
                    minHeight: "40px",
                },
                editInputCell:{
                    fontSize: TABLE_FONT_SIZE,
                },
                cell: {
                    fontSize: TABLE_FONT_SIZE,
                    borderBottom: 'none',
                    '& .MuiDataGrid-cellValue': {
                        whiteSpace: 'normal', // Enable auto-wrapping
                        wordBreak: 'break-word', // Break words if needed
                    },
                },
                columnHeaderCell: {
                    '&:focus': {
                        outline: 'none', // Remove the outline on focus
                    },
                },
                columnHeaders: {
                    borderBottom: '1px solid ' + GENERAL_TABLE_BOARDER_COLOR + ' !important',
                },
                columnHeader: {
                    color: TABLE_HEADER_TEXT_COLOR,
                    fontSize: TABLE_FONT_SIZE,

                    '&:focus': {
                        outline: 'none', // Remove the outline on focus
                    },
                    '&:not(:last-child)': {
                        borderRight: 'none', // Remove the border between column headers
                    },
                    fontWeight: '900',
                },
                row: {
                    borderBottom: 'none',
                },
                pagination: {
                    borderTop: 'none !important',
                    fontSize: TABLE_FONT_SIZE,
                    "& .MuiTablePagination-actions": {
                        border: 'none', // Remove the border around the pagination actions
                    }
                },
                '& .MuiPaginationItem-root': {
                    borderRadius: 0,
                },
            },
        },
        MuiCssBaseline: {
            styleOverrides: {
                '.MuiDataGrid-root .MuiDataGrid-row': {
                    borderBottom: 'none', // Disable the border under each record
                },
                '.MuiDataGrid-root .MuiDataGrid-columnHeader': {
                    borderBottom: 'none', // Disable the border near the column headers
                },
            },
        },
        MuiTab: {
            styleOverrides: {
                root: {
                    fontSize: TABLE_FONT_SIZE,
                    minHeight: 46,
                    color: theme.palette.text.primary
                }
            }
        },
        MuiTabs: {
            styleOverrides: {
                vertical: {
                    overflow: 'visible'
                }
            }
        },
        MuiFormLabel: {
            styleOverrides: {
                root:{
                    color: "#000000"
                }
            }
        },
        MuiTabPanel:{
            styleOverrides:{
                root:{
                    padding: 0
                }
            }
        }
    },
});

export const ARS_NAV_THEME = createTheme({
    typography: {
        fontSize: 14,
    },
});

export const ARS_LOGIN_THEME = createTheme({
    components: {
        MuiFormHelperText: {
            styleOverrides: {
                root: {
                    fontSize: HELPER_FONT_SIZE, // Adjust the font size as needed
                },
            },
        },
        MuiInputLabel: {
            styleOverrides: {
                root: {
                    fontSize: '1.15rem',
                },
            },
        },
        MuiTextField: {
            styleOverrides: {
                root: {
                    '& .MuiInputBase-input': {
                        fontSize: '1.3rem',
                        display: 'flex',
                        alignItems: 'flex-end',
                    },
                    '& .MuiInputBase-root': {
                        height: '50px',
                    },
                },
            },
        },
    },
});