From 6f8830a77ccf40eed0c11ccc65ae5d736dfb981d Mon Sep 17 00:00:00 2001
From: SwiftHawk <SwiftHawk@SwiftHawk.com>
Date: Sat, 8 Jun 2024 00:37:03 +0500
Subject: [PATCH] fix: home screen style fixed for mobile view

---
 src/pages/home/index.tsx         | 124 +++++++++++++++++++++++--------
 src/pages/home/style.module.scss |   6 +-
 2 files changed, 95 insertions(+), 35 deletions(-)

diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 0afb321..9cf4508 100644
--- a/src/pages/home/index.tsx
+++ b/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 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
+    <Box
+      className={styles.item}
+      sx={{
+        flexDirection: {
+          xs: 'column',
+          md: 'row'
+        }
+      }}
+    >
+      <Box
+        className={styles.titleBox}
+        sx={{
+          flexDirection: {
+            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}>
-            <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 className={styles.signerItem}>
+          <Typography variant="button" className={styles.status}>
+            Awaiting
+          </Typography>
+          <Typography variant="body1">placeholder@sigit.io</Typography>
         </Box>
       </Box>
     </Box>
diff --git a/src/pages/home/style.module.scss b/src/pages/home/style.module.scss
index 69c5019..e722d70 100644
--- a/src/pages/home/style.module.scss
+++ b/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;