[feat] Update style

This commit is contained in:
JasonWu 2021-09-08 16:26:04 +08:00
parent e5904586d9
commit b33bb0aa1b
20 changed files with 313 additions and 7 deletions

View File

@ -0,0 +1,9 @@
export default function CreateBreakPoint(): any {
return {
xs: 425,
sm: 768,
md: 1024,
lg: 1281,
xl: 1920,
};
}

View File

@ -0,0 +1,40 @@
export interface UnitItem {
key: number;
name: string;
size: number;
}
export default function CreateBreakUnits(): UnitItem[] {
return [
{
key: 0,
name: 'xss',
size: 375,
},
{
key: 1,
name: 'xs',
size: 425,
},
{
key: 2,
name: 'sm',
size: 768,
},
{
key: 3,
name: 'md',
size: 1024,
},
{
key: 4,
name: 'lg',
size: 1281,
},
{
key: 5,
name: 'xl',
size: 1920,
},
];
}

View File

@ -0,0 +1,13 @@
import { ThemeOptions } from '@material-ui/core/styles';
import ThemeType from './ThemeType';
import ThemeV1 from './ThemeV1';
export type ThemeConfig = {
[key: string]: ThemeOptions;
};
const ValidConfig: ThemeConfig = {
[ThemeType.v1]: ThemeV1,
};
export default ValidConfig;

View File

@ -0,0 +1,8 @@
import { createMuiTheme, ThemeOptions } from '@material-ui/core';
import ValidConfig from './ThemeConfig';
import ThemeType from './ThemeType';
export default function CreateTheme(themeType = ThemeType.v1): ThemeOptions {
const theme = { ...createMuiTheme(ValidConfig[themeType]) };
return theme;
}

View File

@ -0,0 +1,7 @@
import useTheme from '@material-ui/core/styles/useTheme';
import useMediaQuery from '@material-ui/core/useMediaQuery';
export default {
useTheme,
useMediaQuery,
};

View File

@ -0,0 +1,3 @@
import { makeStyles } from '@material-ui/core/styles';
export default makeStyles;

View File

@ -0,0 +1,3 @@
import { ThemeProvider } from '@material-ui/core/styles';
export default ThemeProvider;

View File

@ -0,0 +1,3 @@
import { StylesProvider } from '@material-ui/core/styles';
export default StylesProvider;

View File

@ -0,0 +1,11 @@
export type ThemeBase = 'v1';
export type ThemeValid = {
[key in ThemeBase]: ThemeBase;
};
const theme: ThemeValid = {
v1: 'v1',
};
export default theme;

View File

@ -0,0 +1,10 @@
export default {
key: ['xs', 'sm', 'md', 'lg', 'xl'],
values: {
xs: 0,
sm: 769,
md: 1024,
lg: 1281,
xl: 1920,
},
};

View File

@ -0,0 +1,48 @@
export default {
MuiButton: {
root: {
minWidth: '64px',
minHeight: '40px',
fontSize: '14px',
fontWeight: 400,
boxShadow: 'none !important',
borderRadius: '4px',
padding: '6px 10px',
'&$disabled': {
color: 'rgba(0, 0, 0, 0.1)',
},
},
contained: {
backgroundColor: '#d8d8d8',
'&:hover': {
backgroundColor: '#d8d8d8',
},
},
containedPrimary: {
backgroundColor: '#3b46d5',
'&:hover': {
backgroundColor: '#3b46d5',
},
},
containedSecondary: {
backgroundColor: 'rgb(224, 32, 32)',
'&:hover': {
backgroundColor: 'rgb(224, 32, 32)',
},
},
textPrimary: {
color: '#2286fd',
'&:hover': {
color: '#2286fd',
},
},
},
MuiIconButton: {
colorPrimary: {
color: '#3b46d5',
},
colorSecondary: {
color: '#4a91e2',
},
},
};

View File

