feat: improve design for homepage
This commit is contained in:
parent
12365f7863
commit
de4d927c73
@ -93,32 +93,6 @@ button {
|
|||||||
user-select: none;
|
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 */
|
/* Style <pre> tag of markdown editor affected by prism theme */
|
||||||
pre[class*='language-'][class*='w-md-editor-text-pre'] {
|
pre[class*='language-'][class*='w-md-editor-text-pre'] {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles'
|
||||||
import _ from 'lodash'
|
import _ from 'lodash'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import ReactDOM from 'react-dom/client'
|
import ReactDOM from 'react-dom/client'
|
||||||
@ -8,6 +9,7 @@ import 'react-toastify/dist/ReactToastify.css'
|
|||||||
import App from './App.tsx'
|
import App from './App.tsx'
|
||||||
import './index.css'
|
import './index.css'
|
||||||
import store from './store/store.ts'
|
import store from './store/store.ts'
|
||||||
|
import { theme } from './theme'
|
||||||
import { saveState } from './utils'
|
import { saveState } from './utils'
|
||||||
|
|
||||||
store.subscribe(
|
store.subscribe(
|
||||||
@ -23,11 +25,13 @@ store.subscribe(
|
|||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
|
<CssVarsProvider theme={theme}>
|
||||||
<HashRouter>
|
<HashRouter>
|
||||||
<Provider store={store}>
|
<Provider store={store}>
|
||||||
<App />
|
<App />
|
||||||
<ToastContainer />
|
<ToastContainer />
|
||||||
</Provider>
|
</Provider>
|
||||||
</HashRouter>
|
</HashRouter>
|
||||||
|
</CssVarsProvider>
|
||||||
</React.StrictMode>
|
</React.StrictMode>
|
||||||
)
|
)
|
||||||
|
@ -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 { useNavigate } from 'react-router-dom'
|
||||||
import { appPrivateRoutes, appPublicRoutes } from '../../routes'
|
import { appPrivateRoutes } from '../../routes'
|
||||||
|
import styles from './style.module.scss'
|
||||||
|
|
||||||
export const HomePage = () => {
|
export const HomePage = () => {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box className={styles.container}>
|
<Box className={styles.container}>
|
||||||
|
<Box className={styles.header}>
|
||||||
|
<Typography variant="h3" className={styles.title}>
|
||||||
|
Sigits
|
||||||
|
</Typography>
|
||||||
|
<Box className={styles.actionButtons}>
|
||||||
<Button
|
<Button
|
||||||
onClick={() => navigate(appPrivateRoutes.create)}
|
variant="outlined"
|
||||||
variant="contained"
|
startIcon={<Draw />}
|
||||||
>
|
|
||||||
Create
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={() => navigate(appPrivateRoutes.sign)}
|
onClick={() => navigate(appPrivateRoutes.sign)}
|
||||||
variant="contained"
|
|
||||||
>
|
>
|
||||||
Sign
|
Sign
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
onClick={() => navigate(appPublicRoutes.verify)}
|
|
||||||
variant="contained"
|
variant="contained"
|
||||||
|
startIcon={<Add />}
|
||||||
|
onClick={() => navigate(appPrivateRoutes.create)}
|
||||||
>
|
>
|
||||||
Verify
|
Create
|
||||||
</Button>
|
</Button>
|
||||||
</Box>
|
</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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -2,5 +2,79 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 25px;
|
gap: 25px;
|
||||||
|
padding: 10px;
|
||||||
margin-top: 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
44
src/theme/index.ts
Normal file
44
src/theme/index.ts
Normal file
@ -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'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
Loading…
Reference in New Issue
Block a user