sigit/sigit.io
7
2
Fork 0
Code Issues 51 Pull Requests 3 Actions Packages Projects 1 Releases Wiki Activity

feat: improve design for homepage

Browse Source
This commit is contained in:
SwiftHawk 2024-06-07 16:13:32 +05:00
parent 12365f7863
commit de4d927c73
5 changed files with 199 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/index.css
View File

@ -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
View File

@ -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>
)

92
src/pages/home/index.tsx
View File

@ -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>
)
}

74
src/pages/home/style.module.scss
View File

@ -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
View 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'
}
}
}
}
}
})