From 845c81e10ccb8a51c008c1257dc7ad6b1ca69d03 Mon Sep 17 00:00:00 2001
From: "jason.lam" <jason.lam@2fi-solutions.com.hk>
Date: Wed, 3 Jan 2024 12:34:52 +0800
Subject: [PATCH] update phone layout

---
 src/pages/authentication/BusRegister.js       |  78 ++++++++-----
 src/pages/authentication/Register.js          | 109 +++++++++++-------
 .../auth-forms/BusCustomFormWizard.js         |   2 +-
 .../auth-forms/CustomFormWizard.js            |   5 +
 .../auth-forms/UploadFileTable.js             |   4 +-
 src/themes/buttonConst.js                     |   4 +-
 6 files changed, 126 insertions(+), 76 deletions(-)

diff --git a/src/pages/authentication/BusRegister.js b/src/pages/authentication/BusRegister.js
index fb1747f..f97eb0f 100644
--- a/src/pages/authentication/BusRegister.js
+++ b/src/pages/authentication/BusRegister.js
@@ -9,7 +9,7 @@ import {
   // Grid, 
   Stack,
   Typography,
-  Button,
+  Button, StepLabel,
 
 } from '@mui/material';
 import VisibilityIcon from '@mui/icons-material/Visibility';
@@ -22,34 +22,11 @@ const CustomFormWizard = Loadable(lazy(() => import('./auth-forms/BusCustomFormW
 const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom')));
 import axios from "axios";
 import { GET_USERNAME, POST_VERIFY_CAPTCHA } from "utils/ApiPathConst";
+import {useTheme} from "@emotion/react";
 // import CustomFormWizard from './auth-forms/BusCustomFormWizard';
 // import AuthWrapper from './AuthWrapperCustom';
 
 // ================================|| REGISTER ||================================ //
-const stepStyle = {
-  width: "40%",
-  boxShadow: 2,
-  backgroundColor: "#FFFFFF",
-  padding: 2,
-  "& .Mui-active": {
-    "&.MuiStepIcon-root": {
-      color: "warning.main",
-      fontSize: "2rem",
-    },
-    "& .MuiStepConnector-line": {
-      borderColor: "warning.main"
-    }
-  },
-  "& .Mui-completed": {
-    "&.MuiStepIcon-root": {
-      color: "secondary.main",
-      fontSize: "2rem",
-    },
-    "& .MuiStepConnector-line": {
-      borderColor: "secondary.main"
-    }
-  }
-}
 const steps = ['個人資料', '預覽', '完成提交'];
 
 const BusRegister = () => {
@@ -59,6 +36,39 @@ const BusRegister = () => {
   const [username, setUsername] = useState("")
   const [base64Url, setBase64Url] = useState("")
   const [checkCode, setCheckCode] = useState("")
+  const theme = useTheme();
+  const stepStyle = {
+    [theme.breakpoints.up('lg')]: {
+      width: '40%',
+    },
+    [theme.breakpoints.up('md')]: {
+      width: '70%',
+    },
+    [theme.breakpoints.up('xs')]: {
+      width: '95%',
+    },
+    boxShadow: 1,
+    backgroundColor: "#FFFFFF",
+    padding: 2,
+    "& .Mui-active": {
+      "&.MuiStepIcon-root": {
+        color: "warning.main",
+        fontSize: "2rem",
+      },
+      "& .MuiStepConnector-line": {
+        borderColor: "warning.main"
+      }
+    },
+    "& .Mui-completed": {
+      "&.MuiStepIcon-root": {
+        color: "secondary.main",
+        fontSize: "2rem",
+      },
+      "& .MuiStepConnector-line": {
+        borderColor: "secondary.main"
+      }
+    }
+  }
 
   const totalSteps = () => {
     return steps.length;
@@ -131,7 +141,7 @@ const BusRegister = () => {
 
   return (
     // <AuthWrapper>
-    <Stack sx={{ width: '100%', fontSize: '2rem', paddingTop: '65px', bgcolor: 'backgroundColor.default' }} alignItems="center">
+    <Stack sx={{ width: '100%', fontSize: '2rem', paddingTop: '35px', bgcolor: 'backgroundColor.default' }} alignItems="center">
       <Stepper activeStep={activeStep} sx={stepStyle}>
         {steps.map((label, index) => (
           <Step key={label} completed={completed[index]} readOnly={true}>
@@ -140,14 +150,26 @@ const BusRegister = () => {
                 (<StepButton
                 // onClick={handleStep(index)}
                 >
-                  <Typography variant="step1">{label}</Typography>
+                  <StepLabel sx={{
+                    flexDirection: 'column',
+                    "& .MuiStepLabel-iconContainer": {
+                      paddingRight: 0
+                    }}}>
+                    <Typography variant="step1">{label}</Typography>
+                  </StepLabel>
                 </StepButton>) :
                 (<StepButton
                   sx={activeStep === 2 ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } } : allStepsCompleted() ? { "& .MuiSvgIcon-root": { color: "secondary.main", fontSize: "2rem" } } : { color: "rgba(0, 0, 0, 0.38)" }}
                   icon={<VisibilityIcon />}
                 // onClick={handleStep(index)}
                 >
-                  <Typography variant="step1">{label}</Typography>
+                  <StepLabel sx={{
+                    flexDirection: 'column',
+                    "& .MuiStepLabel-iconContainer": {
+                      paddingRight: 0
+                    }}}>
+                    <Typography variant="step1">{label}</Typography>
+                  </StepLabel>
                 </StepButton>)
             }
 
diff --git a/src/pages/authentication/Register.js b/src/pages/authentication/Register.js
index 2a39fe5..c0ab887 100644
--- a/src/pages/authentication/Register.js
+++ b/src/pages/authentication/Register.js
@@ -12,7 +12,7 @@ import {
   // Grid, 
   Stack,
   Typography,
-  Button,
+  Button, StepLabel,
 } from '@mui/material';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import { GET_USERNAME, POST_VERIFY_CAPTCHA  } from "utils/ApiPathConst";
@@ -22,33 +22,11 @@ import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifyActionError } from 'utils/CommonFunction';
 import axios from "axios";
+import {useTheme} from "@emotion/react";
 const CustomFormWizard = Loadable(lazy(() => import('./auth-forms/CustomFormWizard')));
 const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom')));
 // ================================|| REGISTER ||================================ //
-const stepStyle = {
-  width: "40%",
-  boxShadow: 1,
-  backgroundColor: "#FFFFFF",
-  padding: 2,
-  "& .Mui-active": {
-    "&.MuiStepIcon-root": {
-      color: "warning.main",
-      fontSize: "2rem",
-    },
-    "& .MuiStepConnector-line": {
-      borderColor: "warning.main"
-    }
-  },
-  "& .Mui-completed": {
-    "&.MuiStepIcon-root": {
-      color: "secondary.main",
-      fontSize: "2rem",
-    },
-    "& .MuiStepConnector-line": {
-      borderColor: "secondary.main"
-    }
-  }
-}
+
 const steps = ['個人資料', '預覽', '完成提交'];
 
 const Register = () => {
@@ -58,6 +36,39 @@ const Register = () => {
   const [username, setUsername] = useState("");
   const [base64Url, setBase64Url] = useState("")
   const [checkCode, setCheckCode] = useState("")
+  const theme = useTheme();
+  const stepStyle = {
+    [theme.breakpoints.up('lg')]: {
+      width: '40%',
+    },
+    [theme.breakpoints.up('md')]: {
+      width: '70%',
+    },
+    [theme.breakpoints.up('xs')]: {
+      width: '95%',
+    },
+    boxShadow: 1,
+    backgroundColor: "#FFFFFF",
+    padding: 2,
+    "& .Mui-active": {
+      "&.MuiStepIcon-root": {
+        color: "warning.main",
+        fontSize: "2rem",
+      },
+      "& .MuiStepConnector-line": {
+        borderColor: "warning.main"
+      }
+    },
+    "& .Mui-completed": {
+      "&.MuiStepIcon-root": {
+        color: "secondary.main",
+        fontSize: "2rem",
+      },
+      "& .MuiStepConnector-line": {
+        borderColor: "secondary.main"
+      }
+    }
+  }
 
   const totalSteps = () => {
     return steps.length;
@@ -132,27 +143,39 @@ const Register = () => {
 
   return (
     // <AuthWrapper>
-    <Stack sx={{ width: '100%', fontSize: '2rem', paddingTop: '65px', bgcolor: 'backgroundColor.default' }} alignItems="center">
+    <Stack sx={{ width: '100%', fontSize: '2rem', paddingTop: '35px', bgcolor: 'backgroundColor.default' }} alignItems="center">
       <Stepper activeStep={activeStep} sx={stepStyle}>
         {steps.map((label, index) => (
-          <Step key={label} completed={completed[index]} readOnly={true}>
-            {
-              index < 2 ?
-                (<StepButton
-                // onClick={handleStep(index)}
-                >
-                  <Typography variant="step1">{label}</Typography>
-                </StepButton>) :
-                (<StepButton
-                  sx={activeStep === 2 ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } } : allStepsCompleted() ? { "& .MuiSvgIcon-root": { color: "secondary.main", fontSize: "2rem" } } : { color: "rgba(0, 0, 0, 0.38)" }}
-                  icon={<VisibilityIcon />}
-                // onClick={handleStep(index)}
-                >
-                  <Typography variant="step1">{label}</Typography>
-                </StepButton>)
-            }
+            <Step key={label} completed={completed[index]} readOnly={true}>
+              {
+                index < 2 ?
+                    (<StepButton
+                        // onClick={handleStep(index)}
+                    >
+                      <StepLabel sx={{
+                        flexDirection: 'column',
+                        "& .MuiStepLabel-iconContainer": {
+                          paddingRight: 0
+                        }}}>
+                        <Typography variant="step1">{label}</Typography>
+                      </StepLabel>
+                    </StepButton>) :
+                    (<StepButton
+                        sx={activeStep === 2 ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } } : allStepsCompleted() ? { "& .MuiSvgIcon-root": { color: "secondary.main", fontSize: "2rem" } } : { color: "rgba(0, 0, 0, 0.38)" }}
+                        icon={<VisibilityIcon />}
+                        // onClick={handleStep(index)}
+                    >
+                      <StepLabel sx={{
+                        flexDirection: 'column',
+                        "& .MuiStepLabel-iconContainer": {
+                          paddingRight: 0
+                        }}}>
+                        <Typography variant="step1">{label}</Typography>
+                      </StepLabel>
+                    </StepButton>)
+              }
 
-          </Step>
+            </Step>
         ))}
       </Stepper>
       {allStepsCompleted() ? (
diff --git a/src/pages/authentication/auth-forms/BusCustomFormWizard.js b/src/pages/authentication/auth-forms/BusCustomFormWizard.js
index 423f293..deb8354 100644
--- a/src/pages/authentication/auth-forms/BusCustomFormWizard.js
+++ b/src/pages/authentication/auth-forms/BusCustomFormWizard.js
@@ -832,7 +832,7 @@ const BusCustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1}>
-                                        <InputLabel htmlFor="brNo-signup">
+                                        <InputLabel htmlFor="brNo-signup" sx={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word' }}>
                                             <Typography variant="pnspsFormHeader">
                                                 商業登記證號碼 (e.g. 12341234-123-12-12-1)
                                                 <span style={{ color: '#f10000' }}>*</span>
diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js
index 3e7e4f3..956c6f9 100644
--- a/src/pages/authentication/auth-forms/CustomFormWizard.js
+++ b/src/pages/authentication/auth-forms/CustomFormWizard.js
@@ -970,6 +970,11 @@ const CustomFormWizard = (props) => {
                                                             // sx={{height:"53px"}}
                                                             startAdornment={<InputAdornment position="start">(</InputAdornment>}
                                                             endAdornment={<InputAdornment position="end">)</InputAdornment>}
+                                                            sx={{
+                                                                '& .MuiOutlinedInput-input': {
+                                                                    padding: '5px 5px 5px 5px', // Set the desired padding inline
+                                                                },
+                                                            }}
                                                             inputProps={{
                                                                 maxLength: 1,
                                                                 onKeyDown: (e) => {
diff --git a/src/pages/authentication/auth-forms/UploadFileTable.js b/src/pages/authentication/auth-forms/UploadFileTable.js
index 4770c1e..d69c184 100644
--- a/src/pages/authentication/auth-forms/UploadFileTable.js
+++ b/src/pages/authentication/auth-forms/UploadFileTable.js
@@ -77,7 +77,7 @@ export default function UploadFileTable({ recordList, setUpdateRows, }) {
             id: 'name',
             field: 'name',
             headerName: <Typography variant="h6">檔案名稱</Typography>,
-            flex: 5,
+            flex: 4,
         },
         {
             id: 'size',
@@ -87,7 +87,7 @@ export default function UploadFileTable({ recordList, setUpdateRows, }) {
                 // console.log(params)
                 return Math.ceil(params.value / 1024) + " KB";
             },
-            flex: 1,
+            flex: 2,
         },
     ];
 
diff --git a/src/themes/buttonConst.js b/src/themes/buttonConst.js
index 2d889ad..a8c6073 100644
--- a/src/themes/buttonConst.js
+++ b/src/themes/buttonConst.js
@@ -128,7 +128,7 @@ export const PNSPS_LONG_BUTTON_THEME = createTheme({
                 root: {
                     fontSize: '1.0rem',
                     height: '40px',
-                    width: '40vw', // Default width for xs screen sizes
+                    width: '70vw', // Default width for xs screen sizes
                     '@media (min-width: 600px)': { // sm breakpoint
                         width: '30vw',
                     },
@@ -136,7 +136,7 @@ export const PNSPS_LONG_BUTTON_THEME = createTheme({
                         width: '25vw',
                     },
                     '@media (min-width: 1280px)': { // lg breakpoint
-                        width: '14vw',
+                        width: '19vw',
                     },
                     textTransform: "none",
                     alignItems: 'center'