From b361d34d5589e6be842df142559e5029c8512448 Mon Sep 17 00:00:00 2001
From: "jason.lam" <jason.lam@2fi-solutions.com.hk>
Date: Tue, 2 Jan 2024 12:43:54 +0800
Subject: [PATCH] update public form

---
 .../auth-forms/CustomFormWizard.js            | 104 +++++++++---------
 src/themes/themeConst.js                      |   5 +-
 src/themes/typography.js                      |   5 +
 3 files changed, 60 insertions(+), 54 deletions(-)

diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js
index 1eca827..a7838c3 100644
--- a/src/pages/authentication/auth-forms/CustomFormWizard.js
+++ b/src/pages/authentication/auth-forms/CustomFormWizard.js
@@ -659,7 +659,7 @@ const CustomFormWizard = (props) => {
                     <Grid container spacing={3}>
                         <Grid item xs={12} md={12}>
                             <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                <Button variant="outlined" type="reset" onClick={handleReset.bind(null, formik.resetForm)} sx={{ height: '40px' }}><Typography variant="h5">重置</Typography></Button>
+                                <Button variant="outlined" type="reset" onClick={handleReset.bind(null, formik.resetForm)} sx={{ height: '40px' }}><Typography variant="pnspsFormHeader">重置</Typography></Button>
                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
                                     <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>成為新的個人用戶</Typography>
                                 </div>
@@ -672,7 +672,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} md={12} >
                                     <Stack spacing={1}>
                                         <InputLabel htmlFor="username-signup">
