added documentation to TopicTagProps and TimetableHeader components and updated resizeAndPositionTimetableHeaders documentation to mention the resizing of the timetable-headers component

Author: Archer-Key

client/src/components/timetable.tsx

@@ -117,7 +117,12 @@ function resizeAndPositionTimetableForeground() {
 
 /*
 Sync the left position of the TimetableHeaders in the foreground with their
-respective columns, set the top position to 0px.
+respective columns, set the top position to 0px, ensures Time-header remains
+in the top left corner. 
+
+Also resizes the timetable-headers container to the width of timetable-content 
+element and height of Time-header to prevent underlying elements from showing
+through the gaps between headers.
 */
 function resizeAndPositionTimetableHeaders() {
   const timetable_headers = document.getElementById("timetable-headers");

client/src/components/timetable_column.tsx

@@ -11,7 +11,7 @@ interface TimetableColumnProps {
 }
 
 /*
-A column of the timetable containing TimetableSlots.
+A column of the timetable containing 25 TimetableSlots (header + one each hour).
 */
 export default function TimetableColumn({ day }: TimetableColumnProps) {
   const now = new Date(Date.now());
@@ -67,7 +67,8 @@ export default function TimetableColumn({ day }: TimetableColumnProps) {
 
 /*
 A TimetableColumn for the time labels. Header has text "Time", all other slots
-have text "HH:MM" for time time they represent. Already has sticky set.
+have text "HH:MM" for time time they represent. Each slot has its id set to its
+time prop value.
 */
 export function TimetableTimeLabelsColumn() {
   return (

client/src/components/timetable_slot.tsx

@@ -67,6 +67,11 @@ function TimetableSlot({
 
 export default TimetableSlot;
 
+/*
+A slightly modified TimetableSlot designed to be displayed in the foreground
+with the styling of a TimetableSlot with header=true.
+Has id set to its label + "-header" suffix.
+*/
 export function TimetableHeader({ label }: TimetableSlotProps) {
   return (
     <div

client/src/components/topic_tag.tsx

@@ -1,3 +1,8 @@
+/*
+@prop name: The String to display within the topic tag.
+@prop color_hex: The integer representing the hex code of the color to display
+within the circle in the tag.
+*/
 interface TopicTagProps {
   name: string;
   color_hex: number;