From 26d987b86bafa532996b8995e380addf84b65b72 Mon Sep 17 00:00:00 2001
From: "jason.lam" <jason.lam@2fi-solutions.com.hk>
Date: Fri, 26 Jan 2024 16:41:24 +0800
Subject: [PATCH] update email template layout

---
 .../Detail_GLD/EmailTemplateDetails.js        | 103 ++++++------------
 src/pages/EmailTemplate/Search_GLD/index.js   |  20 ++--
 2 files changed, 45 insertions(+), 78 deletions(-)

diff --git a/src/pages/EmailTemplate/Detail_GLD/EmailTemplateDetails.js b/src/pages/EmailTemplate/Detail_GLD/EmailTemplateDetails.js
index ff10def..926259c 100644
--- a/src/pages/EmailTemplate/Detail_GLD/EmailTemplateDetails.js
+++ b/src/pages/EmailTemplate/Detail_GLD/EmailTemplateDetails.js
@@ -4,8 +4,7 @@ import {
     Grid,
     Typography,
     FormLabel,
-    OutlinedInput,
-    Button,
+    Button, TextField,
     // TextField,
     // Autocomplete,
 } from '@mui/material';
@@ -15,6 +14,8 @@ import * as React from "react";
 import Loadable from 'components/Loadable';
 const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
 import { useForm } from 'react-hook-form';
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const ApplicationDetailCard = ({
     formData,
@@ -35,59 +36,30 @@ const ApplicationDetailCard = ({
     //     initialValues: data,
     // });
 
-    const DisplayField = ({ name, width, value, rows = 1, disabled = false }) => {
-        return <OutlinedInput
+    const DisplayField = ({ name, rows, value, disabled = false }) => {
+        return <TextField
             fullWidth
-            multiline
             disabled={disabled}
-            size="small"
-            // onChange={formik.handleChange}
+            inputProps={{ style: {fontSize: '1.1rem'}}}
+            InputProps={{
+                style: {
+                    minHeight:'42.5px',
+                    maxHeight: '50vh',
+                    padding: '0 0 0 0',
+                    height: 'fit-content',
+                    boxSizing: "inherit"},
+            }}
+            sx={{ padding: '10.5px 14px 10.5px 12px'}}
             {...register(name,
                 {
                     value: value,
                 })}
-            id={name}
-            name={name}
-            variant="outlined"
+            multiline
+            minRows={rows}
             maxRows={6}
-            rows={rows}
-            sx={
-                {
-                    "& .Mui-disabled": {
-                        WebkitTextFillColor: "#000000",
-                        background: "#f8f8f8",
-                    },
-                    // "& .MuiInputBase-input.Mui-disabled": {
-                    //     WebkitTextFillColor: "#000000",
-                    //     background: "#f8f8f8",
-                    // },
-                    width: width ? width : '100%'
-                }
-            }
         />;
     }
-
     const { register, handleSubmit } = useForm()
-
-    
-
-    // const DisplaySelection = ({ name = "test", value = "", onChange }) => {
-    //     return <Autocomplete
-    //         {...register(name)}
-    //         disablePortal
-    //         id={name}
-    //         options={formData}
-    //         vale={value}
-    //         onChange={onChange}
-    //         renderInput={(params) => (
-    //             <TextField {...params}
-    //                 InputLabelProps={{
-    //                     shrink: true
-    //                 }}
-    //             />
-    //         )}
-    //     />
-    // }
     return (
         <MainCard
             id={"emailTemplateMainCard"}
@@ -141,6 +113,7 @@ const ApplicationDetailCard = ({
                                             <DisplayField
                                                 name="description"
                                                 value={formData?.description}
+                                                rows={2}
                                             />
                                         </FormControl>
                                     </Grid>
@@ -168,14 +141,14 @@ const ApplicationDetailCard = ({
 
                         <Grid container direction="row" justifyContent="space-between"
                             alignItems="center">
-                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
+                            <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                 <Grid container alignItems={"center"}>
-                                    <Grid item xs={12} md={3} lg={3}
+                                    <Grid item xs={12} md={1.5} lg={1.5}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel>Subject (Cht):</FormLabel>
                                     </Grid>
 
-                                    <Grid item xs={12} md={9} lg={9}>
+                                    <Grid item xs={12} md={10.5} lg={10.5}>
                                         <DisplayField
                                             name="subjectCht"
                                             value={formData?.subjectCht}
@@ -202,18 +175,18 @@ const ApplicationDetailCard = ({
                         </Grid>
                         <Grid container direction="row" justifyContent="space-between"
                             alignItems="center">
-                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
+                            <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                 <Grid container alignItems={"center"}>
-                                    <Grid item xs={12} md={3} lg={3}
+                                    <Grid item xs={12} md={1.5} lg={1.5}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel>Subject (Chs):</FormLabel>
                                     </Grid>
 
-                                    <Grid item xs={12} md={9} lg={9}>
+                                    <Grid item xs={12} md={10.5} lg={10.5}>
                                         <DisplayField
                                             name="subjectChs"
                                             value={formData?.subjectChs}
-                                            rows={2}
+                                            rows={1}
                                         />
                                     </Grid>
                                 </Grid>
@@ -236,18 +209,18 @@ const ApplicationDetailCard = ({
                         </Grid>
                         <Grid container direction="row" justifyContent="space-between"
                             alignItems="center">
-                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
+                            <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                 <Grid container alignItems={"center"}>
-                                    <Grid item xs={12} md={3} lg={3}
+                                    <Grid item xs={12} md={1.5} lg={1.5}
                                         sx={{ display: 'flex', alignItems: 'center' }}>
                                         <FormLabel>Subject (Eng):</FormLabel>
                                     </Grid>
 
-                                    <Grid item xs={12} md={9} lg={9}>
+                                    <Grid item xs={12} md={10.5} lg={10.5}>
                                         <DisplayField
                                             name="subjectEng"
                                             value={formData?.subjectEng}
-                                            rows={2}
+                                            rows={1}
                                         />
                                     </Grid>
                                 </Grid>
@@ -273,33 +246,25 @@ const ApplicationDetailCard = ({
                     {/*bottom button*/}
                     <Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"end"} justifyContent="center">
                         <Grid container maxWidth justifyContent="flex-end">
+                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                             <Grid item sx={{ ml: 3, mr: 3 }}>
                                 <Button
-                                    size="large"
-                                    color="error"
+                                    color="delete"
                                     variant="contained"
                                     onClick={handleDelete}
-                                    sx={{
-                                        textTransform: 'capitalize',
-                                        alignItems: 'end'
-                                    }}
                                 >
-                                    <Typography variant="h5">Delete</Typography>
+                                    Delete
                                 </Button>
                             </Grid>
                             <Grid item sx={{ ml: 3, mr: 3 }}>
                                 <Button
-                                    size="large"
                                     variant="contained"
                                     type="submit"
-                                    sx={{
-                                        textTransform: 'capitalize',
-                                        alignItems: 'end'
-                                    }}
                                 >
-                                    <Typography variant="h5">Save</Typography>
+                                    Save
                                 </Button>
                             </Grid>
+                            </ThemeProvider>
                         </Grid>
                     </Grid>
                 </Grid>
diff --git a/src/pages/EmailTemplate/Search_GLD/index.js b/src/pages/EmailTemplate/Search_GLD/index.js
index 2556ba1..f45730b 100644
--- a/src/pages/EmailTemplate/Search_GLD/index.js
+++ b/src/pages/EmailTemplate/Search_GLD/index.js
@@ -25,6 +25,8 @@ const BackgroundHead = {
     backgroundPosition: 'right'
 }
 import { useNavigate } from "react-router";
+import {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -56,7 +58,7 @@ const Index = () => {
             <LoadingComponent />
             :
             (
-                <Grid container sx={{ minHeight: '110vh', backgroundColor: 'backgroundColor.default' }} direction="column" justifyContent="flex-start" alignItems="center" >
+                <Grid container sx={{ backgroundColor: 'backgroundColor.default' }} direction="column" justifyContent="flex-start" alignItems="center" >
                     <Grid item xs={12} width="100%">
                         <div style={BackgroundHead} width="100%">
                             <Stack direction="row" height='70px'>
@@ -78,18 +80,18 @@ const Index = () => {
                     <Grid container direction="row"
                         justifyContent="space-between"
                         alignItems="center">
-                        <Grid item xs={3} md={3} sx={{ ml: 3, mr: 1, mb: 3, mt: 3 }}>
+                        <Grid item xs={3} md={3} sx={{ mb:3, ml: 3, mr: 1 }}>
+                            <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                             <Button
-                                size="large"
                                 variant="contained"
                                 onClick={()=>{navigate('/emailTemplate/-1')}}
-                                sx={{
-                                    textTransform: 'capitalize',
-                                    alignItems: 'end'
-                                }}>
-                                <AddCircleOutlineIcon sx={{ mb: 0.5 }} />
-                                <Typography sx={{ ml: 1 }} variant="h5">New Email Template</Typography>
+                                startIcon={<AddCircleOutlineIcon/>}
+                            >
+
+                                New Email Template
+
                             </Button>
+                            </ThemeProvider>
                         </Grid>
                     </Grid>
                 </Grid >