Merge branch 'hackathon' of https://github.com/UT-Developers/UT-Registration-Plus into hackathon

src/views/components/common/CalendarGrid/CalendarGrid.module.scss

@@ -22,9 +22,10 @@
 }
 
 .calendar {
-    // display: grid;
-    // grid-template-columns: auto repeat(5, 1fr);
+    display: flex;
+    flex-direction: column;
     gap: 10px;
+    position: relative; // Ensuring that child elements can be positioned in relation to this.
 }
 
 .day {
@@ -89,3 +90,38 @@
         line-height: normal;
     }
 }
+
+.buttonContainer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+    padding: 10px;
+    margin-top: auto;
+}
+
+.calendarButton {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 6px 6px;
+    border: none;
+    background-color: transparent;
+    color: #333;
+    cursor: pointer;
+    
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.1);
+    }
+}
+
+.buttonIcon {
+    height: 24px;
+    fill: currentColor;
+}
+
+.divider {
+    height: 30px;
+    width: 1px;
+    background-color: grey;
+}

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

@@ -4,6 +4,8 @@ import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
 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);
@@ -69,7 +71,19 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
                     <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 */}
+                <button className={styles.calendarButton}>
+                    <img src={calIcon} className={styles.buttonIcon} alt="CAL" />
+                    Save as .CAL
+                </button>
+                <div className={styles.divider}></div> {/* Second divider */}
+                <button className={styles.calendarButton}>
+                    <img src={pngIcon} className={styles.buttonIcon} alt="PNG" />
+                    Save as .PNG
+                </button>
+            </div>
         </div>
     );
 }