apply new theme

src/App.js

@@ -4,16 +4,20 @@ import ThemeCustomization from 'themes';
 import ScrollTop from 'components/ScrollTop';
 import {ToastContainer} from "react-toastify";
 import 'react-toastify/dist/ReactToastify.css';
+import {PNSPS_THEME} from "./themes/themeConst";
+import {ThemeProvider} from "@emotion/react";
 //import {isUserLoggedIn} from 'utils/Utils';
 //import {DefaultRoute} from 'routes/index'
 // ==============================|| APP - THEME, ROUTER, LOCAL  ||============================== //
 
 const App = () => (
   <ThemeCustomization>
+    <ThemeProvider theme={PNSPS_THEME}>
     <ScrollTop>
         <Routes>
         </Routes>
     </ScrollTop>
+    </ThemeProvider>
     <ToastContainer/>
   </ThemeCustomization>
 );

src/pages/PublicNotice/Search_GLD/SearchForm.js

@@ -1,7 +1,6 @@
 // material-ui
 import {
     Button,
-    CardContent,
     Grid, TextField,
     Autocomplete,
     Typography
@@ -12,6 +11,8 @@ import * as React from "react";
 import * as ComboData from "utils/ComboData";
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils";
+import {ThemeProvider} from "@emotion/react";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -30,6 +31,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
 
+    const marginBottom = 2;
     const { reset, register, handleSubmit } = useForm()
     const onSubmit = (data) => {
         data.status = selectedLabelsString
@@ -88,18 +90,16 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
         >
 
             <form onSubmit={handleSubmit(onSubmit)}>
-                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 3, mb: 3}} width="98%">
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1, mb: marginBottom}} width="98%">
                     {/*row 1*/}
-                    <Grid item xs={12}>
-                        <CardContent sx={{ px: 2.5, pt: 3 }}>
-                            <Grid item justifyContent="space-between" alignItems="center">
-                                <Typography variant="h5">Search Form</Typography>
-                            </Grid>
-                        </CardContent>
+                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:marginBottom}}>
+                        <Typography variant="pnspsFormTitle" >
+                            Search Form
+                        </Typography>
                     </Grid>
                     {/*row 2*/}
                     <Grid container display="flex" alignItems={"center"}>
-                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
                             <TextField
                                 fullWidth
                                 {...register("appNo")}
@@ -112,7 +112,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                             />
                         </Grid>
 
-                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
                             <TextField
                                 fullWidth
                                 {...register("dateFrom")}
@@ -130,7 +130,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                             />
                         </Grid>
 