@ -0,0 +1,16 @@
export default {
MuiDialog: {
paperWidthLg: {
maxWidth: '1110px',
},
paperWidthMd: {
maxWidth: '730px',
},
paperWidthSm: {
maxWidth: '540px',
},
paperWidthXs: {
maxWidth: '350px',
},
},
};

View File

@ -0,0 +1,7 @@
export default {
MuiTypography: {
root: {
display: 'flex',
},
},
};

View File

@ -0,0 +1,14 @@
export default {
primary: {
light: '#4a91e2',
main: '#4a91e2',
dark: '#4a91e2',
contrastText: '#ffffff',
},
text: {
primary: '#000000',
secondary: '#999999',
disabled: '#cccccc',
hint: '#8d8d8d',
},
};

View File

@ -0,0 +1,78 @@
export default {
htmlFontSize: 7,
fontFamily: ['Noto Sans TC', 'sans-serif'].join(','),
fontSize: 7,
fontWeightLight: 300,
fontWeightRegular: 400,
fontWeightMedium: 500,
fontWeightBold: 700,
h1: {
fontFamily: ['Noto Sans TC', 'sans-serif'].join(','),
fontWeight: 400,
fontSize: '24px',
lineHeight: '27px',
},
h2: {
fontFamily: ['Noto Sans TC', 'sans-serif'].join(','),
fontWeight: 400,
fontSize: '20px',
lineHeight: '24px',
},
h3: {
fontFamily: ['Noto Sans TC', 'sans-serif'].join(','),
fontWeight: 400,
fontSize: '16px',
lineHeight: '24px',
},
h4: {
fontFamily: ['Noto Sans TC', 'sans-serif'].join(','),
fontWeight: 400,
fontSize: '14px',
lineHeight: '24px',
},
h5: {
fontFamily: ['Noto Sans TC', 'sans-serif'].join(','),
fontWeight: 500,
fontSize: '12px',
lineHeight: '24px',
},
h6: {
fontFamily: ['Noto Sans TC', 'sans-serif'].join(','),
fontWeight: 500,
fontSize: '12px',
lineHeight: '24px',
},
subtitle1: {
fontFamily: ['Noto Sans TC', 'sans-serif'].join(','),
fontWeight: 400,
fontSize: '18px',
lineHeight: '24px',
},
subtitle2: {
fontFamily: ['Noto Sans TC', 'sans-serif'].join(','),
fontWeight: 500,
fontSize: '12px',
lineHeight: '24px',
},
body1: {
fontFamily: ['Noto Sans TC', 'sans-serif'].join(','),
fontWeight: 400,
fontSize: '16px',
lineHeight: 1.5,
},
body2: {
fontFamily: ['Noto Sans TC', 'sans-serif'].join(','),
fontWeight: 400,
fontSize: '14px',
lineHeight: 1.43,
},
caption: {
fontFamily: ['Noto Sans TC', 'sans-serif'].join(','),
fontWeight: 400,
fontSize: '12px',
lineHeight: 1.2,
},
// button: {},
// caption: {},
// overline: {},
};

View File

@ -0,0 +1,18 @@
import { ThemeOptions } from '@material-ui/core/styles';
import BreakPoint from './BreakPoint';
import Palette from './Global/Palette';
import Typography from './Global/Typography';
import Button from './Component/Button';
import Dialog from './Component/Dialog';
const theme: ThemeOptions = {
breakpoints: BreakPoint,
palette: Palette,
typography: Typography,
overrides: {
...Button,
...Dialog,
},
};
export default theme;

View File

@ -0,0 +1,3 @@
import withStyles from '@material-ui/core/styles/withStyles';
export default withStyles;

View File

