[feat] Update style

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,
+  };
+}

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,
+    },
+  ];
+}

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;

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;
+}

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,
+};

src/base/themes/ThemeMakeStyle.ts

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

src/base/themes/ThemeProvider.ts

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

src/base/themes/ThemeStylesProvider.ts

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

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;

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,
+  },
+};

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',
+    },
+  },
+};

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',
+    },
+  },
+};

src/base/themes/ThemeV1/Component/Typography.ts

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

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',
+  },
+};

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: {},
+};

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;

src/base/themes/ThemeWithStyles.ts

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

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<AppProps> = ({ Router, routerProps }): React.ReactElement => {
+const App: React.FC<AppProps> = ({
+  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<AppProps> = ({ Router, routerProps }): React.ReactElement =>
   }, [storeUser.userAuthCheck]);
   /* Main */
   return (
-    <Router {...routerProps}>
+    <ThemeStylesProvider injectFirst>
-      {RenderMainView}
+      <ThemeProvider theme={ThemeCreate(storeGlobal.globalTheme)}>
-      <ModalDialog />
+        <Router {...routerProps}>
-      <ModalConfirm />
+          {RenderMainView}
-    </Router>
+          <ModalDialog />
+          <ModalConfirm />
+        </Router>
+      </ThemeProvider>
+    </ThemeStylesProvider>
   );
 };
 

src/components/Pages/SignIn/index.tsx

@@ -45,7 +45,7 @@ function SignIn(): React.ReactElement {
     <div className={classNames(Styles.signInContainer)}>
       <div className={classNames(Styles.signInPanelContainer)}>
         <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')}
           </Typography>
         </div>

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;