From 75a8c7c8e704e5fd4c62669655c8090bf16a8cd1 Mon Sep 17 00:00:00 2001
From: ttpl-rt-217 <shreyas_s@techjoomla.com>
Date: Wed, 25 Sep 2024 18:07:53 +0530
Subject: [PATCH 1/3] Task #PS-1656 : UI improvements

---
 src/components/CohortSelectionSection.tsx | 10 +++++++---
 src/components/SessionCard.tsx            | 21 ++++++++++++++++++---
 src/pages/dashboard.tsx                   |  9 ++++++---
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/components/CohortSelectionSection.tsx b/src/components/CohortSelectionSection.tsx
index 70e69215..92778f86 100644
--- a/src/components/CohortSelectionSection.tsx
+++ b/src/components/CohortSelectionSection.tsx
@@ -390,7 +390,7 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
                               width: '100%',
                               marginBottom: '0rem',
                               '@media (max-width: 700px)': {
-                                width: '50%',
+                                width: isAttendanceOverview ? '100%' : '50%',
                               },
                             }}
                             MenuProps={{
@@ -486,10 +486,14 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
                                     marginBottom: '0rem',
                                     marginRight: '10px',
                                     '@media (max-width: 902px)': {
-                                      width: '60%',
+                                      width: isAttendanceOverview
+                                        ? '100%'
+                                        : '60%',
                                     },
                                     '@media (max-width: 702px)': {
-                                      width: '50%',
+                                      width: isAttendanceOverview
+                                        ? '100%'
+                                        : '50%',
                                     },
                                   }
                             }
diff --git a/src/components/SessionCard.tsx b/src/components/SessionCard.tsx
index b858542e..de8baf06 100644
--- a/src/components/SessionCard.tsx
+++ b/src/components/SessionCard.tsx
@@ -15,6 +15,7 @@ import CheckCircleTwoToneIcon from '@mui/icons-material/CheckCircleTwoTone';
 import SensorsTwoToneIcon from '@mui/icons-material/SensorsTwoTone';
 import CircleTwoToneIcon from '@mui/icons-material/CircleTwoTone';
 import { EventStatus } from '@/utils/app.constant';
