Issue #PS-1333 fix: Select Topic Sub-topic modal UI Implementation

tekdi · Jul 19, 2024 · f39386e · f39386e
1 parent 849b742
commit f39386e
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 107 deletions.
diff --git a/src/assets/images/decorationBg.png b/src/assets/images/decorationBg.png
diff --git a/src/components/PlannedSession.tsx b/src/components/PlannedSession.tsx
@@ -20,8 +20,6 @@ import dayjs, { Dayjs } from 'dayjs';
 
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import AddIcon from '@mui/icons-material/Add';
-import CenterSessionModal from './CenterSessionModal';
-import DeleteCenterModal from './center/DeleteCenterModal';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
@@ -35,10 +33,6 @@ type mode = (typeof sessionMode)[keyof typeof sessionMode];
 
 const PlannedSession = () => {
  const [mode, setMode] = useState<mode>(sessionMode.OFFLINE);
- const [open, setOpen] = React.useState(false);
-
- const handleClose = () => setOpen(false);
- const handleOpen = () => setOpen(true);
 
  const handleSessionModeChange = (event: ChangeEvent<HTMLInputElement>) => {
  setMode(event.target.value as mode);
@@ -248,7 +242,6 @@ const PlannedSession = () => {
  color: theme?.palette?.secondary.main,
  fontWeight: '500',
  }}
- onClick={handleOpen}
  >
  {t('CENTER_SESSION.REMOVE_THIS_SESSION')}
  </Box>
@@ -257,20 +250,6 @@ const PlannedSession = () => {
  />
  </Box>
 
- <CenterSessionModal
- open={open}
- handleClose={handleClose}
- title={'Delete Session'}
- date={'25 May, 2024'}
- >
- <DeleteCenterModal
- open={false}
- handleClose={function (): void {
- throw new Error('Function not implemented.');
- }}
- />
- </CenterSessionModal>
-
  <Box sx={{ mt: 2 }}>
  <Divider />
  </Box>

diff --git a/src/components/SessionCard.tsx b/src/components/SessionCard.tsx
@@ -1,12 +1,17 @@
 import { Box, Typography } from '@mui/material';
 import { Session, SessionsCardProps } from '@/utils/Interfaces';
 
+import CenterSessionModal from './CenterSessionModal';
 import EditOutlined from '@mui/icons-material/EditOutlined';
+import PlannedSession from './PlannedSession';
 import React from 'react';
 import { useTheme } from '@mui/material/styles';
 
 const SessionsCard: React.FC<SessionsCardProps> = ({ data, children }) => {
  const theme = useTheme<any>();
+ const [open, setOpen] = React.useState(false);
+ const handleOpen = () => setOpen(true);
+ const handleClose = () => setOpen(false);
  return (
  <Box
  sx={{
@@ -39,8 +44,17 @@ const SessionsCard: React.FC<SessionsCardProps> = ({ data, children }) => {
  {data?.teacherName}
  </Typography>
  </Box>
- <EditOutlined />
+ <EditOutlined onClick={handleOpen} sx={{ cursor: 'pointer' }} />
  </Box>
+ <CenterSessionModal
+ open={open}
+ handleClose={handleClose}
+ title={'Home Science'}
+ primary={'Schedule'}
+ >
+ <PlannedSession />
+ </CenterSessionModal>
+
  <Box>{children}</Box>
  </Box>
  );

diff --git a/src/components/SessionCardFooter.tsx b/src/components/SessionCardFooter.tsx
@@ -17,7 +17,7 @@ import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 
 const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
- const theme = useTheme();
+ const theme = useTheme<any>();
  const { t } = useTranslation();
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
@@ -29,7 +29,7 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
  <Box
  sx={{
  background: theme.palette.background.default,
- padding: '4px 16px',
+ padding: '1px 16px',
  borderRadius: '8px',
  }}
  >
@@ -42,11 +42,21 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
  }}
  >
  <AccordionSummary
- expandIcon={<ExpandMoreIcon />}
+ expandIcon={
+ <ExpandMoreIcon
+ sx={{ color: theme?.palette?.warning['300'] }}
+ />
+ }
  aria-controls="panel1-content"
  id="panel1-header"
  className="accordion-summary"
- sx={{ px: 0, m: 0 }}
+ sx={{
+ px: 0,
+ m: 0,
+ '&.Mui-expanded': {
+ minHeight: '35px',
+ },
+ }}
  >
  <Typography fontWeight="500" fontSize="14px" className="text-7C">
  {t('COMMON.TO_BE_TAUGHT')}
@@ -57,7 +67,9 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
  onClick={handleOpen}
  sx={{ display: 'flex', gap: '10px', cursor: 'pointer' }}
  >
- <MenuBookIcon sx={{ color: theme.palette.secondary.main }} />
+ <MenuBookIcon
+ sx={{ color: theme.palette.secondary.main, fontSize: '18px' }}
+ />
  <Typography color={theme.palette.secondary.main} variant="h5">
  {item?.topic}
  </Typography>
@@ -72,7 +84,14 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
  }}
  onClick={handleOpen}
  >
- <SubdirectoryArrowRightIcon />
+ <SubdirectoryArrowRightIcon
+ sx={{
+ color: theme.palette.secondary.main,
+ fontSize: '18px',
+ marginTop: '-4px',
+ marginLeft: '-5px',
+ }}
+ />
  <Typography color={theme.palette.secondary.main} variant="h5">
  {item?.subtopic}
  </Typography>
@@ -89,11 +108,14 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
  padding: '8px 16px',
  borderRadius: '8px',
  cursor: 'pointer',
+ alignItems: 'center',
  }}
  onClick={handleOpen}
  >
  <Box sx={{ display: 'flex', alignItems: 'center' }}>