-                                            <Typography variant="h5">
+                                            <Typography variant="pnspsFormHeader">
                                                 用戶登入名稱
                                                 {/* <span style={{ color: '#f10000' }}>*</span>
                                                 <Button
@@ -723,7 +723,7 @@ const CustomFormWizard = (props) => {
                                             <Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                 <Stack direction="row" justifyContent="space-between">
                                                     <InputLabel htmlFor="password-signup">
-                                                        <Typography variant="h5">
+                                                        <Typography variant="pnspsFormHeader">
                                                             密碼
                                                             <span style={{ color: '#f10000' }}>*</span>
                                                         </Typography>
@@ -769,7 +769,7 @@ const CustomFormWizard = (props) => {
                                                     </FormHelperText>
                                                 )}
                                             </Stack>
-                                            <FormControl fullWidth sx={{ mt: 2 }}>
+                                            <FormControl fullWidth sx={{ mt: 1 }}>
                                                 <Grid container spacing={2} alignItems="center">
                                                     <Grid item>
                                                         <Box sx={{ bgcolor: level?.color, width: 85, height: 8, borderRadius: '7px' }} />
@@ -785,7 +785,7 @@ const CustomFormWizard = (props) => {
                                         <Grid item xs={12} md={6} >
                                             <Stack spacing={1}>
                                                 <InputLabel htmlFor="confirmPassword-signup">
-                                                    <Typography variant="h5">
+                                                    <Typography variant="pnspsFormHeader">
                                                         確認密碼
                                                         <span style={{ color: '#f10000' }}>*</span>
                                                     </Typography>
@@ -831,9 +831,8 @@ const CustomFormWizard = (props) => {
                                                 )}
                                             </Stack>
                                             <Grid container spacing={2} alignItems="center">
-                                                <Grid item>
+                                                <Grid item sx={{mt:1}}>
                                                     <Typography variant="subtitle1">
-                                                        <br />
                                                         •至少8個字元，字元越多越好 <br />
                                                         •字母和數字的混合<br />
                                                         •英文字母大寫與小寫的混合<br />
@@ -856,7 +855,7 @@ const CustomFormWizard = (props) => {
                                     <Grid container sx={{ mb: 1 }}>
                                         <Stack spacing={1}>
                                             <InputLabel htmlFor="idDocType-signup">
-                                                <Typography variant="h5">
+                                                <Typography variant="pnspsFormHeader">
                                                     身份證明文件
                                                     <span style={{ color: '#f10000' }}>*</span>
                                                 </Typography>
@@ -876,23 +875,24 @@ const CustomFormWizard = (props) => {
                                                     disablePortal
                                                     id="idDocType"
                                                     //value={selectedIdDocType}
+                                                    size="small"
                                                     options={idDocTypeComboList}
                                                     // getOptionLabel={(idDocTypeComboList) => idDocTypeComboList.label}
                                                     onBlur={formik.handleBlur}
                                                     filterOptions={(options) => options}
                                                     inputValue={selectedIdDocInputType}
                                                     onChange={(event, newValue) => {
-                                                        if (newValue != null && newValue != {}) {
+                                                        if (newValue != null && newValue !== {}) {
                                                             setSelectedIdDocInputType(newValue.label);
                                                             setSelectedIdDocType(newValue);
-                                                            if (newValue.type != "HKID") {
+                                                            if (newValue.type !== "HKID") {
                                                                 formik.setFieldValue("checkDigit", "")
                                                             }
                                                         } else {
                                                             setSelectedIdDocInputType("");
                                                         }
                                                     }}
-                                                    sx={{ "& .MuiInputBase-root": { height: "41px" }, "#idDocType": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
+                                                    sx={{ "& .MuiInputBase-root": { minHeight: "46px", maxHeight: "46px" }, /*"#idDocType": { padding: "0px 0px 0px 0px" },*/ "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
                                                     renderInput={(params) => <TextField {...params} placeholder="證件類別" />}
                                                 />
                                                 {formik.touched.idDocType && (
@@ -932,7 +932,7 @@ const CustomFormWizard = (props) => {
                                                             error={Boolean(formik.touched.idNo && formik.errors.idNo)}
                                                             onBlur={formik.handleBlur}
                                                             inputProps={{
-                                                                maxLength: selectedIdDocType.type == 'HKID' ? 8 : 18,
+                                                                maxLength: selectedIdDocType.type === 'HKID' ? 8 : 18,
                                                                 onKeyDown: (e) => {
                                                                     console.log(e)
                                                                     if (e.key === 'Enter') {
@@ -1026,7 +1026,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1}>
                                         <InputLabel htmlFor="enName-signup">
-                                            <Typography variant="h5">
+                                            <Typography variant="pnspsFormHeader">
                                                 英文姓名
                                                 {selectedIdDocType.type === "CNID" ? "" : <span style={{ color: '#f10000' }}>*</span>}
                                             </Typography>
@@ -1059,7 +1059,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1}>
                                         <InputLabel htmlFor="chName-signup">
-                                            <Typography variant="h5">
+                                            <Typography variant="pnspsFormHeader">
                                                 中文姓名
                                                 <span style={{ color: '#f10000' }}>*</span>
                                             </Typography>
@@ -1093,7 +1093,7 @@ const CustomFormWizard = (props) => {
                                 <Grid item xs={12}>
                                     <Stack spacing={1}>
                                         <InputLabel htmlFor="address1-signup">
-                                            <Typography variant="h5">
+                                            <Typography variant="pnspsFormHeader">
                                                 地址
                                                 <span style={{ color: '#f10000' }}>*</span>
                                             </Typography>
@@ -1156,7 +1156,7 @@ const CustomFormWizard = (props) => {
                                             onChange={(event, newValue) => {
                                                 setSelectedAddress4(newValue);
                                             }}
-                                            sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address4-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
+                                            sx={{ "& .MuiInputBase-root": { height: "48px" }, "#address4-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
                                             renderInput={(params) => <TextField {...params} placeholder="區域 (只適用於香港)" />}
                                         />
                                         <Autocomplete
@@ -1167,7 +1167,7 @@ const CustomFormWizard = (props) => {
                                             onChange={(event, newValue) => {
                                                 if (newValue !== null) {
                                                     setSelectedAddress5(newValue);
-                                                    if (newValue == '香港') {
+                                                    if (newValue === '香港') {
                                                         setCheckCountry(false)
                                                     } else {
                                                         setSelectedAddress4("");
@@ -1179,7 +1179,7 @@ const CustomFormWizard = (props) => {
                                                 }
                                             }}
 
-                                            sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
+                                            sx={{ "& .MuiInputBase-root": { height: "48px" }, "#address5-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
                                             renderInput={(params) => <TextField {...params} placeholder="國家/地區" />}
                                         />
                                         {formik.touched.address1 && formik.errors.address1 && (
@@ -1209,7 +1209,7 @@ const CustomFormWizard = (props) => {
                                         <Grid item xs={12} md={6}>
                                             <Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                 <InputLabel htmlFor="email-signup">
-                                                    <Typography variant="h5">
+                                                    <Typography variant="pnspsFormHeader">
                                                         電郵
                                                         <span style={{ color: '#f10000' }}>*</span>
                                                     </Typography>
@@ -1247,7 +1247,7 @@ const CustomFormWizard = (props) => {
                                         <Grid item xs={12} md={6}>
                                             <Stack spacing={1} >
                                                 <InputLabel htmlFor="emailConfirm-signup">
-                                                    <Typography variant="h5">
+                                                    <Typography variant="pnspsFormHeader">
                                                         確認電郵
                                                         <span style={{ color: '#f10000' }}>*</span>
                                                     </Typography>
@@ -1287,7 +1287,7 @@ const CustomFormWizard = (props) => {
                                                 <Grid item xs={12} md={12}>
                                                     <Stack direction="column" spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                         <InputLabel htmlFor="phone-signup">
-                                                            <Typography variant="h5">
+                                                            <Typography variant="pnspsFormHeader">
                                                                 聯絡電話
                                                                 <span style={{ color: '#f10000' }}>*</span>
                                                             </Typography>
@@ -1362,7 +1362,7 @@ const CustomFormWizard = (props) => {
                                                 <Grid item xs={12} md={12}>
                                                     <Stack spacing={1} direction="column">
                                                         <InputLabel htmlFor="fax-signup">
-                                                            <Typography variant="h5">
+                                                            <Typography variant="pnspsFormHeader">
                                                                 傳真號碼
                                                             </Typography>
                                                         </InputLabel>
@@ -1471,7 +1471,7 @@ const CustomFormWizard = (props) => {
                                     <Grid item xs={12} md={12}>
                                         <Grid container>
                                             <Grid item xs={12} md={12}>
-                                                <Typography variant="h5" height="80%" sx={{ textAlign: "left", overflow: "scroll", borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0C489E" }}>
+                                                <Typography variant="pnspsFormHeader" height="80%" sx={{ textAlign: "left", overflow: "scroll", borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0C489E" }}>
                                                     {termsAndCon}
                                                 </Typography>
                                             </Grid>
@@ -1488,7 +1488,7 @@ const CustomFormWizard = (props) => {
                                                                 color="primary"
                                                                 size="small"
                                                             />
-                                                            <Typography variant="h5">我接受</Typography>
+                                                            <Typography variant="pnspsFormHeader">我接受</Typography>
                                                         </Grid>
                                                     </Grid>
                                                 </Grid>
@@ -1502,7 +1502,7 @@ const CustomFormWizard = (props) => {
                                                                 color="primary"
                                                                 size="small"
                                                             />
-                                                            <Typography variant="h5">我不接受</Typography>
+                                                            <Typography variant="pnspsFormHeader">我不接受</Typography>
                                                         </Grid>
                                                     </Grid>
                                                 </Grid>
@@ -1575,10 +1575,10 @@ const CustomFormWizard = (props) => {
                             <Grid container spacing={2}>
                                 <Grid item xs={12} >
                                     <Stack spacing={2} direction="row">
-                                        <Typography variant="h5" color={theme.palette.grey[600]}>
+                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                             用戶登入名稱:
                                         </Typography>
-                                        <Typography variant="h5" id="preview-username-login">
+                                        <Typography variant="pnspsFormHeader" id="preview-username-login">
                                             {formik.values.username}
                                         </Typography>
                                     </Stack>
@@ -1593,7 +1593,7 @@ const CustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} md={12} >
                                     <Stack spacing={1}>
-                                        <Typography variant="h5" color={theme.palette.grey[600]}>
+                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                             身份證明文件
                                         </Typography>
                                     </Stack>
@@ -1601,20 +1601,20 @@ const CustomFormWizard = (props) => {
 
                                 <Grid item xs={12} md={6} >
                                     <Stack spacing={1} direction="row">
-                                        <Typography variant="h5" color={theme.palette.grey[600]}>
+                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                             證件類別:
                                         </Typography>
-                                        <Typography variant="h5" name="preview-idDocType">
+                                        <Typography variant="pnspsFormHeader" name="preview-idDocType">
                                             {selectedIdDocType.label}
                                         </Typography>
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
-                                        <Typography variant="h5" color={theme.palette.grey[600]}>
+                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                             證件號碼:
                                         </Typography>
-                                        <Typography variant="h5" id="idNo-login">
+                                        <Typography variant="pnspsFormHeader" id="idNo-login">
                                             {formik.values.idNo} {selectedIdDocType.type == "HKID" ? '(' + formik.values.checkDigit + ')' : null}
                                         </Typography>
                                     </Stack>
@@ -1622,56 +1622,56 @@ const CustomFormWizard = (props) => {
 
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
-                                        <Typography variant="h5" color={theme.palette.grey[600]}>
+                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                             英文姓名:
                                         </Typography>
-                                        <Typography variant="h5" id="preview-enName-signup">
+                                        <Typography variant="pnspsFormHeader" id="preview-enName-signup">
                                             {formik.values.enName}
                                         </Typography>
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
-                                        <Typography variant="h5" color={theme.palette.grey[600]}>
+                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                             中文姓名:
                                         </Typography>
-                                        <Typography variant="h5" id="preview-chName-signup">
+                                        <Typography variant="pnspsFormHeader" id="preview-chName-signup">
                                             {formik.values.chName}
                                         </Typography>
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12}>
                                     <Stack spacing={1} direction="row">
-                                        <Typography variant="h5" color={theme.palette.grey[600]}>
+                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                             地址:
                                         </Typography>
                                         <Stack spacing={1} direction="column">
-                                            <Typography variant="h5" id="preview-address1-signup">
+                                            <Typography variant="pnspsFormHeader" id="preview-address1-signup">
                                                 {formik.values.address1}
                                             </Typography>
                                             {formik.values.address2 != null ?
-                                                <Typography variant="h5" id="preview-address2-signup">
+                                                <Typography variant="pnspsFormHeader" id="preview-address2-signup">
                                                     {formik.values.address2}
                                                 </Typography>
                                                 : null}
                                             {formik.values.address3 != null ?
-                                                <Typography variant="h5" id="preview-address3-signup">
+                                                <Typography variant="pnspsFormHeader" id="preview-address3-signup">
                                                     {formik.values.address3}
                                                 </Typography>
                                                 : null}
                                             {selectedAddress5 == ("香港") ?
                                                 <Stack direction="row">
-                                                    <Typography variant="h5" color={theme.palette.grey[600]} id="preview-address4-signup">
+                                                    <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address4-signup">
                                                         區域 (只適用於香港):
                                                     </Typography>
-                                                    <Typography variant="h5">{selectedAddress4}</Typography>
+                                                    <Typography variant="pnspsFormHeader">{selectedAddress4}</Typography>
                                                 </Stack>
                                                 : null}
                                             <Stack direction="row">
-                                                <Typography variant="h5" color={theme.palette.grey[600]} id="preview-address5-signup">
+                                                <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address5-signup">
                                                     國家/地區:
                                                 </Typography>
-                                                <Typography variant="h5">{selectedAddress5}</Typography>
+                                                <Typography variant="pnspsFormHeader">{selectedAddress5}</Typography>
                                             </Stack>
                                         </Stack>
                                     </Stack>
@@ -1683,20 +1683,20 @@ const CustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} md={12}>
                                     <Stack spacing={1} direction="row">
-                                        <Typography variant="h5" color={theme.palette.grey[600]}>
+                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                             電郵:
                                         </Typography>
-                                        <Typography variant="h5" id="preview-email-signup">
+                                        <Typography variant="pnspsFormHeader" id="preview-email-signup">
                                             {formik.values.email}
                                         </Typography>
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
-                                        <Typography variant="h5" color={theme.palette.grey[600]}>
+                                        <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                             聯絡電話:
                                         </Typography>
-                                        <Typography variant="h5" id="preview-phone-signup">
+                                        <Typography variant="pnspsFormHeader" id="preview-phone-signup">
                                             +{formik.values.phoneCountryCode} {formik.values.phone}
                                         </Typography>
                                     </Stack>
@@ -1704,10 +1704,10 @@ const CustomFormWizard = (props) => {
                                 {formik.values.faxCountryCode != "" && formik.values.fax != "" ?
                                     <Grid item xs={12} md={6}>
                                         <Stack spacing={1} direction="row">
-                                            <Typography variant="h5" color={theme.palette.grey[600]}>
+                                            <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
                                                 傳真號碼:
                                             </Typography>
-                                            <Typography variant="h5" id="preview-fax-signup">
+                                            <Typography variant="pnspsFormHeader" id="preview-fax-signup">
                                                 +{formik.values.faxCountryCode} {formik.values.fax}
                                             </Typography>
                                         </Stack>
@@ -1740,7 +1740,7 @@ const CustomFormWizard = (props) => {
                                         <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
                                         <Typography display="inline" variant="h4">帳戶申請已成功提交。</Typography>
                                         <Typography display="inline" variant="h4">驗證電郵將發送到你的電郵地址，請依指示完成驗證及登入系統。</Typography>
-                                        <Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="h5">返回登入頁面</Typography></Button>
+                                        <Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="pnspsFormHeader">返回登入頁面</Typography></Button>
                                     </Stack>
                                     :
                                     // ERROR page
@@ -1748,7 +1748,7 @@ const CustomFormWizard = (props) => {
                                         {/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
                                         <CancelOutlinedIcon color="error" sx={{ width: "200px", height: "200px" }} />
                                         <Typography display="inline" variant="h4">申請失敗，請稍後嘗試</Typography>
-                                        <Button color="error" variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="h5">返回登入頁面</Typography></Button>
+                                        <Button color="error" variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="pnspsFormHeader">返回登入頁面</Typography></Button>
                                     </Stack>
                                 }
                             </Grid>
diff --git a/src/themes/themeConst.js b/src/themes/themeConst.js
index f7cd852..5f31c58 100644
--- a/src/themes/themeConst.js
+++ b/src/themes/themeConst.js
@@ -109,7 +109,7 @@ export const PNSPS_THEME = createTheme({
             styleOverrides: {
                 root: {
                     color: 'rgba(0, 0, 0, 0.8)',
-                    fontSize: '1rem',
+                    fontSize: '1.15rem',
                 },
             },
         },
@@ -178,7 +178,7 @@ export const PNSPS_THEME = createTheme({
         MuiOutlinedInput: {
             styleOverrides: {
                 input: {
-                    //padding: '10.5px 14px 10.5px 12px',
+                    padding: '10.5px 14px 10.5px 12px',
                     '&.MuiOutlinedInput-input.Mui-disabled': {
                         WebkitTextFillColor: '#888888',
                     },
@@ -226,6 +226,7 @@ export const PNSPS_THEME = createTheme({
                         fontSize: FONT_SIZE,
                         display: 'flex',
                         alignItems: 'center',
+                        color: 'rgba(0, 0, 0, 0.85)'
                     },
                     '& .MuiInputBase-root': {
                         //height: '40px',
diff --git a/src/themes/typography.js b/src/themes/typography.js
index 0d094f7..e03b041 100644
--- a/src/themes/typography.js
+++ b/src/themes/typography.js
@@ -12,6 +12,11 @@ const Typography = (fontFamily) => ({
     fontSize: '1.175rem',
     lineHeight: 1.4
   },
+  pnspsFormHeader: {
+    fontWeight: 600,
+    fontSize: '1.2rem',
+    lineHeight: 1.4
+  },
   pnspsHeaderTitle: {
     fontSize: '1.15rem',
     fontWeight: 600,