Merge pull request #592 from shreyas1434shinde/YouthNet

Issue task PS-3327 :Revert code changes for UI modal
tekdi · Jan 13, 2025 · b6f6208 · b6f6208
2 parents 808f980 + 86df8cc
commit b6f6208
Show file tree

Hide file tree

Showing 18 changed files with 377 additions and 137 deletions.
diff --git a/src/components/CenterSessionModal.tsx b/src/components/CenterSessionModal.tsx
@@ -28,6 +28,23 @@ const CenterSessionModal: React.FC<SessionsModalProps> = ({
   const theme = useTheme<any>();
   const { t } = useTranslation();
 
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '85%',
+    bgcolor: theme?.palette?.warning['A400'],
+    boxShadow: 24,
+    borderRadius: '16px',
+    maxHeight: '626px',
+    minheight: '100%',
+    border: 'none',
+    '@media (min-width: 600px)': {
+      width: '450px',
+    },
+  };
+
 
   return (
     <Modal
@@ -40,7 +57,7 @@ const CenterSessionModal: React.FC<SessionsModalProps> = ({
       aria-labelledby="modal-modal-title"
       aria-describedby="modal-modal-description"
     >
-      <Box sx={modalStyles}>
+      <Box sx={style}>
         <Box
           display={'flex'}
           justifyContent={'space-between'}

diff --git a/src/components/CustomPagination.tsx b/src/components/CustomPagination.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import Pagination from '@mui/material/Pagination';
+import Stack from '@mui/material/Stack';
+
+
+interface CustomPaginationProps {
+    count: number; 
+    page: number; 
+    onPageChange: (value: number) => void; 
+    color?: 'primary' | 'secondary' | 'standard'; 
+}
+
+const CustomPagination: React.FC<CustomPaginationProps> = ({
+    count,
+    page,
+    onPageChange,
+    color = 'primary'
+}) => {
+    return (
+        <Stack spacing={2} alignItems="center">
+            <Pagination
+                count={count}
+                page={page}
+                onChange={(event, value) => onPageChange(value)}
+                color={color}
+            />
+        </Stack>
+    );
+};
+
+export default CustomPagination;
diff --git a/src/components/CustomRangeModal.tsx b/src/components/CustomRangeModal.tsx
@@ -6,7 +6,6 @@ import Modal from '@mui/material/Modal';
 import WestIcon from '@mui/icons-material/West';
 import { useTranslation } from 'next-i18next';
 import { useDirection } from '../hooks/useDirection';
-import { modalStyles } from '@/styles/modalStyles';
 
 
 
@@ -16,6 +15,23 @@ const CustomRangeModal: React.FC = () => {
     setIsCalenderModalOpen(!isCalendarModalOpen);
   const { dir, isRTL } = useDirection();
   const { t } = useTranslation();
+  const style = {
+    width: '300px', // Adjust width as needed
+    maxWidth: 300, // Maximum width for responsiveness
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    backgroundColor: 'white',
+    padding: '12px 15px 12px 15px',
+    borderRadius: '8px',
+    boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.1)',
+
+    // Responsive styles
+    '@media (min-width: 768px)': {
+      width: '70%', // Adjust width for smaller screens
+    },
+  };
   return (
     <div>
       {/* <Button onClick={handleOpen}>Open modal</Button> */}
@@ -25,7 +41,7 @@ const CustomRangeModal: React.FC = () => {
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description"
       >
-        <Box sx={modalStyles}>
+        <Box sx={style}>
           <Box
             sx={{
               display: 'flex',

diff --git a/src/components/DateRangePopup.tsx b/src/components/DateRangePopup.tsx
@@ -208,6 +208,37 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
   const handleActiveStartDateChange = (date: Date) => {
     // setActiveStartDate(date);
   };
+  const modalStyle = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '85%',
+    bgcolor: 'background.paper',
+    // border: '2px solid #000',
+    boxShadow: 24,
+    // p: 4,
+    '@media (min-width: 600px)': {
+      width: '450px',
+    },
+  };
+
+  const calenderModalStyle = {
+    width: '85%',
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    backgroundColor: 'white',
+    padding: '12px 0 12px 0',
+    borderRadius: '8px',
+    // boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.1)',
+    // height: '526px',
+    // Responsive styles
+    '@media (min-width: 600px)': {
+      width: '450px',
+    },
+  };
 
   return (
     <Box className="mt-md-16" sx={{ px: '2px' }}>
@@ -251,7 +282,7 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
         aria-describedby="edit-profile-description"
       >
         <Box
-          sx={modalStyles}
+          sx={modalStyle}
           gap="10px"
           display="flex"
           flexDirection="column"
@@ -341,7 +372,7 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description"
       >
-        <Box sx={modalStyles}>
+        <Box sx={calenderModalStyle}>
           <Box
             sx={{
               padding: ' 0 15px 15px',

diff --git a/src/components/DeleteUserModal.tsx b/src/components/DeleteUserModal.tsx
@@ -106,14 +106,27 @@ const DeleteUserModal: React.FC<DeleteUserModalProps> = ({
   // const handleOtherReasonChange = (event: any) => {
   //   setOtherReason(event.target.value);
   // };
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '85%',
+    boxShadow: 24,
+    bgcolor: '#fff',
+    borderRadius: '16px',
+    '@media (min-width: 600px)': {
+      width: '450px',
+    },
+  };
 
   return (
     <Modal
       open={open}
       aria-labelledby="child-modal-title"
       aria-describedby="child-modal-description"
     >
-      <Box sx={modalStyles}>
+      <Box sx={{ ...style }}>
         <Box
           display={'flex'}
           justifyContent={'space-between'}

diff --git a/src/components/DropOutModal.tsx b/src/components/DropOutModal.tsx
@@ -23,8 +23,6 @@ import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
 import { Status } from '@/utils/app.constant';
 import { fetchAttendanceStats } from '@/utils/helperAttendanceStatApi';
-import { modalStyles } from '@/styles/modalStyles';
-
 interface DropOutModalProps {
   open: boolean;
   onClose: (confirmed: boolean, reason?: string) => void;
@@ -109,13 +107,27 @@ function DropOutModal({
     }
   };
 
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '85%',
+    boxShadow: 24,
+    bgcolor: '#fff',
+    borderRadius: '16px',
+    '@media (min-width: 600px)': {
+      width: '450px',
+    },
+  };
+
   return (
     <Modal
       open={open}
       aria-labelledby="child-modal-title"
       aria-describedby="child-modal-description"
     >
-      <Box sx={modalStyles}>
+      <Box sx={{ ...style }}>
         <Box
           display={'flex'}
           justifyContent={'space-between'}

diff --git a/src/components/ManageCentersModal.tsx b/src/components/ManageCentersModal.tsx
@@ -97,6 +97,20 @@ const ManageCentersModal: React.FC<ManageUsersModalProps> = ({
   )
   ?.sort((a, b) => a.name.localeCompare(b.name));
 
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '85%',
+    bgcolor: theme.palette.warning['A400'],
+    boxShadow: 24,
+    borderRadius: '16px',
+    height: 'auto',
+    '@media (min-width: 600px)': {
+      width: '450px',
+    },
+  };
 
   return (
     <div>
@@ -110,7 +124,7 @@ const ManageCentersModal: React.FC<ManageUsersModalProps> = ({
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description"
       >
-        <Box sx={modalStyles}>
+        <Box sx={style}>
           <Box
             display={'flex'}
             justifyContent={'space-between'}