From cec9ea97c1a75118aa42e49aeb7ed633727d531f Mon Sep 17 00:00:00 2001 From: TTPL-RT-52 Date: Thu, 23 May 2024 11:41:03 +0530 Subject: [PATCH 1/3] Issue PS-394 fix:Polish UI of sticky header and change layout from component to another --- src/components/AttendanceStatus.tsx | 24 ++++++++--- src/pages/attendance-history.tsx | 64 +++++++++++++---------------- 2 files changed, 48 insertions(+), 40 deletions(-) diff --git a/src/components/AttendanceStatus.tsx b/src/components/AttendanceStatus.tsx index 49a0f817..af353240 100644 --- a/src/components/AttendanceStatus.tsx +++ b/src/components/AttendanceStatus.tsx @@ -1,12 +1,14 @@ import { Box, Button, Grid, Typography } from '@mui/material'; -import { CreateOutlined } from '@mui/icons-material'; -import { useTranslation } from 'next-i18next'; import { CircularProgressbar, buildStyles } from 'react-circular-progressbar'; -import { shortDateFormat } from '@/utils/Helper'; -import { useTheme } from '@mui/material/styles'; +import { formatToShowDateMonth, shortDateFormat } from '@/utils/Helper'; + +import { CreateOutlined } from '@mui/icons-material'; import useDeterminePathColor from '../hooks/useDeterminePathColor'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'next-i18next'; interface AttendanceStatusProps { + date: Date; formattedAttendanceData: FormattedAttendanceData; onDateSelection: Date; onUpdate?: () => void; @@ -23,6 +25,7 @@ type FormattedAttendanceData = { }; function AttendanceStatus({ + date, formattedAttendanceData, onDateSelection, onUpdate, @@ -56,7 +59,18 @@ function AttendanceStatus({ justifyContent="space-between" alignItems={'center'} > - + + + + {formatToShowDateMonth(date)} + + {attendanceStatus !== 'notMarked' && attendanceStatus !== 'futureDate' && ( diff --git a/src/pages/attendance-history.tsx b/src/pages/attendance-history.tsx index 59bc09b6..165558e3 100644 --- a/src/pages/attendance-history.tsx +++ b/src/pages/attendance-history.tsx @@ -1,4 +1,9 @@ -import React, { useEffect, useState } from 'react'; +import { + AttendanceParams, + AttendancePercentageProps, + AttendanceStatusListProps, + cohort, +} from '../utils/Interfaces'; import { Box, Button, @@ -14,39 +19,35 @@ import { Stack, Typography, } from '@mui/material'; -import SearchIcon from '@mui/icons-material/Search'; -import ClearIcon from '@mui/icons-material/Clear'; -import ArrowDropDownSharpIcon from '@mui/icons-material/ArrowDropDownSharp'; -import Header from '../components/Header'; -import { useTheme } from '@mui/material/styles'; -import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; +import React, { useEffect, useState } from 'react'; import { attendanceInPercentageStatusList, attendanceStatusList, - // markAttendance, } from '../services/AttendanceService'; -import { - AttendancePercentageProps, - AttendanceParams, - cohort, - AttendanceStatusListProps, -} from '../utils/Interfaces'; -import MarkAttendance from '../components/MarkAttendance'; -import { useTranslation } from 'next-i18next'; -import Loader from '../components/Loader'; -import MonthCalender from '@/components/MonthCalender'; -import { useRouter } from 'next/router'; import { debounce, - getTodayDate, formatToShowDateMonth, + getTodayDate, shortDateFormat, } from '@/utils/Helper'; -import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; -import { cohortList } from '@/services/CohortServices'; -import SortingModal from '../components/SortingModal'; + +import ArrowDropDownSharpIcon from '@mui/icons-material/ArrowDropDownSharp'; +import AttendanceStatus from '@/components/AttendanceStatus'; import AttendanceStatusListView from '@/components/AttendanceStatusListView'; +import ClearIcon from '@mui/icons-material/Clear'; +import Header from '../components/Header'; +import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; +import Loader from '../components/Loader'; +import MarkAttendance from '../components/MarkAttendance'; +import MonthCalender from '@/components/MonthCalender'; +import SearchIcon from '@mui/icons-material/Search'; +import SortingModal from '../components/SortingModal'; +import { cohortList } from '@/services/CohortServices'; import { getMyCohortMemberList } from '@/services/MyClassDetailsService'; +import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; +import { useRouter } from 'next/router'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'next-i18next'; interface user { userId: string; @@ -54,7 +55,6 @@ interface user { attendance?: string; key?: string; } -import AttendanceStatus from '@/components/AttendaceStatus'; const UserAttendanceHistory = () => { const theme = useTheme(); @@ -589,21 +589,15 @@ const UserAttendanceHistory = () => { top: 0, zIndex: 1000, backgroundColor: 'white', + // boxShadow: '0px 1px 3px 0px #0000004D', + boxShadow: '0px 4px 8px 3px #00000026', + border: '1px solid #DED8E1', }} + py={'5px'} > - - - {formatToShowDateMonth(selectedDate)} - - Date: Thu, 23 May 2024 15:05:54 +0530 Subject: [PATCH 2/3] Issue PS-394 fix:modal UI fixes --- src/pages/dashboard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index d3f02137..44915e7f 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -655,7 +655,7 @@ const Dashboard: React.FC = () => { timeout: 500, }, }} - className="shreyas" + className="modal_mark" > Date: Thu, 23 May 2024 16:36:52 +0530 Subject: [PATCH 3/3] Issue PS-394 fix:modal UI fixes --- src/components/MarkBulkAttendance.tsx | 2 +- src/styles/globals.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MarkBulkAttendance.tsx b/src/components/MarkBulkAttendance.tsx index 5aaa36b1..0fa50b01 100644 --- a/src/components/MarkBulkAttendance.tsx +++ b/src/components/MarkBulkAttendance.tsx @@ -278,7 +278,7 @@ const MarkBulkAttendace: React.FC = ({ timeout: 500, }, }} - className="shreyas" + className="modal_mark" >