Skip to content

Commit

Permalink
Issue #PS-1344 fix: Center Sessions UI Implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@shreyas143shinde
shreyas143shinde committed Jul 10, 2024
1 parent 8e46308 commit 7395bb6
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 118 deletions.
12 changes: 6 additions & 6 deletions public/locales/en/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,12 +95,12 @@
"OBSERVATIONS_FORMS": "Observations and Forms",
"OTHER_REASON": "Other Reason",
"OTHER_REASON_PLACEHOLDER": "Enter Other Reason",
"CENTER_SESSIONS":"Center Sessions",
"SCHEDULE_NEW":"Schedule New",
"UPCOMING_EXTRA_SESSION":"Upcoming Extra Sessions",
"NO_SESSIONS_SCHEDULED" :" No sessions scheduled",
"TO_BE_TAUGHT" :"What is going to be taught:",
"SELECT_TOPIC":" Select Topic, Sub-topic"
"CENTER_SESSIONS": "Center Sessions",
"SCHEDULE_NEW": "Schedule New",
"UPCOMING_EXTRA_SESSION": "Upcoming Extra Sessions",
"NO_SESSIONS_SCHEDULED": "No sessions scheduled",
"TO_BE_TAUGHT": "What is going to be taught:",
"SELECT_TOPIC": "Select Topic, Sub-topic"
},
"LOGIN_PAGE": {
"USERNAME": "Username",
Expand Down
58 changes: 28 additions & 30 deletions src/components/SessionCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,43 +8,41 @@ import { useTheme } from '@mui/material/styles';
const SessionsCard: React.FC<SessionsCardProps> = ({ data, children }) => {
const theme = useTheme<any>();
return (
<>
<Box
sx={{
border: `1px solid ${theme.palette.warning['A100']}`,
borderRadius: '8px',
marginBottom: '16px',
}}
>
<Box
sx={{
border: `1px solid ${theme.palette.warning['A100']}`,
borderRadius: '8px',
marginBottom: '16px',
display: 'flex',
justifyContent: 'space-between',
padding: '8px 16px',
}}
>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
padding: '8px 16px',
}}
>
<Box>
<Typography
color={theme.palette.warning['300']}
fontWeight={'400'}
textAlign={'left'}
fontSize={'16px'}
>
{data?.subject}
</Typography>
<Box>
<Typography
color={theme.palette.warning['300']}
fontWeight={'400'}
textAlign={'left'}
fontSize={'16px'}
>
{data?.subject}
</Typography>

<Typography fontWeight={'400'} textAlign={'left'} fontSize={'14px'}>
{data?.time}
</Typography>
<Typography fontWeight={'400'} textAlign={'left'} fontSize={'14px'}>
{data?.teacherName}
</Typography>
</Box>
<EditOutlined />
<Typography fontWeight={'400'} textAlign={'left'} fontSize={'14px'}>
{data?.time}
</Typography>
<Typography fontWeight={'400'} textAlign={'left'} fontSize={'14px'}>
{data?.teacherName}
</Typography>
</Box>
<Box>{children}</Box>
<EditOutlined />
</Box>
</>
<Box>{children}</Box>
</Box>
);
};

Expand Down
150 changes: 68 additions & 82 deletions src/components/SessionCardFooter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,93 +17,79 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
const theme = useTheme();
const { t } = useTranslation();

return (
<>
{!item?.topic && (
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
background: theme.palette.background.default,
padding: '8px 16px',
borderRadius: '8px',
}}
return item?.topic ? (
<Box
sx={{
background: theme.palette.background.default,
padding: '4px 16px',
borderRadius: '8px',
}}
>
<Accordion
defaultExpanded
sx={{
boxShadow: 'none',
border: 'none',
background: 'none',
}}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1-header"
className="accordion-summary"
sx={{ px: 0, m: 0 }}
>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<PriorityHighIcon sx={{ color: theme.palette.error.main }} />
<Box
fontSize={'14px'}
fontWeight={500}
color={theme.palette.secondary.main}
ml={1}
>
{t('COMMON.SELECT_TOPIC')}
</Box>
<Typography fontWeight="500" fontSize="14px" className="text-7C">
{t('COMMON.TO_BE_TAUGHT')}
</Typography>
</AccordionSummary>
<AccordionDetails sx={{ padding: '0px' }}>
<Box sx={{ display: 'flex', gap: '10px' }}>
<MenuBookIcon />
<Typography color={theme.palette.secondary.main} variant="h5">
{item?.topic}
</Typography>
</Box>
<ArrowForwardIcon />
</Box>
)}
{item?.topic && (
<Box
sx={{
display: 'flex',
gap: '10px',
marginTop: '5px',
marginLeft: '10px',
}}
>
<SubdirectoryArrowRightIcon />
<Typography color={theme.palette.secondary.main} variant="h5">
{item?.subtopic}
</Typography>
</Box>
</AccordionDetails>
</Accordion>
</Box>
) : (
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
background: theme.palette.background.default,
padding: '8px 16px',
borderRadius: '8px',
}}
>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<PriorityHighIcon sx={{ color: theme.palette.error.main }} />
<Box
sx={{
background: theme.palette.background.default,
padding: '4px 16px',
borderRadius: '8px',
}}
fontSize={'14px'}
fontWeight={500}
color={theme.palette.secondary.main}
ml={1}
>
<Box>
<Accordion
defaultExpanded
sx={{
boxShadow: 'none',
border: 'none',
background: 'none',
}}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1-header"
className="accordion-summary"
sx={{
px: 0,
m: 0,
}}
>
<Typography
fontWeight="500"
fontSize="14px"
className="text-7C"
>
{t('COMMON.TO_BE_TAUGHT')}
</Typography>
</AccordionSummary>
<AccordionDetails sx={{ padding: '0px' }}>
<Box sx={{ display: 'flex', gap: '10px' }}>
<MenuBookIcon />
<Typography color={theme.palette.secondary.main} variant="h5">
{item?.topic}
</Typography>
</Box>
<Box
sx={{
display: 'flex',
gap: '10px',
marginTop: '5px',
marginLeft: '10px',
}}
>
<SubdirectoryArrowRightIcon />
<Typography color={theme.palette.secondary.main} variant="h5">
{item?.subtopic}
</Typography>
</Box>
</AccordionDetails>
</Accordion>
</Box>
{t('COMMON.SELECT_TOPIC')}
</Box>
)}
</>
</Box>
<ArrowForwardIcon />
</Box>
);
};

Expand Down

0 comments on commit 7395bb6

Please sign in to comment.