src/pages/home/index.tsx

@@ -5,7 +5,7 @@ import {
   PersonOutline,
   Upload
 } 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 { appPrivateRoutes } from '../../routes'
 import styles from './style.module.scss'
@@ -19,7 +19,16 @@ export const HomePage = () => {
         <Typography variant="h3" className={styles.title}>
           Sigits
         </Typography>
-        <Box className={styles.actionButtons}>
+        {/* This is for desktop view */}
+        <Box
+          className={styles.actionButtons}
+          sx={{
+            display: {
+              xs: 'none',
+              md: 'flex'
+            }
+          }}
+        >
           <Button
             variant="outlined"
             startIcon={<Upload />}
@@ -35,45 +44,96 @@ export const HomePage = () => {
             Create
           </Button>
         </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>
-      <PlaceHolder />
-      <PlaceHolder />
-      <PlaceHolder />
     </Box>
   )
 }
 
 const PlaceHolder = () => {
   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 variant="body1">placeholder@sigit.io</Typography>
         </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>

src/pages/home/style.module.scss

@@ -15,7 +15,6 @@
     }
 
     .actionButtons {
-      display: flex;
       justify-content: center;
       align-items: center;
       gap: 10px;
@@ -25,6 +24,7 @@
   .submissions {
     display: flex;
     flex-direction: column;
+    gap: 10px;
 
     .item {
       display: flex;
@@ -33,10 +33,10 @@
 
       .titleBox {
         display: flex;
-        flex-direction: column;
         align-items: flex-start;
+        justify-content: space-between;
         padding: 10px;
-        background-color: #e7e2df99;
+        background-color: #cdc8c499;
         border-top-left-radius: inherit;
         border-bottom-left-radius: inherit;