From 77a14eb331c5f4383de5fb746c9a0d84d05f2073 Mon Sep 17 00:00:00 2001 From: faizankhan1104 Date: Fri, 27 Dec 2024 22:52:59 +0530 Subject: [PATCH 1/2] Fix: Improve UI Consistency for Date of Birth Calendar on User Profile Page (#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 --- package.json | 1 + src/assets/css/app.css | 2 +- .../OrganizationEvents.module.css | 2 + .../UserPortal/Settings/Settings.module.css | 10 +++++ src/screens/UserPortal/Settings/Settings.tsx | 37 +++++++++++++------ 5 files changed, 39 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 892a1331e4..943381622f 100644 --- 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 index 0d23ea0e13..59b93dae98 100644 --- a/src/assets/css/app.css +++ b/src/assets/css/app.css @@ -2423,7 +2423,7 @@ progress { .form-control { display: block; width: 100%; - padding: 0.7rem 1rem; + padding: 1rem 1rem; font-size: 1rem; font-weight: 400; line-height: 1.5; diff --git a/src/screens/OrganizationEvents/OrganizationEvents.module.css b/src/screens/OrganizationEvents/OrganizationEvents.module.css index 55e86fcaba..1a88bb4a6f 100644 --- 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 index 2558ea9f63..69c751908e 100644 --- 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 index 6038879b7f..49d56cfaa7 100644 --- 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')} - - handleFieldChange('birthDate', e.target.value) - } - className={`${styles.cardControl}`} - /> + + { + if (date) { + console.log(date.toISOString()); + handleFieldChange( + 'birthDate', + date.toISOString(), + ); + } + }} + slotProps={{ + textField: { + error: false, + }, + }} + /> + From ef90c0fa09228e46e97745d336caf7c649f96682 Mon Sep 17 00:00:00 2001 From: Faizankhan1104 <111492455+Faizankhan1104@users.noreply.github.com> Date: Sun, 29 Dec 2024 23:30:07 +0530 Subject: [PATCH 2/2] Update Settings.tsx --- src/screens/UserPortal/Settings/Settings.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/screens/UserPortal/Settings/Settings.tsx b/src/screens/UserPortal/Settings/Settings.tsx index 49d56cfaa7..7e00068a18 100644 --- a/src/screens/UserPortal/Settings/Settings.tsx +++ b/src/screens/UserPortal/Settings/Settings.tsx @@ -457,6 +457,7 @@ export default function settings(): JSX.Element { }} slotProps={{ textField: { + id: "birthDate", error: false, }, }}