15 second disclaimer that users can dismiss regarding course list

src/components/DraggableCards/DragDropCourses.tsx

@@ -6,6 +6,7 @@ import CourseCard from "./CourseCards";
 import DroppableQuarter from "./DroppableQuarter";
 import {DragDropCardProps} from "@/app/utils/interfaces";
 import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "@/components/ui/accordion";
+import React, { useState, useEffect } from "react";
 
 const DragDropCourses: React.FC<DragDropCardProps> = ({
     setSelectedQuarter,
@@ -17,6 +18,17 @@ const DragDropCourses: React.FC<DragDropCardProps> = ({
     onSubmit,
     availableCourses,
 }) => {
+    const [isDisclaimerVisible, setIsDisclaimerVisible] = useState(true); // Initialize the disclaimer state
+
+    useEffect(() => {
+        // Set a timer to hide the disclaimer after 30 seconds
+        const timer = setTimeout(() => {
+            setIsDisclaimerVisible(false);
+        }, 15000); // 15 seconds in milliseconds
+
+        return () => clearTimeout(timer); // Clear the timer if the component unmounts
+    }, []);
+
     const handleDragEnd = (event: DragEndEvent) => {
         const {active, over} = event;
         if (!over || !active.data.current) return;
@@ -53,6 +65,8 @@ const DragDropCourses: React.FC<DragDropCardProps> = ({
         }
     };
 
+
+
     const handleRemoveClass = (
         courseId: string,
         season: string,
@@ -182,6 +196,24 @@ const DragDropCourses: React.FC<DragDropCardProps> = ({
                         </Accordion>
                     );
                 })}
+                 {/* Add Disclaimer at the Bottom */}
+                 {isDisclaimerVisible && (
+                    <div
+                        className="text-gray-600 text-sm py-2 bg-gray-200 fixed bottom-4 left-1/2 transform -translate-x-1/2 w-11/12 max-w-lg flex items-center justify-center px-4 rounded-lg shadow-lg"
+                    >
+                        <button
+                            onClick={() => setIsDisclaimerVisible(false)} // Hide the disclaimer on button click
+                            className="text-gray-500 hover:text-gray-800 focus:outline-none bg-transparent border-none cursor-pointer text-xl font-bold mr-4"
+                            aria-label="Close disclaimer"
+                        >
+                            ✖
+                        </button>
+                        <span>
+                            Disclaimer: Courses listed may not be offered during the selected quarters or may be subjected to change.
+                        </span>
+                    </div>
+                )}
+
             </div>
         </DndContext>
     );

src/components/UserData/ChangeMajorMinor.tsx

@@ -134,7 +134,7 @@ const ChangeYearMajorMinorPathStand = () => {
       </div>
       <Button
         variant={"outline"}
-        className="bg-blue-600 font-bold text-white mt-3 ml-10 self-end justify-end"
+        className="font-bold text-white mt-3 ml-10 self-end justify-end"
         onClick={() => {
           editUserYearMajorMinorPathStand();
         }}

src/components/ui/button.tsx

@@ -14,7 +14,7 @@ const buttonVariants = cva(
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         // Edit button styling here! -Raph
         outline:
-          "border border-input bg-slate-500 shadow hover:bg-slate-400 active:bg-slate-200",
+           "border border-input bg-slate-500 shadow hover:bg-slate-400 active:bg-slate-200",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",