feat: improve design for homepage

src/index.css

@@ -93,32 +93,6 @@ button {
   user-select: none;
 }
 
-.no-privilege {
-  display: flex;
-  justify-content: center;
-  margin-top: 20px;
-  color: red;
-}
-
-.quiz-btn {
-  color: #fff !important;
-  border-radius: 8px !important;
-  border: 1px solid transparent !important;
-  padding: 0.6em 1.2em !important;
-  font-size: 1em !important;
-  font-weight: 500 !important;
-}
-
-Button {
-  border-radius: 8px !important;
-
-  &:disabled {
-    /* background-color: gray !important; */
-    /* color: black !important; */
-    cursor: not-allowed !important;
-  }
-}
-
 /* Style <pre> tag of markdown editor affected by prism theme */
 pre[class*='language-'][class*='w-md-editor-text-pre'] {
   padding: 0;

src/main.tsx

@@ -1,3 +1,4 @@
+import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles'
 import _ from 'lodash'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
@@ -8,6 +9,7 @@ import 'react-toastify/dist/ReactToastify.css'
 import App from './App.tsx'
 import './index.css'
 import store from './store/store.ts'
+import { theme } from './theme'
 import { saveState } from './utils'
 
 store.subscribe(
@@ -23,11 +25,13 @@ store.subscribe(
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <HashRouter>
+    <CssVarsProvider theme={theme}>
-      <Provider store={store}>
+      <HashRouter>
-        <App />
+        <Provider store={store}>
-        <ToastContainer />
+          <App />
-      </Provider>
+          <ToastContainer />
-    </HashRouter>
+        </Provider>
+      </HashRouter>
+    </CssVarsProvider>
   </React.StrictMode>
 )

src/pages/home/index.tsx

@@ -1,31 +1,81 @@
-import { Box, Button } from '@mui/material'
+import {
-import styles from './style.module.scss'
+  Add,
+  CalendarMonth,
+  Description,
+  Draw,
+  PersonOutline
+} from '@mui/icons-material'
+import { Box, Button, Typography } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
-import { appPrivateRoutes, appPublicRoutes } from '../../routes'
+import { appPrivateRoutes } from '../../routes'
+import styles from './style.module.scss'
 
 export const HomePage = () => {
   const navigate = useNavigate()
 
   return (
     <Box className={styles.container}>
-      <Button
+      <Box className={styles.header}>
-        onClick={() => navigate(appPrivateRoutes.create)}
+        <Typography variant="h3" className={styles.title}>
-        variant="contained"
+          Sigits
-      >
+        </Typography>
-        Create
+        <Box className={styles.actionButtons}>
-      </Button>
+          <Button
-      <Button
+            variant="outlined"
-        onClick={() => navigate(appPrivateRoutes.sign)}
+            startIcon={<Draw />}
-        variant="contained"
+            onClick={() => navigate(appPrivateRoutes.sign)}
-      >
+          >
-        Sign
+            Sign
-      </Button>
+          </Button>
-      <Button
+          <Button
-        onClick={() => navigate(appPublicRoutes.verify)}
+            variant="contained"
-        variant="contained"
+            startIcon={<Add />}
-      >
+            onClick={() => navigate(appPrivateRoutes.create)}
-        Verify
+          >
-      </Button>
+            Create
+          </Button>
+        </Box>
+      </Box>
+      <PlaceHolder />
+      <PlaceHolder />
+      <PlaceHolder />
+    </Box>
+  )
+}
+
+const PlaceHolder = () => {
+  return (
+    <Box className={styles.submissions}>
+      <Box className={styles.item}>
+        <Box className={styles.titleBox}>
+          <Typography variant="body1" className={styles.titleBoxItem}>
+            <Description />
+            Title
+          </Typography>
+          <Typography variant="body2" className={styles.titleBoxItem}>
+            <PersonOutline />
+            Sigit
+          </Typography>
+          <Typography variant="body2" className={styles.titleBoxItem}>
+            <CalendarMonth />
+            07 Jun 10:23 AM
+          </Typography>
+        </Box>
+        <Box className={styles.signers}>
+          <Box className={styles.signerItem}>
+            <Typography variant="button" className={styles.status}>
+              Sent
+            </Typography>
+            <Typography variant="body1">placeholder@sigit.io</Typography>
+          </Box>
+          <Box className={styles.signerItem}>
+            <Typography variant="button" className={styles.status}>
+              Awaiting
+            </Typography>
+            <Typography variant="body1">placeholder@sigit.io</Typography>
+          </Box>
+        </Box>
+      </Box>
     </Box>
   )
 }

src/pages/home/style.module.scss

@@ -2,5 +2,79 @@
   display: flex;
   flex-direction: column;
   gap: 25px;
+  padding: 10px;
   margin-top: 10px;
+  background: var(--mui-palette-background-paper);
+
+  .header {
+    display: flex;
+
+    .title {
+      color: var(--mui-palette-primary-light);
+      flex: 1;
+    }
+
+    .actionButtons {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+    }
+  }
+
+  .submissions {
+    display: flex;
+    flex-direction: column;
+
+    .item {
+      display: flex;
+      background-color: #efeae6;
+      border-radius: 1rem;
+
+      .titleBox {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 10px;
+        background-color: #e7e2df99;
+        border-top-left-radius: inherit;
+        border-bottom-left-radius: inherit;
+
+        .titleBoxItem {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: var(--mui-palette-primary-light);
+
+          svg {
+            font-size: 1rem;
+          }
+        }
+      }
+
+      .signers {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        justify-content: center;
+        gap: 10px;
+        padding: 10px 0;
+        color: var(--mui-palette-primary-light);
+
+        .signerItem {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          gap: 10px;
+
+          .status {
+            border-radius: 2rem;
+            width: 100px;
+            text-align: center;
+            background-color: var(--mui-palette-info-light);
+          }
+        }
+      }
+    }
+  }
 }

src/theme/index.ts

@@ -0,0 +1,44 @@
+import { experimental_extendTheme as extendTheme } from '@mui/material/styles'
+
+// For the reference of theme customization guide visit
+// https://mui.com/material-ui/experimental-api/css-theme-variables/customization/
+
+export const theme = extendTheme({
+  colorSchemes: {
+    light: {
+      palette: {
+        primary: {
+          main: '#291334'
+        },
+        info: {
+          main: '#3abff8'
+        }
+      }
+    },
+    dark: {
+      // palette for dark mode
+      //   palette: {...}
+    }
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: '2rem'
+        },
+        contained: {
+          ':hover': {
+            background: '#150a1a'
+          }
+        },
+        outlined: {
+          ':hover': {
+            color: '#291334',
+            borderColor: '#291334',
+            background: '#29133433'
+          }
+        }
+      }
+    }
+  }
+})