[M1_TR-29] Create Template Components (#6)

* [M1_TR-29] Create Template Components rebase * [M1_TR-29] Add Link to Navbar and fix metadata error in docker * [M1_TR-29] Adjusted Icon buttons and paddings
framgia · Sep 4, 2023 · 4c6b7d1 · 4c6b7d1
1 parent 942f478
commit 4c6b7d1
Show file tree

Hide file tree

Showing 13 changed files with 652 additions and 7 deletions.
diff --git a/web/package.json b/web/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.6",
     "@mui/material": "^5.14.3",
     "@types/node": "20.4.8",
     "@types/react": "18.2.18",

diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
@@ -1,7 +1,8 @@
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import { ThemeProvider } from '@mui/material'
 
-const inter = Inter({ subsets: ['latin'] })
+import { theme } from '@/assets/theme'
+import Wrapper from './wrapper';
 
 export const metadata: Metadata = {
   title: 'Create Next App',
@@ -15,7 +16,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <ThemeProvider theme={theme}>
+        <Wrapper>{children}</Wrapper>
+      </ThemeProvider>
     </html>
   )
 }
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
@@ -1,11 +1,11 @@
-import Button from '@mui/material/Button';
+import { Box, Typography } from "@mui/material";
 
 export default function Home() {
   return (
     <main>
-      <div>
-        <Button variant="contained">Hello World</Button>
-      </div>
+      <Box>
+        <Typography variant="h1" width={1} textAlign={'center'}>Content goes here</Typography>
+      </Box>
     </main>
   )
 }