-                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
                             <TextField
                                 fullWidth
                                 InputLabelProps={{
@@ -148,7 +148,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                             />
                         </Grid>
 
-                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
                             <TextField
                                 fullWidth
                                 {...register("contact")}
@@ -162,7 +162,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
 
                         </Grid>
 
-                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
                             {/* <Autocomplete
                             {...register("status")}
                             disablePortal
@@ -189,6 +189,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                 multiple
                                 {...register("status")}
                                 id="status"
+                                size="small"
                                 options={ComboData.publicNoticeStatic_GLD}
                                 value={selectedStatus}
                                 onChange={(event, newValue) => {
@@ -221,7 +222,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
 
                         {
                             orgCombo ?
-                                <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                                <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
                                     <Autocomplete
                                         {...register("orgId")}
                                         disablePortal
@@ -247,11 +248,12 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                 : <></>
                         }
 
-                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
                             <Autocomplete
                                 {...register("issueId")}
                                 disablePortal
                                 id="issueId"
+                                size="small"
                                 options={issueCombo}
                                 value={issueSelected}
                                 inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""}
@@ -272,7 +274,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                             />
                         </Grid>
 
-                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
                             <TextField
                                 fullWidth
                                 {...register("groupNo")}
@@ -288,32 +290,31 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
 
                     {/*last row*/}
                     <Grid container maxWidth justifyContent="flex-end">
-
-                        <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Grid item sx={{ ml: 3, mr: 3 }}>
                             <Button
-                                size="large"
                                 variant="contained"
                                 onClick={resetForm}
                                 sx={{
                                     textTransform: 'capitalize',
                                     alignItems: 'end'
                                 }}>
-                                <Typography variant="h5">Clear</Typography>
+                                Clear
                             </Button>
                         </Grid>
 
-                        <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                        <Grid item sx={{ ml: 3, mr: 3 }}>
                             <Button
-                                size="large"
                                 variant="contained"
                                 type="submit"
                                 sx={{
                                     textTransform: 'capitalize',
                                     alignItems: 'end'
                                 }}>
-                                <Typography variant="h5">Submit</Typography>
+                                Submit
                             </Button>
                         </Grid>
+                        </ThemeProvider>
                     </Grid>
                 </Grid>
             </form>

src/themes/buttonConst.js

@@ -0,0 +1,147 @@
+import {createTheme} from "@mui/material";
+
+export const PNSPS_BUTTON_THEME = createTheme({
+    palette: {
+        create: {
+            main: '#57B962',
+            // light: will be calculated from palette.primary.main,
+            // dark: will be calculated from palette.primary.main,
+            // contrastText: will be calculated to contrast with palette.primary.main
+            contrastText: '#FFFFFF',
+        },
+        delete: {
+            main: '#E03C04',
+            contrastText: '#FFFFFF',
+
+        },
+        cancel: {
+            main: '#999999',
+            contrastText: '#FFFFFF',
+
+        },
+        save:{
+            main: '#448DF2',
+            contrastText: '#FFFFFF',
+        },
+        export:{
+            main: '#8C52FF',
+            contrastText: '#FFFFFF',
+        },
+        saveAs:{
+            main: '#FFBD59',
+            contrastText: '#FFFFFF',
+        },
+        edit:{
+            main: '#F3AF2B',
+            contrastText: '#FFFFFF',
+        },
+        exportExcel:{
+            main: '#6A8B9E',
+            contrastText: '#FFFFFF',
+        }
+    },
+    components: {
+        MuiDataGrid: {
+            styleOverrides: {
+                actionsCell: {
+                    '& .MuiDataGrid-actionsContainer .MuiIconButton-root': {
+                        fontSize: '80px', // Set the desired icon size here
+                    },
+                },
+            },
+        },
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    fontSize: '1.0rem',
+                    height: '40px',
+                    width: '40vw', // Default width for xs screen sizes
+                    '@media (min-width: 600px)': { // sm breakpoint
+                        width: '20vw',
+                    },
+                    '@media (min-width: 960px)': { // md breakpoint
+                        width: '15vw',
+                    },
+                    '@media (min-width: 1280px)': { // lg breakpoint
+                        width: '7vw',
+                    },
+                    textTransform: "none",
+                    alignItems: 'center'
+                },
+            },
+        },
+    }
+});
+
+export const PNSPS_LONG_BUTTON_THEME = createTheme({
+    palette: {
+        create: {
+            main: '#57B962',
+            // light: will be calculated from palette.primary.main,
+            // dark: will be calculated from palette.primary.main,
+            // contrastText: will be calculated to contrast with palette.primary.main
+            contrastText: '#FFFFFF',
+        },
+        delete: {
+            main: '#E03C04',
+            contrastText: '#FFFFFF',
+
+        },
+        cancel: {
+            main: '#999999',
+            contrastText: '#FFFFFF',
+
+        },
+        save:{
+            main: '#448DF2',
+            contrastText: '#FFFFFF',
+        },
+        export:{
+            main: '#8C52FF',
+            contrastText: '#FFFFFF',
+        },
+        saveAs:{
+            main: '#FFBD59',
+            contrastText: '#FFFFFF',
+        },
+        edit:{
+            main: '#F3AF2B',
+            contrastText: '#FFFFFF',
+        },
+        exportExcel:{
+            main: '#60667E',
+            contrastText: '#FFFFFF',
+        }
+    },
+    components: {
+        MuiDataGrid: {
+            styleOverrides: {
+                actionsCell: {
+                    '& .MuiDataGrid-actionsContainer .MuiIconButton-root': {
+                        fontSize: '80px', // Set the desired icon size here
+                    },
+                },
+            },
+        },
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    fontSize: '1.0rem',
+                    height: '40px',
+                    width: '40vw', // Default width for xs screen sizes
+                    '@media (min-width: 600px)': { // sm breakpoint
+                        width: '30vw',
+                    },
+                    '@media (min-width: 960px)': { // md breakpoint
+                        width: '25vw',
+                    },
+                    '@media (min-width: 1280px)': { // lg breakpoint
+                        width: '14vw',
+                    },
+                    textTransform: "none",
+                    alignItems: 'center'
+                },
+            },
+        },
+    }
+});

