feat: bottom bar for the calendar page (#91)

src/views/components/common/CalendarGrid/CalendarGrid.tsx

@@ -1,12 +1,12 @@
-import React, {useRef} from 'react';
+import React, { useRef } from 'react';
 import html2canvas from 'html2canvas';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
+import calIcon from 'src/assets/icons/cal.svg';
+import pngIcon from 'src/assets/icons/png.svg';
 import CalendarCell from '../CalendarGridCell/CalendarGridCell';
 import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
 import styles from './CalendarGrid.module.scss';
-import calIcon from 'src/assets/icons/cal.svg';
-import pngIcon from 'src/assets/icons/png.svg';
 
 const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
@@ -34,12 +34,12 @@ interface Props {
  * Grid of CalendarGridCell components forming the user's course schedule calendar view
  * @param props
  */
-function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Props> ): JSX.Element {
+function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Props>): JSX.Element {
     const calendarRef = useRef(null); // Create a ref for the calendar grid
 
     const saveAsPNG = () => {
         if (calendarRef.current) {
-            html2canvas(calendarRef.current).then((canvas) => {
+            html2canvas(calendarRef.current).then(canvas => {
                 // Create an a element to trigger download
                 const a = document.createElement('a');
                 a.href = canvas.toDataURL('image/png');
@@ -85,19 +85,22 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
                         gridRow: `${block.calendarGridPoint.startIndex} / ${block.calendarGridPoint.endIndex}`,
                     }}
                 >
-                    <CalendarCourseCell courseDeptAndInstr={block.componentProps.courseDeptAndInstr} 
-                                        status={block.componentProps.status} colors={block.componentProps.colors}/>
+                    <CalendarCourseCell
+                        courseDeptAndInstr={block.componentProps.courseDeptAndInstr}
+                        status={block.componentProps.status}
+                        colors={block.componentProps.colors}
+                    />
                 </div>
-                ))}
+            ))}
             <div className={styles.buttonContainer}>
-                <div className={styles.divider}></div> {/* First divider */}
+                <div className={styles.divider} /> {/* First divider */}
                 <button className={styles.calendarButton}>
-                    <img src={calIcon} className={styles.buttonIcon} alt="CAL" />
+                    <img src={calIcon} className={styles.buttonIcon} alt='CAL' />
                     Save as .CAL
                 </button>
-                <div className={styles.divider}></div> {/* Second divider */}
+                <div className={styles.divider} /> {/* Second divider */}
                 <button onClick={saveAsPNG} className={styles.calendarButton}>
-                    <img src={pngIcon} className={styles.buttonIcon} alt="PNG" />
+                    <img src={pngIcon} className={styles.buttonIcon} alt='PNG' />
                     Save as .PNG
                 </button>
             </div>