- <PriorityHighIcon sx={{ color: theme.palette.error.main }} />
+ <PriorityHighIcon
+ sx={{ color: theme.palette.error.main, fontSize: '18px' }}
+ />
  <Box
  fontSize={'14px'}
  fontWeight={500}
@@ -103,7 +125,9 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
  {t('COMMON.SELECT_TOPIC')}
  </Box>
  </Box>
- <ArrowForwardIcon sx={{ color: theme.palette.secondary.main }} />
+ <ArrowForwardIcon
+ sx={{ color: theme.palette.secondary.main, fontSize: '18px' }}
+ />
  </Box>
  )}
  <CenterSessionModal

diff --git a/src/components/TopicDetails.tsx b/src/components/TopicDetails.tsx
@@ -80,90 +80,95 @@ const TopicDetails = () => {
  </Box>
  </Box>
 
- <Accordion
- // defaultExpanded
- sx={{
- boxShadow: 'none !important',
- border: 'none !important',
- mt: 1.5,
- }}
- >
- <AccordionSummary
- expandIcon={
- <ArrowDropDownIcon sx={{ color: theme?.palette?.warning['300'] }} />
- }
- aria-controls="panel1-content"
- id="panel1-header"
- className="accordion-summary"
+ <Box sx={{ mb: 1.5 }}>
+ <Accordion
+ // defaultExpanded
  sx={{
- m: 0,
- background: theme?.palette?.background.paper,
- px: '16px',
- height: '10px !important',
- '&.Mui-expanded': {
- minHeight: '48px',
- },
+ boxShadow: 'none !important',
+ border: 'none !important',
+ mt: 1.5,
+ background: theme?.palette?.action?.selected,
  }}
  >
- <Typography
- fontWeight="500"
- fontSize="14px"
- sx={{ color: theme?.palette?.warning['300'] }}
+ <AccordionSummary
+ expandIcon={
+ <ArrowDropDownIcon
+ sx={{ color: theme?.palette?.warning['300'] }}
+ />
+ }
+ aria-controls="panel1-content"
+ id="panel1-header"
+ className="accordion-summary"
+ sx={{
+ m: 0,
+ background: theme?.palette?.action?.selected,
+ px: '16px',
+ height: '10px !important',
+ '&.Mui-expanded': {
+ minHeight: '48px',
+ },
+ }}
  >
- {t('CENTER_SESSION.FACILITATORS')}
- </Typography>
- </AccordionSummary>
- <AccordionDetails
- sx={{ padding: '0px', background: theme?.palette?.warning['A400'] }}
- >
- <Grid container spacing={2} sx={{ px: '16px !important' }}>
- <Grid item xs={6} sx={{ mt: 2 }}>
- <Box className="facilitator-bg">
- <Box
- sx={{
- fontSize: '16px',
- fontWeight: '500',
- color: theme?.palette?.warning['A400'],
- }}
- >
- {t('CENTER_SESSION.TITLE')}
- </Box>
- <Box
- sx={{
- fontSize: '11px',
- fontWeight: '500',
- color: theme?.palette?.warning['A400'],
- }}
- >
- Video {/* will came from API */}
- </Box>
- </Box>
- </Grid>
- <Grid item xs={6} sx={{ mt: 2 }}>
- <Box className="facilitator-bg">
- <Box
- sx={{
- fontSize: '16px',
- fontWeight: '500',
- color: theme?.palette?.warning['A400'],
- }}
- >
- {t('CENTER_SESSION.TITLE')}
+ <Typography
+ fontWeight="500"
+ fontSize="14px"
+ sx={{ color: theme?.palette?.warning['300'] }}
+ >
+ {t('CENTER_SESSION.FACILITATORS')}
+ </Typography>
+ </AccordionSummary>
+ <AccordionDetails
+ sx={{ padding: '0px', background: theme?.palette?.warning['A400'] }}
+ >
+ <Grid container spacing={2} sx={{ px: '16px !important' }}>
+ <Grid item xs={6} sx={{ mt: 2 }}>
+ <Box className="facilitator-bg">
+ <Box
+ sx={{
+ fontSize: '16px',
+ fontWeight: '500',
+ color: theme?.palette?.warning['A400'],
+ }}
+ >
+ {t('CENTER_SESSION.TITLE')}
+ </Box>
+ <Box
+ sx={{
+ fontSize: '11px',
+ fontWeight: '500',
+ color: theme?.palette?.warning['A400'],
+ }}
+ >
+ Video {/* will came from API */}
+ </Box>
  </Box>
- <Box
- sx={{
- fontSize: '11px',
- fontWeight: '500',
- color: theme?.palette?.warning['A400'],
- }}
- >
- Game {/* will came from API */}
+ </Grid>
+ <Grid item xs={6} sx={{ mt: 2 }}>
+ <Box className="facilitator-bg">
+ <Box
+ sx={{
+ fontSize: '16px',
+ fontWeight: '500',
+ color: theme?.palette?.warning['A400'],
+ }}
+ >
+ {t('CENTER_SESSION.TITLE')}
+ </Box>
+ <Box
+ sx={{
+ fontSize: '11px',
+ fontWeight: '500',
+ color: theme?.palette?.warning['A400'],
+ }}
+ >
+ Game {/* will came from API */}
+ </Box>
  </Box>
- </Box>
+ </Grid>
  </Grid>
- </Grid>
- </AccordionDetails>
- </Accordion>
+ </AccordionDetails>
+ </Accordion>
+ </Box>
  </>
  );
 };