src/themes/colorConst.js

@@ -0,0 +1,68 @@
+import { createTheme } from "@mui/material";
+
+export const chartColor = [
+    '#CB4047', '#ED3A41', '#F47B50', '#FBA647',
+    '#FDB64C', '#CCBB32', '#9ACC59', '#57B962',
+    '#1E83C5', '#7C4A9D'
+];
+
+export const chartSingleColor = [
+    '#f2969a', '#fc9599', '#faa789', '#f7ae94',
+    '#ffd491', '#ede5a1', '#d1f5a2', '#9de0a4',
+    '#a2d4f5', '#b685d6'
+];
+
+export const rankColor = [
+    '#FFD700', '#C0C0C0', '#CD853F', '#57B962', '#57B962',
+    '#57B962', '#57B962', '#57B962', '#57B962', '#57B962'
+];
+
+export const piechartColor1 = [
+    '#E84A3E', '#F2883C', '#FDCD4D', '#CE478A', '#B63D2A',
+    '#6A8B9E', '#60667E', '#58865F', '#2F763E', '#7D80B5',
+];
+
+export const piechartColor2 = [
+    '#6A8B9E', '#60667E', '#58865F', '#2F763E', '#7D80B5',
+    '#E84A3E', '#F2883C', '#FDCD4D', '#CE478A', '#B63D2A',
+];
+
+export const cardBorderColor = [
+    '#efb142', '#4bb641', '#448df2', '#e03c04'
+];
+
+export const chartLineColor = [
+    '#FFFFFF', '#D9D9D9'
+];
+
+export const GENERAL_RED_COLOR = '#e03c04';
+
+export const TABLE_HEADER_TEXT_COLOR = "#3367D1";
+
+export const GENERAL_INFO_COLOR = '#448df2';
+
+export const GENERAL_SETTING_COLOR = '#666666';
+
+export const GENERAL_TABLE_BOARDER_COLOR = '#F0F0F0';
+
+export const GENERAL_BORDER_COLOR ='#e6ebf1';
+
+export const GENERAL_TEXT_COLOR ='#262626';
+
+export const formTheme = createTheme({
+    components: {
+        MuiFormLabel: {
+            root: { // Name of the rule
+                color: "rgba(0, 0, 0, 1)",
+            },
+            styleOverrides: {
+                asterisk: {
+                    color: "#db3131",
+                    "&$error": {
+                        color: "#db3131",
+                    },
+                },
+            },
+        },
+    },
+});

src/themes/themeConst.js

@@ -0,0 +1,407 @@
+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 = '42.5px';
+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: FONT_SIZE
+                    },
+                }
+            }
+        },
+        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: '1rem',
+                },
+            },
+        },
+        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(4.5),
+                        height: theme.spacing(4.5),
+                        fontSize: '1rem'
+                    },
+                    sizeSmall: {
+                        width: theme.spacing(3.75),
+                        height: theme.spacing(3.75),
+                        fontSize: '0.75rem'
+                    }
+                },
+            },
+        },
+        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: '#888888',
+                    },
+                    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}`
+                            }
+                        }
+                    }
+                },
+                inputSizeSmall: {
+                    padding: '7.5px 8px 7.5px 12px'
+                },
+                inputMultiline: {
+                    root:{
+                        minHeight:'42.5px',
+                        maxHeight: '50vh'
+                    },
+                    padding: '7.5px 8px 7.5px 12px'
+                }
+
+            }
+        },
+        MuiTextField: {
+            styleOverrides: {
+                root: {
+                    '& .MuiInputBase-input': {
+                        fontSize: FONT_SIZE,
+                        display: 'flex',
+                        alignItems: 'center',
+                    },
+                    '& .MuiInputBase-root': {
+                        //height: '40px',
+                        minHeight: '42.5px',
+                        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, 0.8)',
+                        //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'
+                }
+            }
+        }
+    },
+});
+
+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',
+                    },
+                },
+            },
+        },
+    },
+});

src/themes/typography.js

@@ -7,6 +7,11 @@ const Typography = (fontFamily) => ({
   fontWeightRegular: 400,
   fontWeightMedium: 500,
   fontWeightBold: 600,
+  pnspsFormTitle: {
+    fontWeight: 600,
+    fontSize: '1.175rem',
+    lineHeight: 1.4
+  },
   h1: {
     fontWeight: 600,
     fontSize: '2.5rem',