Merge pull request #293 from shreyas1434shinde/boardEnrollment

Task #PS-1656 : UI improvements
tekdi · Sep 25, 2024 · dbb4d45 · dbb4d45
2 parents 312332a + 82533ad
commit dbb4d45
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 20 deletions.
diff --git a/src/components/SessionCard.tsx b/src/components/SessionCard.tsx
@@ -160,7 +160,7 @@ const SessionsCard: React.FC<SessionsCardProps> = ({
  sx={{
  border: `1px solid ${theme.palette.warning['A100']}`,
  borderRadius: '8px',
- marginBottom: '38px',
+ // marginBottom: '38px',
  }}
  >
  <Box
@@ -178,6 +178,7 @@ const SessionsCard: React.FC<SessionsCardProps> = ({
  fontWeight={'400'}
  textAlign={'left'}
  fontSize={'16px'}
+ className="one-line-text"
  >
  {subject && sessionTitle
  ? `${toPascalCase(subject)} - ${sessionTitle}`
@@ -193,6 +194,7 @@ const SessionsCard: React.FC<SessionsCardProps> = ({
  display={'flex'}
  alignItems={'center'}
  gap={'4px'}
+ className="one-line-text"
  >
  {data?.isRecurring === false && (
  <>
@@ -232,6 +234,7 @@ const SessionsCard: React.FC<SessionsCardProps> = ({
  width: '100%',
  cursor: 'pointer',
  }}
+ className="one-line-text"
  >
  {data?.meetingDetails?.url}
  </Box>

diff --git a/src/pages/centers/[cohortId]/events/[date]/index.tsx b/src/pages/centers/[cohortId]/events/[date]/index.tsx
@@ -12,7 +12,7 @@ import {
 } from '@/utils/Helper';
 import withAccessControl from '@/utils/hoc/withAccessControl';
 import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
-import { Box, Typography } from '@mui/material';
+import { Box, Grid, Typography } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { GetStaticPaths } from 'next';
 import { useTranslation } from 'next-i18next';
@@ -22,7 +22,7 @@ import React, { useEffect, useState } from 'react';
 import { accessControl } from '../../../../../../app.config';
 import { Session } from '../../../../../utils/Interfaces';
 
-const EventMonthView:React.FC<any> = () => {
+const EventMonthView: React.FC<any> = () => {
  const theme = useTheme<any>();
  const { t } = useTranslation();
  const router = useRouter();
@@ -190,12 +190,16 @@ const EventMonthView:React.FC<any> = () => {
  {t('CENTER_SESSION.PLANNED_SESSIONS')}
  </Typography>
 
- <Box mt={3} px="18px">
- {sessions?.map((item) => (
- <SessionsCard data={item} key={item.id}>
- <SessionCardFooter item={item} />
- </SessionsCard>
- ))}
+ <Box mt={1.5} px="10px">
+ <Grid container spacing={2}>
+ {sessions?.map((item) => (
+ <Grid xs={12} sm={6} md={6} key={item.id} item>
+ <SessionsCard data={item} key={item.id}>
+ <SessionCardFooter item={item} />
+ </SessionsCard>
+ </Grid>
+ ))}
+ </Grid>
  {sessions && sessions?.length === 0 && (
  <Box
  className="fs-12 fw-400 italic"
@@ -209,6 +213,7 @@ const EventMonthView:React.FC<any> = () => {
 
  <Box
  mt={3}
+ mb={3}
  px="14px"
  sx={{
  fontSize: '16px',
@@ -220,12 +225,16 @@ const EventMonthView:React.FC<any> = () => {
  {t('CENTER_SESSION.EXTRA_SESSION')}
  </Typography>
 
- <Box mt={3} px="18px">
- {extraSessions?.map((item) => (
- <SessionsCard data={item} key={item.id}>
- <SessionCardFooter item={item} />
- </SessionsCard>
- ))}
+ <Box mt={1.5} px="10px">
+ <Grid container spacing={2}>
+ {extraSessions?.map((item) => (
+ <Grid xs={12} sm={6} md={6} key={item.id} item>
+ <SessionsCard data={item} key={item.id}>
+ <SessionCardFooter item={item} />
+ </SessionsCard>
+ </Grid>
+ ))}
+ </Grid>
  {extraSessions && extraSessions?.length === 0 && (
  <Box
  className="fs-12 fw-400 italic"

diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
@@ -1040,7 +1040,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
  currentAttendance !== 'futureDate' && (
  <Typography
  sx={{
- color: theme.palette.warning['300'],
+ color: theme.palette.warning['A400'],
  }}
  fontSize={'0.8rem'}
  // variant="h6"
@@ -1325,7 +1325,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
  newWidth={'100%'}
  />
  </Box>
- <Box mt={3} px="18px">
+ <Box mt={2} px="18px">
  <Grid container spacing={2}>
  {sessions?.map((item) => (
  <Grid xs={12} sm={6} md={6} key={item.id} item>
@@ -1373,8 +1373,8 @@ const Dashboard: React.FC<DashboardProps> = () => {
  days: eventDaysLimit,
  })}
  </Box>
- <Box mt={3} px="18px">
- <Grid container spacing={1}>
+ <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>
  <SessionCard

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -671,7 +671,13 @@ main {
  overflow: hidden;
  text-overflow: ellipsis;
 }
-
+.one-line-text {
+ display: -webkit-box;
+ -webkit-line-clamp: 1;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
 .bg-white {
  background-color: var(--mui-palette-warning-A400);
 }