Added black border to AddCourses

- Black border +
- i made the borders rounded cuz i thought it looked nice +
- made the label font color slightly redder so its a tiny bit more visible than the previous light grayish color

#740

Author: ttn64681

frontend/src/components/Filters.tsx

@@ -94,10 +94,10 @@ export const SearchFilter = ({}: props) => {
 
   return (
     <section>
-      <div className="flex flex-col border-2 border-black bg-barely-pink p-2">
+      <div className="flex flex-col border-2 border-black bg-barely-pink p-2 rounded-lg">
         {" "}
         {/* Div for Whole Filter Component*/}
-        <h1 className="m-4 text-center text-lg font-extrabold sm:m-2 sm:ml-8 sm:mt-8 sm:w-full sm:text-left sm:text-2xl sm:font-extrabold">
+        <h1 className="text-center text-lg font-extrabold sm:m-2 sm:ml-8 sm:mt-8 sm:w-full sm:text-left sm:text-2xl sm:font-extrabold">
           Filters
         </h1>{" "}
         {/* h1 For Filter Title */}

frontend/src/components/courses/AddCourses.tsx

@@ -132,32 +132,32 @@ export function AddCourses({ onAddCourse, searchParams }: Props) {
 
   return (
     <div className="h-full min-w-full">
-      <nav className="flex gap-2">
+      <nav className="flex gap-2 z-10">
         <Link
           href={subjectView.href}
           data-active={state.view === "subject"}
-          className="w-1/3 rounded-bl-none rounded-br-none rounded-tl-lg rounded-tr-lg bg-dusty-pink px-4 py-2 text-left font-bold capitalize text-[#CFBEBE] duration-150 data-[active=true]:bg-bulldog-red data-[active=true]:text-white"
+          className="w-1/3 rounded-bl-none rounded-br-none rounded-tl-lg rounded-tr-lg bg-dusty-pink border-2 border-black border-b-0 px-4 py-2 text-left font-bold capitalize text-[#dbabab] duration-150 data-[active=true]:bg-bulldog-red data-[active=true]:text-white"
         >
           By Subject
         </Link>
         <Link
           href={instructorView.href}
           data-active={state.view === "instructor"}
-          className="w-1/3 rounded-bl-none rounded-br-none rounded-tl-lg rounded-tr-lg bg-dusty-pink px-4 py-2 text-left font-bold capitalize text-[#CFBEBE] duration-150 data-[active=true]:bg-bulldog-red data-[active=true]:text-white"
+          className="w-1/3 rounded-bl-none rounded-br-none rounded-tl-lg rounded-tr-lg bg-dusty-pink border-2 border-black border-b-0 px-4 py-2 text-left font-bold capitalize text-[#dbabab] duration-150 data-[active=true]:bg-bulldog-red data-[active=true]:text-white"
         >
           By Instructor
         </Link>
         <Link
           href={crnView.href}
           data-active={state.view === "crn"}
-          className="w-1/3 rounded-bl-none rounded-br-none rounded-tl-lg rounded-tr-lg bg-dusty-pink px-4 py-2 text-left font-bold capitalize text-[#CFBEBE] duration-150 data-[active=true]:bg-bulldog-red data-[active=true]:text-white"
+          className="w-1/3 rounded-bl-none rounded-br-none rounded-tl-lg rounded-tr-lg bg-dusty-pink border-2 border-black border-b-0 px-4 py-2 text-left font-bold capitalize text-[#dbabab] duration-150 data-[active=true]:bg-bulldog-red data-[active=true]:text-white"
         >
           By CRN
         </Link>
       </nav>
 
       <form
-        className="flex flex-col gap-16 border-2 border-t-0 border-black bg-barely-pink px-8 py-10"
+        className="flex flex-col rounded-b-lg gap-16 border-2 border-t-2 border-black bg-barely-pink px-8 py-10 -mt-[2px]"
         onSubmit={handleSubmit}
       >
         {state.view === "subject" && <SearchBySubject {...subjectView} />}

frontend/src/components/courses/TimeDistanceFilter.tsx

@@ -48,7 +48,7 @@ export function TimeDistanceFilter() {
 
   return (
     // Main container with 2 columns
-    <div className="grid max-w-80 grid-cols-2 gap-4">
+    <div className="grid max-w-80 grid-cols-2 gap-4 rounded-lg">
       {/* Left column: Labels */}
       <div className="grid grid-rows-3 gap-4">
         <label className="text-right font-extrabold">Start Time:</label>