@ -1,4 +1,7 @@
import React, { memo, useMemo } from 'react'; import React, { memo, useMemo } from 'react';
import ThemeCreate from '@Base/themes/ThemeCreate';
import ThemeProvider from '@Base/themes/ThemeProvider';
import ThemeStylesProvider from '@Base/themes/ThemeStylesProvider';
import useMappedState from '@Hooks/useMappedState'; import useMappedState from '@Hooks/useMappedState';
import MainAppView from '@Components/Layer/MainAppView'; import MainAppView from '@Components/Layer/MainAppView';
import MainAppCheckView from '@Components/Layer/MainAppCheckView'; import MainAppCheckView from '@Components/Layer/MainAppCheckView';
@ -6,9 +9,13 @@ import ModalDialog from '@Components/Common/Modals/ModalDialog';
import ModalConfirm from '@Components/Common/Modals/ModalConfirm'; import ModalConfirm from '@Components/Common/Modals/ModalConfirm';
import { AppProps } from './types'; import { AppProps } from './types';
const App: React.FC<AppProps> = ({ Router, routerProps }): React.ReactElement => { const App: React.FC<AppProps> = ({
Router,
routerProps,
}): React.ReactElement => {
/* Global & Local State */ /* Global & Local State */
const storeUser = useMappedState((state) => state.user); const storeUser = useMappedState((state) => state.user);
const storeGlobal = useMappedState((state) => state.global);
/* Views */ /* Views */
const RenderMainView = useMemo(() => { const RenderMainView = useMemo(() => {
if (storeUser.userAuthCheck) { if (storeUser.userAuthCheck) {
@ -18,11 +25,15 @@ const App: React.FC<AppProps> = ({ Router, routerProps }): React.ReactElement =>
}, [storeUser.userAuthCheck]); }, [storeUser.userAuthCheck]);
/* Main */ /* Main */
return ( return (
<Router {...routerProps}> <ThemeStylesProvider injectFirst>
{RenderMainView} <ThemeProvider theme={ThemeCreate(storeGlobal.globalTheme)}>
<ModalDialog /> <Router {...routerProps}>
<ModalConfirm /> {RenderMainView}
</Router> <ModalDialog />
<ModalConfirm />
</Router>
</ThemeProvider>
</ThemeStylesProvider>
); );
}; };

View File

@ -45,7 +45,7 @@ function SignIn(): React.ReactElement {
<div className={classNames(Styles.signInContainer)}> <div className={classNames(Styles.signInContainer)}>
<div className={classNames(Styles.signInPanelContainer)}> <div className={classNames(Styles.signInPanelContainer)}>
<div className={classNames(Styles.signInTitleContainer)}> <div className={classNames(Styles.signInTitleContainer)}>
<Typography className={classNames(Styles.signInTitleMainStyle)} variant="h4" color="textPrimary"> <Typography className={classNames(Styles.signInTitleMainStyle)} variant="h1" color="textPrimary">
{i18n.t('frontend.local.signin.logintitle')} {i18n.t('frontend.local.signin.logintitle')}
</Typography> </Typography>
</div> </div>

View File

@ -1,10 +1,13 @@
import Immerable from '@Models/GeneralImmer'; import Immerable from '@Models/GeneralImmer';
import I18n from '@Models/Core/I18n'; import I18n from '@Models/Core/I18n';
import ThemeType, { ThemeBase } from '@Base/themes/ThemeType';
import { MiddleWareObject, MiddleWareAPI, MiddleWareEnv } from './types'; import { MiddleWareObject, MiddleWareAPI, MiddleWareEnv } from './types';
class Global extends Immerable { class Global extends Immerable {
public globalLoading: boolean; public globalLoading: boolean;
public globalTheme: ThemeBase;
public globalLang: string; public globalLang: string;
public globalSideBar: boolean; public globalSideBar: boolean;
@ -20,6 +23,7 @@ class Global extends Immerable {
public constructor(middleware: MiddleWareObject) { public constructor(middleware: MiddleWareObject) {
super(); super();
this.globalLoading = false; this.globalLoading = false;
this.globalTheme = ThemeType.v1;
this.globalLang = 'tw'; this.globalLang = 'tw';
this.globalSideBar = false; this.globalSideBar = false;
this.globalSideBarStatic = true; this.globalSideBarStatic = true;