release #111
@ -5,7 +5,7 @@ import {
|
|||||||
PersonOutline,
|
PersonOutline,
|
||||||
Upload
|
Upload
|
||||||
} from '@mui/icons-material'
|
} from '@mui/icons-material'
|
||||||
import { Box, Button, Typography } from '@mui/material'
|
import { Box, Button, Tooltip, Typography } from '@mui/material'
|
||||||
import { useNavigate } from 'react-router-dom'
|
import { useNavigate } from 'react-router-dom'
|
||||||
import { appPrivateRoutes } from '../../routes'
|
import { appPrivateRoutes } from '../../routes'
|
||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
@ -19,7 +19,16 @@ export const HomePage = () => {
|
|||||||
<Typography variant="h3" className={styles.title}>
|
<Typography variant="h3" className={styles.title}>
|
||||||
Sigits
|
Sigits
|
||||||
</Typography>
|
</Typography>
|
||||||
<Box className={styles.actionButtons}>
|
{/* This is for desktop view */}
|
||||||
|
<Box
|
||||||
|
className={styles.actionButtons}
|
||||||
|
sx={{
|
||||||
|
display: {
|
||||||
|
xs: 'none',
|
||||||
|
md: 'flex'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Button
|
<Button
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
startIcon={<Upload />}
|
startIcon={<Upload />}
|
||||||
@ -35,45 +44,96 @@ export const HomePage = () => {
|
|||||||
Create
|
Create
|
||||||
</Button>
|
</Button>
|
||||||
</Box>
|
</Box>
|
||||||
|
{/* This is for mobile view */}
|
||||||
|
<Box
|
||||||
|
className={styles.actionButtons}
|
||||||
|
sx={{
|
||||||
|
display: {
|
||||||
|
xs: 'flex',
|
||||||
|
md: 'none'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Tooltip title="Upload" arrow>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
onClick={() => navigate(appPrivateRoutes.sign)}
|
||||||
|
>
|
||||||
|
<Upload />
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip title="Create" arrow>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={() => navigate(appPrivateRoutes.create)}
|
||||||
|
>
|
||||||
|
<Add />
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<Box className={styles.submissions}>
|
||||||
|
<PlaceHolder />
|
||||||
|
<PlaceHolder />
|
||||||
|
<PlaceHolder />
|
||||||
</Box>
|
</Box>
|
||||||
<PlaceHolder />
|
|
||||||
<PlaceHolder />
|
|
||||||
<PlaceHolder />
|
|
||||||
</Box>
|
</Box>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const PlaceHolder = () => {
|
const PlaceHolder = () => {
|
||||||
return (
|
return (
|
||||||
<Box className={styles.submissions}>
|
<Box
|
||||||
<Box className={styles.item}>
|
className={styles.item}
|
||||||
<Box className={styles.titleBox}>
|
sx={{
|
||||||
<Typography variant="body1" className={styles.titleBoxItem}>
|
flexDirection: {
|
||||||
<Description />
|
xs: 'column',
|
||||||
Title
|
md: 'row'
|
||||||
</Typography>
|
}
|
||||||
<Typography variant="body2" className={styles.titleBoxItem}>
|
}}
|
||||||
<PersonOutline />
|
>
|
||||||
Sigit
|
<Box
|
||||||
</Typography>
|
className={styles.titleBox}
|
||||||
<Typography variant="body2" className={styles.titleBoxItem}>
|
sx={{
|
||||||
<CalendarMonth />
|
flexDirection: {
|
||||||
07 Jun 10:23 AM
|
xs: 'row',
|
||||||
|
md: 'column'
|
||||||
|
},
|
||||||
|
borderBottomLeftRadius: {
|
||||||
|
xs: 'initial',
|
||||||
|
md: 'inherit'
|
||||||
|
},
|
||||||
|
borderTopRightRadius: {
|
||||||
|
xs: 'inherit',
|
||||||
|
md: 'initial'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
<Typography variant="body1">placeholder@sigit.io</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
<Box className={styles.signers}>
|
<Box className={styles.signerItem}>
|
||||||
<Box className={styles.signerItem}>
|
<Typography variant="button" className={styles.status}>
|
||||||
<Typography variant="button" className={styles.status}>
|
Awaiting
|
||||||
Sent
|
</Typography>
|
||||||
</Typography>
|
<Typography variant="body1">placeholder@sigit.io</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>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
@ -15,7 +15,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.actionButtons {
|
.actionButtons {
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
@ -25,6 +24,7 @@
|
|||||||
.submissions {
|
.submissions {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -33,10 +33,10 @@
|
|||||||
|
|
||||||
.titleBox {
|
.titleBox {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background-color: #e7e2df99;
|
background-color: #cdc8c499;
|
||||||
border-top-left-radius: inherit;
|
border-top-left-radius: inherit;
|
||||||
border-bottom-left-radius: inherit;
|
border-bottom-left-radius: inherit;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user