diff --git a/src/index.css b/src/index.css index a9ed198..b71a3cb 100644 --- a/src/index.css +++ b/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
tag of markdown editor affected by prism theme */ pre[class*='language-'][class*='w-md-editor-text-pre'] { padding: 0; diff --git a/src/main.tsx b/src/main.tsx index 135d197..a8b1898 100644 --- a/src/main.tsx +++ b/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(- ) diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index c52ef90..93452bb 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -1,31 +1,81 @@ -import { Box, Button } from '@mui/material' -import styles from './style.module.scss' +import { + 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 (- +- -- - + + ++ ++ + - - - + + ) +} + +const PlaceHolder = () => { + return ( ++ ++ Sigits + ++ } + onClick={() => navigate(appPrivateRoutes.sign)} + > + Sign + + } + onClick={() => navigate(appPrivateRoutes.create)} + > + Create + + ++ + + + ) } diff --git a/src/pages/home/style.module.scss b/src/pages/home/style.module.scss index 2bbe937..69c5019 100644 --- a/src/pages/home/style.module.scss +++ b/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); + } + } + } + } + } } diff --git a/src/theme/index.ts b/src/theme/index.ts new file mode 100644 index 0000000..d852a6e --- /dev/null +++ b/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' + } + } + } + } + } +})+ + ++ ++ Title + + ++ Sigit + + ++ 07 Jun 10:23 AM + + ++ ++ Sent + +placeholder@sigit.io ++ ++ Awaiting + +placeholder@sigit.io +