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

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',
        },
        error:{
            main: '#F3AF2B',
            contrastText: '#FFFFFF',
        },
        exportExcel:{
            main: '#6A8B9E',
            contrastText: '#FFFFFF',
        },
        success:{
            main: '#448DF2',
            contrastText: '#FFFFFF',
        },
        green:{
            main: '#4ac234',
            contrastText: '#FFFFFF',
        },
        orange: {
            main: '#ed9740',
            light: '#ff5e5e',
            dark: '#b0671e',
            contrastText: '#fff',
        },
    },
    components: {
        MuiDataGrid: {
            styleOverrides: {
                actionsCell: {
                    '& .MuiDataGrid-actionsContainer .MuiIconButton-root': {
                        fontSize: '80px', // Set the desired icon size here
                    },
                },
            },
        },
        MuiButton: {
            styleOverrides: {
                startIcon:{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    '& > *:nth-of-type(1)': {
                        fontSize: '28px',
                    },
                },
                root: {
                    fontSize: '1.2rem',
                    fontWeight: '600',
                    height: '45px',
                    minWidth: '35' +
                        'vw', // Default width for xs screen sizes
                    '@media (min-width: 600px)': { // sm breakpoint
                        minWidth: '20vw',
                    },
                    '@media (min-width: 960px)': { // md breakpoint
                        minWidth: '15vw',
                    },
                    '@media (min-width: 1280px)': { // lg breakpoint
                        minWidth: '9vw',
                    },
                    textTransform: "none",
                    alignItems: 'normal',
                },
            },
        },
    }
});

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: '#ffa733',
            contrastText: '#FFFFFF',
        },
        exportExcel:{
            main: '#60667E',
            contrastText: '#FFFFFF',
        },
        success:{
            main: '#3f50b5',
            contrastText: '#FFFFFF',
        },
        orange: {
            main: '#ed9740',
            light: '#ff5e5e',
            dark: '#b0671e',
            contrastText: '#fff',
        },
    },
    components: {
        MuiDataGrid: {
            styleOverrides: {
                actionsCell: {
                    '& .MuiDataGrid-actionsContainer .MuiIconButton-root': {
                        fontSize: '80px', // Set the desired icon size here
                    },
                },
            },
        },
        MuiButton: {
            styleOverrides: {
                startIcon:{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    '& > *:nth-of-type(1)': {
                        fontSize: '28px',
                    },
                },
                root: {
                    fontSize: '1.2rem',
                    fontWeight: '600',
                    height: '45px',
                    minWidth: '60vw', // Default width for xs screen sizes
                    '@media (min-width: 600px)': { // sm breakpoint
                        minWidth: '33vw',
                    },
                    '@media (min-width: 960px)': { // md breakpoint
                        minWidth: '25vw',
                    },
                    '@media (min-width: 1280px)': { // lg breakpoint
                        minWidth: '16vw',
                    },
                    textTransform: "none",
                    alignItems: 'normal',
                },
            },
        },
    }
});