initialisation on the doormile express console with astryx

src/pages/nearle/clients/createclient.js

@@ -2,7 +2,8 @@ import { useEffect, useState } from 'react';
 
 // material-ui
 import { useTheme } from '@mui/material/styles';
-import { Box, Button, FormLabel, Grid, InputLabel, MenuItem, Select, Stack, TextField, Typography, useMediaQuery } from '@mui/material';
+import { Avatar, Box, Button, FormLabel, Grid, InputLabel, MenuItem, Paper, Select, Stack, TextField, Typography, useMediaQuery } from '@mui/material';
+import { MdPersonAddAlt1 } from 'react-icons/md';
 
 // third-party
 // import { PatternFormat } from 'react-number-format';
@@ -15,6 +16,7 @@ import Loader from 'components/Loader';
 import Geocode from 'react-geocode';
 import { enqueueSnackbar } from 'notistack';
 import { useNavigate } from 'react-router';
+import { DT, tint } from 'themes/dt/tokens';
 // import { setLocationType } from 'react-geocode';
 
 // const avatarImage = require.context('assets/images/users', true);
@@ -145,12 +147,6 @@ const Createclient = () => {
       });
   };
 
-  useEffect(() => {
-    if (selectedImage) {
-      setAvatar(URL.createObjectURL(selectedImage));
-    }
-  }, [selectedImage]);
-
   const { ref: materialRef } = usePlacesWidget({
     apiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
     onPlaceSelected: (place) => {
@@ -296,11 +292,28 @@ const Createclient = () => {
       {loading && <Loader />}
 
       <Grid item xs={12} sx={{ mb: 2 }}>
-        <Stack direction="row" justifyContent="space-between" alignItems="center">
-          <Typography variant="h3">Create Client</Typography>
-        </Stack>
+        <Paper
+          sx={{
+            p: 2.5,
+            borderRadius: DT.radiusCard + 'px',
+            boxShadow: DT.shadowSoft,
+            border: '1px solid',
+            borderColor: DT.borderSubtle,
+            background: `linear-gradient(135deg, ${tint('#C01227')} 0%, ${tint('#D25463')} 100%)`
+          }}
+        >
+          <Stack direction="row" spacing={1.5} alignItems="center">
+            <Avatar sx={{ width: 48, height: 48, bgcolor: DT.brand }}>
+              <MdPersonAddAlt1 size={22} />
+            </Avatar>
+            <Typography variant="h3">Create Client</Typography>
+          </Stack>
+        </Paper>
       </Grid>
-      <MainCard contentSX={{ p: { xs: 1.5, md: 3 } }}>
+      <MainCard
+        contentSX={{ p: { xs: 1.5, md: 3 } }}
+        sx={{ borderRadius: DT.radiusCard + 'px', boxShadow: DT.shadowSoft, borderColor: DT.borderSubtle }}
+      >
         <Grid container spacing={isMobile ? 2 : 3}>
           {/* <Grid item xs={12} sm={4} >
                     <MainCard title="Personal Information" sx={{ height: '100%' }}>