feat: improve design for homepage
This commit is contained in:
parent
12365f7863
commit
de4d927c73
@ -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;
|
||||
|
16
src/main.tsx
16
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>
|
||||
<Provider store={store}>
|
||||
<App />
|
||||
<ToastContainer />
|
||||
</Provider>
|
||||
</HashRouter>
|
||||
<CssVarsProvider theme={theme}>
|
||||
<HashRouter>
|
||||
<Provider store={store}>
|
||||
<App />
|
||||
<ToastContainer />
|
||||
</Provider>
|
||||
</HashRouter>
|
||||
</CssVarsProvider>
|
||||
</React.StrictMode>
|
||||
)
|
||||
|
@ -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 (
|
||||
<Box className={styles.container}>
|
||||
<Button
|
||||
onClick={() => navigate(appPrivateRoutes.create)}
|
||||
variant="contained"
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => navigate(appPrivateRoutes.sign)}
|
||||
variant="contained"
|
||||
>
|
||||
Sign
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => navigate(appPublicRoutes.verify)}
|
||||
variant="contained"
|
||||
>
|
||||
Verify
|
||||
</Button>
|
||||
<Box className={styles.header}>
|
||||
<Typography variant="h3" className={styles.title}>
|
||||
Sigits
|
||||
</Typography>
|
||||
<Box className={styles.actionButtons}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<Draw />}
|
||||
onClick={() => navigate(appPrivateRoutes.sign)}
|
||||
>
|
||||
Sign
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<Add />}
|
||||
onClick={() => navigate(appPrivateRoutes.create)}
|
||||
>
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
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