+import { usePathname } from 'next/navigation';
 const SessionsCard: React.FC<SessionsCardProps> = ({
   data,
   showCenterName = false,
@@ -28,6 +29,7 @@ const SessionsCard: React.FC<SessionsCardProps> = ({
 }) => {
   const theme = useTheme<any>();
   const { t } = useTranslation();
+  const pathname = usePathname();
   const [open, setOpen] = React.useState(false);
   const [snackbarOpen, setSnackbarOpen] = React.useState(false);
   const [eventDeleted, setEventDeleted] = React.useState(false);
@@ -155,12 +157,14 @@ const SessionsCard: React.FC<SessionsCardProps> = ({
   const subject = data?.metadata?.subject;
   const sessionTitle = data?.shortDescription;
 
+  const center = pathname.includes('/centers');
+
   return (
     <Box
       sx={{
         border: `1px solid ${theme.palette.warning['A100']}`,
         borderRadius: '8px',
-        // marginBottom: '38px',
+        marginBottom: center ? '38px' : 'unset',
       }}
     >
       <Box
@@ -192,7 +196,11 @@ const SessionsCard: React.FC<SessionsCardProps> = ({
             textAlign={'left'}
             fontSize={'14px'}
             display={'flex'}
-            alignItems={'center'}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              marginTop: '4px',
+            }}
             gap={'4px'}
             className="one-line-text"
           >
@@ -203,7 +211,12 @@ const SessionsCard: React.FC<SessionsCardProps> = ({
             )}
             {startTime} - {endTime}
           </Typography>
-          <Typography fontWeight={'400'} textAlign={'left'} fontSize={'14px'}>
+          <Typography
+            className="one-line-text"
+            fontWeight={'400'}
+            textAlign={'left'}
+            fontSize={'14px'}
+          >
             {showCenterName ? data?.location : data?.metadata?.teacherName}
           </Typography>
         </Box>
@@ -220,6 +233,8 @@ const SessionsCard: React.FC<SessionsCardProps> = ({
           display: 'flex',
           justifyContent: 'space-between',
           gap: '30px',
+          minHeight: '50px',
+          width: '100%',
         }}
         onClick={handleCopyUrl}
       >
diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
index 344b9ea3..e1576b1b 100644
--- a/src/pages/dashboard.tsx
+++ b/src/pages/dashboard.tsx
@@ -1328,7 +1328,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
                 <Box mt={2} px="18px">
                   <Grid container spacing={2}>
                     {sessions?.map((item) => (
-                      <Grid xs={12} sm={6} md={6} key={item.id} item>
+                      <Grid xs={12} sm={6} md={4} key={item.id} item>
                         <SessionCard
                           data={item}
                           showCenterName={true}
@@ -1376,7 +1376,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
                   <Box sx={{ mt: 1.5, mb: 2 }}>
                     <Grid container spacing={2}>
                       {extraSessions?.map((item) => (
-                        <Grid xs={12} sm={6} md={6} key={item.id} item>
+                        <Grid xs={12} sm={6} md={4} key={item.id} item>
                           <SessionCard
                             data={item}
                             showCenterName={true}
@@ -1403,7 +1403,10 @@ const Dashboard: React.FC<DashboardProps> = () => {
                   {extraSessions && extraSessions?.length === 0 && (
                     <Box
                       className="fs-12 fw-400 italic"
-                      sx={{ color: theme.palette.warning['300'] }}
+                      sx={{
+                        color: theme.palette.warning['300'],
+                        marginBottom: '12px',
+                      }}
                     >
                       {t('COMMON.NO_SESSIONS_SCHEDULED')}
                     </Box>

From 386c5e5e4be3fc26491e2effd5c10f6dcbf59dc8 Mon Sep 17 00:00:00 2001
From: ttpl-rt-217 <shreyas_s@techjoomla.com>
Date: Wed, 25 Sep 2024 18:16:57 +0530
Subject: [PATCH 2/3] Task #PS-1656 : UI improvements

---
 src/components/SessionCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SessionCard.tsx b/src/components/SessionCard.tsx
index e5cd6b86..82d839bb 100644
--- a/src/components/SessionCard.tsx
+++ b/src/components/SessionCard.tsx
@@ -163,8 +163,8 @@ const SessionsCard: React.FC<SessionsCardProps> = ({
     <Box
       sx={{
         border: `1px solid ${theme.palette.warning['A100']}`,
-        borderRadius: '8px',
         marginBottom: center ? '38px' : 'unset',
+        borderRadius: '8px',
       }}
     >
       <Box

From ad140bdc64e6a3f40615c99ebc653638780d2e50 Mon Sep 17 00:00:00 2001
From: ttpl-rt-217 <shreyas_s@techjoomla.com>
Date: Wed, 25 Sep 2024 18:22:52 +0530
Subject: [PATCH 3/3] Task #PS-1656 : UI improvements

---
 src/components/SessionCard.tsx         | 5 -----
 src/pages/centers/[cohortId]/index.tsx | 2 +-
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/SessionCard.tsx b/src/components/SessionCard.tsx
index 82d839bb..b6d59c6e 100644
--- a/src/components/SessionCard.tsx
+++ b/src/components/SessionCard.tsx
@@ -15,7 +15,6 @@ import CheckCircleTwoToneIcon from '@mui/icons-material/CheckCircleTwoTone';
 import SensorsTwoToneIcon from '@mui/icons-material/SensorsTwoTone';
 import CircleTwoToneIcon from '@mui/icons-material/CircleTwoTone';
 import { EventStatus } from '@/utils/app.constant';
-import { usePathname } from 'next/navigation';
 const SessionsCard: React.FC<SessionsCardProps> = ({
   data,
   showCenterName = false,
@@ -29,7 +28,6 @@ const SessionsCard: React.FC<SessionsCardProps> = ({
 }) => {
   const theme = useTheme<any>();
   const { t } = useTranslation();
-  const pathname = usePathname();
   const [open, setOpen] = React.useState(false);
   const [snackbarOpen, setSnackbarOpen] = React.useState(false);
   const [eventDeleted, setEventDeleted] = React.useState(false);
@@ -157,13 +155,10 @@ const SessionsCard: React.FC<SessionsCardProps> = ({
   const subject = data?.metadata?.subject;
   const sessionTitle = data?.shortDescription;
 
-  const center = pathname.includes('/centers');
-
   return (
     <Box
       sx={{
         border: `1px solid ${theme.palette.warning['A100']}`,
-        marginBottom: center ? '38px' : 'unset',
         borderRadius: '8px',
       }}
     >
diff --git a/src/pages/centers/[cohortId]/index.tsx b/src/pages/centers/[cohortId]/index.tsx
index 29031775..38507f36 100644
--- a/src/pages/centers/[cohortId]/index.tsx
+++ b/src/pages/centers/[cohortId]/index.tsx
@@ -641,7 +641,7 @@ const CohortPage = () => {
                   className="mySwiper"
                 >
                   {sortedSessions?.map((item: any, index: any) => (
-                    <SwiperSlide key={index}>
+                    <SwiperSlide style={{ paddingBottom: '38px' }} key={index}>
                       <SessionCard
                         data={item}
                         isEventDeleted={handleEventDeleted}