diff --git a/web/src/app/wrapper.tsx b/web/src/app/wrapper.tsx
@@ -0,0 +1,50 @@
+'use client'
+
+import { FC, useState } from 'react';
+import { Open_Sans } from 'next/font/google'
+import { Box, Container } from '@mui/material'
+
+import Header from '@/components/organisms/Header';
+import NavBar from '@/components/organisms/Navbar';
+
+const openSansFont = Open_Sans({
+  subsets: ["latin"],
+  weight: ["300", "400", "500", "600", "700"],
+});
+
+interface Props {
+    children: React.ReactNode
+}
+
+export const Wrapper:FC<Props> = ({
+    children
+    }) => {
+
+    const [isExpanded, setIsExpanded] = useState<boolean>(true)
+    let isOpen = true;
+
+    const handleToggle = () => {
+        setIsExpanded(!isExpanded)
+        isOpen = !isOpen
+    }
+
+    return (
+        <Box className={openSansFont.className} component={'body'} sx={{
+            margin: 0,
+            backgroundColor: 'background-primary'
+          }}>
+            <Header />
+            <Box display={'flex'}>
+              <NavBar expanded={isExpanded} handleToggle={handleToggle}/>
+              <Container maxWidth={false} disableGutters sx={{
+                marginLeft: isExpanded ? '200px' : '66px',
+                transition: 'margin 0.3s'
+              }}>
+                {children}
+              </Container>
+            </Box>
+          </Box>
+    )
+}
+
+export default Wrapper
diff --git a/web/src/assets/colors.ts b/web/src/assets/colors.ts
@@ -0,0 +1,24 @@
+import { PaletteOptions } from "@mui/material";
+
+export const customColors: PaletteOptions = {
+  primary: {
+    main: "#2A3F52",
+    100: "#F0F9FF",
+    200: "#DAEFFC",
+    300: "#B9DBF1",
+    400: "#86B1CC",
+    500: "#5B829B",
+    700: "#3E5367",
+    900: "#2A3F52",
+  },
+  secondary: {
+    main: "#5B829B",
+  },
+  dark: "#293743",
+  neutral: "#65707A",
+  disabled: "#999999",
+  light: "#ACB5BD",
+  white: "#FFFFFF",
+  "background-primary": "#F0F0F0",
+  "background-secondary": "#F6F6F6",
+};
diff --git a/web/src/assets/icons/Logo.tsx b/web/src/assets/icons/Logo.tsx
diff --git a/web/src/assets/theme.ts b/web/src/assets/theme.ts
@@ -0,0 +1,215 @@
+"use client";
+
+import { createTheme } from "@mui/material/styles";
+import { Open_Sans } from "next/font/google";
+
+import { customColors } from "./colors";
+
+const openSansFont = Open_Sans({
+  subsets: ["latin"],
+  weight: ["300", "400", "500", "600", "700"],
+});
+
+declare module "@mui/material/styles" {
+  interface TypographyVariants {
+    body1r: React.CSSProperties;
+    body1b: React.CSSProperties;
+    body2r: React.CSSProperties;
+    body2b: React.CSSProperties;
+    body3r: React.CSSProperties;
+    body3b: React.CSSProperties;
+    label1r: React.CSSProperties;
+    label1b: React.CSSProperties;
+    label2r: React.CSSProperties;
+    label2b: React.CSSProperties;
+    label3r: React.CSSProperties;
+    label3b: React.CSSProperties;
+    label4r: React.CSSProperties;
+    label4b: React.CSSProperties;
+  }
+
+  // allow configuration using `createTheme`
+  interface TypographyVariantsOptions {
+    body1r: React.CSSProperties;
+    body1b: React.CSSProperties;
+    body2r: React.CSSProperties;
+    body2b: React.CSSProperties;
+    body3r: React.CSSProperties;
+    body3b: React.CSSProperties;
+    label1r: React.CSSProperties;
+    label1b: React.CSSProperties;
+    label2r: React.CSSProperties;
+    label2b: React.CSSProperties;
+    label3r: React.CSSProperties;
+    label3b: React.CSSProperties;
+    label4r: React.CSSProperties;
+    label4b: React.CSSProperties;
+  }
+
+  interface Palette {
+    dark: string;
+    neutral: string;
+    disabled: string;
+    light: string;
+    white: string;
+    "background-primary": string;
+    "background-secondary": string;
+  }
+  interface PaletteOptions {
+    dark?: string;
+    neutral?: string;
+    disabled?: string;
+    light?: string;
+    white?: string;
+    "background-primary"?: string;
+    "background-secondary"?: string;
+  }
+}
+
+// Update the Typography's variant prop options
+declare module "@mui/material/Typography" {
+  interface TypographyPropsVariantOverrides {
+    body1r: true;
+    body1b: true;
+    body2r: true;
+    body2b: true;
+    body3r: true;
+    body3b: true;
+    label1r: true;
+    label1b: true;
+    label2r: true;
+    label2b: true;
+    label3r: true;
+    label3b: true;
+    label4r: true;
+    label4b: true;
+  }
+}
+
+const customDefaultFontFamily = {
+  fontFamily: openSansFont.style.fontFamily,
+};
+
+export const theme = createTheme({
+  palette: { ...customColors },
+  typography: {
+    allVariants: {
+      ...customDefaultFontFamily,
+      color: customColors.dark,
+    },
+    label1r: {
+      fontSize: 16,
+      fontWeight: 400,
+      lineHeight: "125%",
+      color: customColors.dark,
+    },
+    label1b: {
+      fontSize: 16,
+      fontWeight: 600,
+      lineHeight: "125%",
+      color: customColors.dark,
+    },
+    label2r: {
+      fontSize: 14,
+      fontWeight: 400,
+      lineHeight: "125%",
+      color: customColors.dark,
+    },
+    label2b: {
+      fontSize: 14,
+      fontWeight: 600,
+      lineHeight: "125%",
+      color: customColors.dark,
+    },
+    label3r: {
+      fontSize: 12,
+      fontWeight: 400,
+      lineHeight: "125%",
+      color: customColors.dark,
+    },
+    label3b: {
+      fontSize: 12,
+      fontWeight: 600,
+      lineHeight: "125%",
+      color: customColors.dark,
+    },
+    label4r: {
+      fontSize: 10,
+      fontWeight: 400,
+      lineHeight: "125%",
+      color: customColors.dark,
+    },
+    label4b: {
+      fontSize: 10,
+      fontWeight: 600,
+      lineHeight: "125%",
+      color: customColors.dark,
+    },
+    body1r: {
+      fontSize: 16,
+      fontWeight: 400,
+      lineHeight: "150%",
+      color: customColors.dark,
+    },
+    body1b: {
+      fontSize: 16,
+      fontWeight: 500,
+      lineHeight: "150%",
+      color: customColors.dark,
+    },
+    body2r: {
+      fontSize: 14,
+      fontWeight: 400,
+      lineHeight: "150%",
+      color: customColors.dark,
+    },
+    body2b: {
+      fontSize: 14,
+      fontWeight: 500,
+      lineHeight: "150%",
+      color: customColors.dark,
+    },
+    body3r: {
+      fontSize: 12,
+      fontWeight: 400,
+      lineHeight: "150%",
+      color: customColors.dark,
+    },
+    body3b: {
+      fontSize: 12,
+      fontWeight: 500,
+      lineHeight: "150%",
+      color: customColors.dark,
+    },
+    h1: {
+      fontSize: 40,
+      fontWeight: 600,
+      lineHeight: "125%",
+      color: customColors.dark,
+    },
+    h2: {
+      fontSize: 32,
+      fontWeight: 600,
+      lineHeight: "125%",
+      color: customColors.dark,
+    },
+    h3: {
+      fontSize: 24,
+      fontWeight: 600,
+      lineHeight: "125%",
+      color: customColors.dark,
+    },
+    h4: {
+      fontSize: 18,
+      fontWeight: 600,
+      lineHeight: "125%",
+      color: customColors.dark,
+    },
+    h5: {
+      fontSize: 14,
+      fontWeight: 600,
+      lineHeight: "125%",
+      color: customColors.dark,
+    },
+  },
+});