From b33bb0aa1b54b396d84c43d1802ed1796a02212f Mon Sep 17 00:00:00 2001 From: JasonWu Date: Wed, 8 Sep 2021 16:26:04 +0800 Subject: [PATCH] [feat] Update style --- src/base/themes/BreakPoint.ts | 9 +++ src/base/themes/BreakUnits.ts | 40 ++++++++++ src/base/themes/ThemeConfig.ts | 13 ++++ src/base/themes/ThemeCreate.ts | 8 ++ src/base/themes/ThemeHook.ts | 7 ++ src/base/themes/ThemeMakeStyle.ts | 3 + src/base/themes/ThemeProvider.ts | 3 + src/base/themes/ThemeStylesProvider.ts | 3 + src/base/themes/ThemeType.ts | 11 +++ src/base/themes/ThemeV1/BreakPoint/index.ts | 10 +++ src/base/themes/ThemeV1/Component/Button.ts | 48 ++++++++++++ src/base/themes/ThemeV1/Component/Dialog.ts | 16 ++++ .../themes/ThemeV1/Component/Typography.ts | 7 ++ src/base/themes/ThemeV1/Global/Palette.ts | 14 ++++ src/base/themes/ThemeV1/Global/Typography.ts | 78 +++++++++++++++++++ src/base/themes/ThemeV1/index.ts | 18 +++++ src/base/themes/ThemeWithStyles.ts | 3 + src/components/App/index.tsx | 23 ++++-- src/components/Pages/SignIn/index.tsx | 2 +- src/models/Redux/Global/index.ts | 4 + 20 files changed, 313 insertions(+), 7 deletions(-) create mode 100644 src/base/themes/BreakPoint.ts create mode 100644 src/base/themes/BreakUnits.ts create mode 100644 src/base/themes/ThemeConfig.ts create mode 100644 src/base/themes/ThemeCreate.ts create mode 100644 src/base/themes/ThemeHook.ts create mode 100644 src/base/themes/ThemeMakeStyle.ts create mode 100644 src/base/themes/ThemeProvider.ts create mode 100644 src/base/themes/ThemeStylesProvider.ts create mode 100644 src/base/themes/ThemeType.ts create mode 100644 src/base/themes/ThemeV1/BreakPoint/index.ts create mode 100644 src/base/themes/ThemeV1/Component/Button.ts create mode 100644 src/base/themes/ThemeV1/Component/Dialog.ts create mode 100644 src/base/themes/ThemeV1/Component/Typography.ts create mode 100644 src/base/themes/ThemeV1/Global/Palette.ts create mode 100644 src/base/themes/ThemeV1/Global/Typography.ts create mode 100644 src/base/themes/ThemeV1/index.ts create mode 100644 src/base/themes/ThemeWithStyles.ts diff --git a/src/base/themes/BreakPoint.ts b/src/base/themes/BreakPoint.ts new file mode 100644 index 0000000..0a676da --- /dev/null +++ b/src/base/themes/BreakPoint.ts @@ -0,0 +1,9 @@ +export default function CreateBreakPoint(): any { + return { + xs: 425, + sm: 768, + md: 1024, + lg: 1281, + xl: 1920, + }; +} diff --git a/src/base/themes/BreakUnits.ts b/src/base/themes/BreakUnits.ts new file mode 100644 index 0000000..ced3168 --- /dev/null +++ b/src/base/themes/BreakUnits.ts @@ -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, + }, + ]; +} diff --git a/src/base/themes/ThemeConfig.ts b/src/base/themes/ThemeConfig.ts new file mode 100644 index 0000000..5b55412 --- /dev/null +++ b/src/base/themes/ThemeConfig.ts @@ -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; diff --git a/src/base/themes/ThemeCreate.ts b/src/base/themes/ThemeCreate.ts new file mode 100644 index 0000000..56ff601 --- /dev/null +++ b/src/base/themes/ThemeCreate.ts @@ -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; +} diff --git a/src/base/themes/ThemeHook.ts b/src/base/themes/ThemeHook.ts new file mode 100644 index 0000000..da4c692 --- /dev/null +++ b/src/base/themes/ThemeHook.ts @@ -0,0 +1,7 @@ +import useTheme from '@material-ui/core/styles/useTheme'; +import useMediaQuery from '@material-ui/core/useMediaQuery'; + +export default { + useTheme, + useMediaQuery, +}; diff --git a/src/base/themes/ThemeMakeStyle.ts b/src/base/themes/ThemeMakeStyle.ts new file mode 100644 index 0000000..3ff0aae --- /dev/null +++ b/src/base/themes/ThemeMakeStyle.ts @@ -0,0 +1,3 @@ +import { makeStyles } from '@material-ui/core/styles'; + +export default makeStyles; diff --git a/src/base/themes/ThemeProvider.ts b/src/base/themes/ThemeProvider.ts new file mode 100644 index 0000000..a3002d2 --- /dev/null +++ b/src/base/themes/ThemeProvider.ts @@ -0,0 +1,3 @@ +import { ThemeProvider } from '@material-ui/core/styles'; + +export default ThemeProvider; diff --git a/src/base/themes/ThemeStylesProvider.ts b/src/base/themes/ThemeStylesProvider.ts new file mode 100644 index 0000000..cf7947a --- /dev/null +++ b/src/base/themes/ThemeStylesProvider.ts @@ -0,0 +1,3 @@ +import { StylesProvider } from '@material-ui/core/styles'; + +export default StylesProvider; diff --git a/src/base/themes/ThemeType.ts b/src/base/themes/ThemeType.ts new file mode 100644 index 0000000..c4d4f25 --- /dev/null +++ b/src/base/themes/ThemeType.ts @@ -0,0 +1,11 @@ +export type ThemeBase = 'v1'; + +export type ThemeValid = { + [key in ThemeBase]: ThemeBase; +}; + +const theme: ThemeValid = { + v1: 'v1', +}; + +export default theme; diff --git a/src/base/themes/ThemeV1/BreakPoint/index.ts b/src/base/themes/ThemeV1/BreakPoint/index.ts new file mode 100644 index 0000000..e726deb --- /dev/null +++ b/src/base/themes/ThemeV1/BreakPoint/index.ts @@ -0,0 +1,10 @@ +export default { + key: ['xs', 'sm', 'md', 'lg', 'xl'], + values: { + xs: 0, + sm: 769, + md: 1024, + lg: 1281, + xl: 1920, + }, +}; diff --git a/src/base/themes/ThemeV1/Component/Button.ts b/src/base/themes/ThemeV1/Component/Button.ts new file mode 100644 index 0000000..ad3965b --- /dev/null +++ b/src/base/themes/ThemeV1/Component/Button.ts @@ -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', + }, + }, +}; diff --git a/src/base/themes/ThemeV1/Component/Dialog.ts b/src/base/themes/ThemeV1/Component/Dialog.ts new file mode 100644 index 0000000..d746363 --- /dev/null +++ b/src/base/themes/ThemeV1/Component/Dialog.ts @@ -0,0 +1,16 @@ +export default { + MuiDialog: { + paperWidthLg: { + maxWidth: '1110px', + }, + paperWidthMd: { + maxWidth: '730px', + }, + paperWidthSm: { + maxWidth: '540px', + }, + paperWidthXs: { + maxWidth: '350px', + }, + }, +}; diff --git a/src/base/themes/ThemeV1/Component/Typography.ts b/src/base/themes/ThemeV1/Component/Typography.ts new file mode 100644 index 0000000..0afa1c0 --- /dev/null +++ b/src/base/themes/ThemeV1/Component/Typography.ts @@ -0,0 +1,7 @@ +export default { + MuiTypography: { + root: { + display: 'flex', + }, + }, +}; diff --git a/src/base/themes/ThemeV1/Global/Palette.ts b/src/base/themes/ThemeV1/Global/Palette.ts new file mode 100644 index 0000000..c9f6283 --- /dev/null +++ b/src/base/themes/ThemeV1/Global/Palette.ts @@ -0,0 +1,14 @@ +export default { + primary: { + light: '#4a91e2', + main: '#4a91e2', + dark: '#4a91e2', + contrastText: '#ffffff', + }, + text: { + primary: '#000000', + secondary: '#999999', + disabled: '#cccccc', + hint: '#8d8d8d', + }, +}; diff --git a/src/base/themes/ThemeV1/Global/Typography.ts b/src/base/themes/ThemeV1/Global/Typography.ts new file mode 100644 index 0000000..abf4b56 --- /dev/null +++ b/src/base/themes/ThemeV1/Global/Typography.ts @@ -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: {}, +}; diff --git a/src/base/themes/ThemeV1/index.ts b/src/base/themes/ThemeV1/index.ts new file mode 100644 index 0000000..e27efc2 --- /dev/null +++ b/src/base/themes/ThemeV1/index.ts @@ -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; diff --git a/src/base/themes/ThemeWithStyles.ts b/src/base/themes/ThemeWithStyles.ts new file mode 100644 index 0000000..ff1c456 --- /dev/null +++ b/src/base/themes/ThemeWithStyles.ts @@ -0,0 +1,3 @@ +import withStyles from '@material-ui/core/styles/withStyles'; + +export default withStyles; diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 0dc320c..d6dc7af 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -1,4 +1,7 @@ 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 MainAppView from '@Components/Layer/MainAppView'; 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 { AppProps } from './types'; -const App: React.FC = ({ Router, routerProps }): React.ReactElement => { +const App: React.FC = ({ + Router, + routerProps, +}): React.ReactElement => { /* Global & Local State */ const storeUser = useMappedState((state) => state.user); + const storeGlobal = useMappedState((state) => state.global); /* Views */ const RenderMainView = useMemo(() => { if (storeUser.userAuthCheck) { @@ -18,11 +25,15 @@ const App: React.FC = ({ Router, routerProps }): React.ReactElement => }, [storeUser.userAuthCheck]); /* Main */ return ( - - {RenderMainView} - - - + + + + {RenderMainView} + + + + + ); }; diff --git a/src/components/Pages/SignIn/index.tsx b/src/components/Pages/SignIn/index.tsx index 1f85891..9944fec 100644 --- a/src/components/Pages/SignIn/index.tsx +++ b/src/components/Pages/SignIn/index.tsx @@ -45,7 +45,7 @@ function SignIn(): React.ReactElement {
- + {i18n.t('frontend.local.signin.logintitle')}
diff --git a/src/models/Redux/Global/index.ts b/src/models/Redux/Global/index.ts index a103f07..5b459a3 100644 --- a/src/models/Redux/Global/index.ts +++ b/src/models/Redux/Global/index.ts @@ -1,10 +1,13 @@ import Immerable from '@Models/GeneralImmer'; import I18n from '@Models/Core/I18n'; +import ThemeType, { ThemeBase } from '@Base/themes/ThemeType'; import { MiddleWareObject, MiddleWareAPI, MiddleWareEnv } from './types'; class Global extends Immerable { public globalLoading: boolean; + public globalTheme: ThemeBase; + public globalLang: string; public globalSideBar: boolean; @@ -20,6 +23,7 @@ class Global extends Immerable { public constructor(middleware: MiddleWareObject) { super(); this.globalLoading = false; + this.globalTheme = ThemeType.v1; this.globalLang = 'tw'; this.globalSideBar = false; this.globalSideBarStatic = true;