Fix: Improve UI Consistency for Date of Birth Calendar on User Profil…

…e Page (PalisadoesFoundation#2631) - Updated styles in `Settings.module.css` for consistent calendar UI - Modified logic in `Settings.tsx` to align with the updated design - Ensured responsive behavior and compatibility across devices
Faizankhan1104 · Dec 27, 2024 · 77a14eb · 77a14eb
1 parent 3d1f1f0
commit 77a14eb
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -72,6 +72,7 @@
   "scripts": {
     "serve": "cross-env ESLINT_NO_DEV_ERRORS=true vite --config config/vite.config.ts",
     "build": "tsc && vite build --config config/vite.config.ts",
+    "start": "node setup.ts",
     "preview": "vite preview --config config/vite.config.ts",
     "test": "cross-env NODE_ENV=test jest --env=./scripts/custom-test-env.js --watchAll --coverage",
     "eject": "react-scripts eject",

diff --git a/src/assets/css/app.css b/src/assets/css/app.css
diff --git a/src/screens/OrganizationEvents/OrganizationEvents.module.css b/src/screens/OrganizationEvents/OrganizationEvents.module.css
@@ -193,6 +193,7 @@
   flex-direction: row;
   margin-bottom: 15px;
 }
+
 .datebox {
   width: 90%;
   border-radius: 7px;
@@ -206,6 +207,7 @@
   margin-right: 5px;
   margin-left: 5px;
 }
+
 .checkboxdiv > label {
   margin-right: 50px;
 }

diff --git a/src/screens/UserPortal/Settings/Settings.module.css b/src/screens/UserPortal/Settings/Settings.module.css
@@ -23,11 +23,13 @@
   font-size: 1.2rem;
   font-weight: 600;
 }
+
 .scrollableCardBody {
   max-height: min(220px, 50vh);
   overflow-y: auto;
   scroll-behavior: smooth;
 }
+
 .cardHeader {
   padding: 1.25rem 1rem 1rem 1rem;
   border-bottom: 1px solid var(--bs-gray-200);
@@ -93,6 +95,7 @@
   opacity: 1;
   color: black !important;
 }
+
 .opendrawer {
   position: fixed;
   display: flex;
@@ -114,11 +117,18 @@
   transition: background-color 0.5s ease;
   background-color: var(--bs-primary);
 }
+
 .collapseSidebarButton:hover {
   transition: background-color 0.5s ease;
   background-color: var(--bs-primary);
 }
 
+.textField {
+  font-size: 14px;
+  background-color: rgba(245, 245, 245);
+  border: 1px solid var(--bs-border-color);
+}
+
 @media (max-width: 1120px) {
   .collapseSidebarButton {
     width: calc(250px);

diff --git a/src/screens/UserPortal/Settings/Settings.tsx b/src/screens/UserPortal/Settings/Settings.tsx
@@ -8,7 +8,11 @@ import { useMutation, useQuery } from '@apollo/client';
 import { errorHandler } from 'utils/errorHandler';
 import { toast } from 'react-toastify';
 import { CHECK_AUTH } from 'GraphQl/Queries/Queries';
+import { DatePicker } from '@mui/x-date-pickers';
 import useLocalStorage from 'utils/useLocalstorage';
+import dayjs from 'dayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import {
   educationGradeEnum,
   employmentStatusEnum,
@@ -23,7 +27,6 @@ import Avatar from 'components/Avatar/Avatar';
 import type { InterfaceEvent } from 'components/EventManagement/EventAttendance/InterfaceEvents';
 import { EventsAttendedByUser } from 'components/UserPortal/UserProfile/EventsAttendedByUser';
 import UserAddressFields from 'components/UserPortal/UserProfile/UserAddressFields';
-
 /**
  * The Settings component allows users to view and update their profile settings.
  * It includes functionality to handle image uploads, reset changes, and save updated user details.
@@ -124,7 +127,7 @@ export default function settings(): JSX.Element {
    * @param fieldName - The name of the field to be updated.
    * @param value - The new value for the field.
    */
-  const handleFieldChange = (fieldName: string, value: string): void => {
+  const handleFieldChange = (fieldName: string, value: Date | string): void => {
     setisUpdated(true);
     setUserDetails((prevState) => ({
       ...prevState,
@@ -141,7 +144,6 @@ export default function settings(): JSX.Element {
       (fileInputRef.current as HTMLInputElement).click();
     }
   };
-
   /**
    * Resets the user details to the values fetched from the server.
    */
@@ -440,15 +442,26 @@ export default function settings(): JSX.Element {
                       >
                         {t('birthDate')}
                       </Form.Label>
-                      <Form.Control
-                        type="date"
-                        id="birthDate"
-                        value={userDetails.birthDate}
-                        onChange={(e) =>
-                          handleFieldChange('birthDate', e.target.value)
-                        }
-                        className={`${styles.cardControl}`}
-                      />
+                      <LocalizationProvider dateAdapter={AdapterDayjs}>
+                        <DatePicker
+                          value={dayjs(userDetails.birthDate)}
+                          className={`${styles.textField}`}
+                          onChange={(date) => {
+                            if (date) {
+                              console.log(date.toISOString());
+                              handleFieldChange(
+                                'birthDate',
+                                date.toISOString(),
+                              );
+                            }
+                          }}
+                          slotProps={{
+                            textField: {
+                              error: false,
+                            },
+                          }}
+                        />
+                      </LocalizationProvider>
                     </Col>
                   </Row>
                   <Row className="mb-1">