From b45bb2808c63d61e7c2d47fccb3ba5b719ac15db Mon Sep 17 00:00:00 2001 From: "jason.lam" Date: Tue, 2 Jan 2024 10:46:44 +0800 Subject: [PATCH] apply new theme --- src/App.js | 4 + .../PublicNotice/Search_GLD/SearchForm.js | 47 +- src/themes/buttonConst.js | 147 +++++++ src/themes/colorConst.js | 68 +++ src/themes/themeConst.js | 407 ++++++++++++++++++ src/themes/typography.js | 5 + 6 files changed, 655 insertions(+), 23 deletions(-) create mode 100644 src/themes/buttonConst.js create mode 100644 src/themes/colorConst.js create mode 100644 src/themes/themeConst.js diff --git a/src/App.js b/src/App.js index fe23c8d..51361a5 100644 --- a/src/App.js +++ b/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 = () => ( + + ); diff --git a/src/pages/PublicNotice/Search_GLD/SearchForm.js b/src/pages/PublicNotice/Search_GLD/SearchForm.js index 2d4292b..43cfbb4 100644 --- a/src/pages/PublicNotice/Search_GLD/SearchForm.js +++ b/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 >
- + {/*row 1*/} - - - - Search Form - - + + + Search Form + {/*row 2*/} - + - + - + - + - + {/* { @@ -221,7 +222,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss { orgCombo ? - + } - + - + - - + + - + + diff --git a/src/themes/buttonConst.js b/src/themes/buttonConst.js new file mode 100644 index 0000000..2d889ad --- /dev/null +++ b/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' + }, + }, + }, + } +}); diff --git a/src/themes/colorConst.js b/src/themes/colorConst.js new file mode 100644 index 0000000..402fa3d --- /dev/null +++ b/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", + }, + }, + }, + }, + }, +}); diff --git a/src/themes/themeConst.js b/src/themes/themeConst.js new file mode 100644 index 0000000..f7cd852 --- /dev/null +++ b/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', + }, + }, + }, + }, + }, +}); \ No newline at end of file diff --git a/src/themes/typography.js b/src/themes/typography.js index d752223..623c8f6 100644 --- a/src/themes/typography.js +++ b/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',