added shadows to task pages main components, removed some old hover effects that change text size for ones that increase brightness

Author: Archer-Key

client/src/components/task_item.tsx

@@ -122,7 +122,7 @@ export function TaskItem({
     /* Item Display */
   }
   return (
-    <div className="task flex h-fit w-full max-w-[28rem] flex-col gap-3 rounded-lg bg-slate-400 p-5 text-slate-200">
+    <div className="task flex h-fit w-full max-w-[28rem] flex-col gap-3 rounded-lg bg-slate-400 p-5 text-slate-200 shadow-xl">
       <div className="task-title-container flex w-full flex-row items-center justify-start text-3xl font-bold text-slate-100 hover:text-slate-100">
         {/* Task Name and Completion */}
         <input

client/src/components/time_tag.tsx

@@ -50,9 +50,9 @@ function TimeTag({ start_time, end_time, display }: TimeTagProps) {
     display,
   );
   return (
-    <div className="flex h-fit w-fit flex-row items-center justify-center rounded-full text-slate-300 hover:text-slate-100">
+    <div className="flex h-fit w-fit flex-row items-center justify-center gap-1 rounded-full">
       <div className="placeholder-clock aspect-1/1 h-5 w-5 rounded-[50] bg-slate-200"></div>
-      <p className="ml-1">{time_display_string}</p>
+      <p className="hover:brightness-110">{time_display_string}</p>
     </div>
   );
 }
@@ -65,9 +65,9 @@ interface DayTagProps {
 
 export function DayTag({ day }: DayTagProps) {
   return (
-    <div className="flex h-fit w-fit flex-row items-center justify-center rounded-full text-slate-300 hover:text-slate-100">
+    <div className="flex h-fit w-fit flex-row items-center justify-center gap-1 rounded-full">
       <div className="placeholder-calendar aspect-1/1/ h-5 w-5 bg-slate-200"></div>
-      <p className="ml-1">{day}</p>
+      <p className="hover:brightness-110">{day}</p>
     </div>
   );
 }

client/src/components/timetable_task.tsx

@@ -189,10 +189,10 @@ function TimetableTaskContent({
 }: TimetableTaskContentProps) {
   return (
     <div className="timetable-task-content h-full overflow-hidden">
-      <h1 className="mb-1 text-2xl font-bold text-slate-200 hover:text-slate-100">
+      <h1 className="mb-1 text-2xl font-bold text-slate-100 hover:brightness-110">
         {name}
       </h1>
-      <div className="time-tag-wrapper text-lg font-medium">
+      <div className="time-tag-wrapper text-lg font-medium text-slate-200">
         <TimeTag
           start_time={start_time}
           end_time={end_time}
@@ -209,7 +209,7 @@ function TimetableTaskContent({
         ))}
       </div>
       <div className="description mt-1 flex flex-col text-justify">
-        <p className="text-slate-300 hover:text-slate-100">{description}</p>
+        <p className="text-slate-300 hover:brightness-110">{description}</p>
       </div>
     </div>
   );

client/src/components/topic_tag.tsx

@@ -15,18 +15,12 @@ stored in color_hex.
 function TopicTag({ name, color_hex }: TopicTagProps) {
   const color_hex_code = "#" + color_hex.toString(16).padStart(6, "0");
   return (
-    <div
-      className={
-        "flex w-fit flex-row items-center overflow-hidden rounded-full bg-slate-500/50 p-1 pl-2 pr-2 text-sm text-slate-300 hover:text-slate-100"
-      }
-    >
+    <div className="topic-tag flex w-fit flex-row items-center overflow-hidden rounded-full bg-slate-500/50 p-1 pl-2 pr-2 text-sm text-slate-300 hover:brightness-110">
       <div
-        className="aspect-1/1 mr-1 min-h-2 min-w-2 rounded-full"
+        className="topic-tag-color aspect-1/1 mr-1 min-h-2 min-w-2 rounded-full"
         style={{ backgroundColor: color_hex_code }}
-      >
-        {" "}
-      </div>
-      <p className="truncate">{name}</p>
+      ></div>
+      <p className="topic-tag-text truncate">{name}</p>
     </div>
   );
 }

client/src/pages/[id]/tasks.tsx

@@ -125,7 +125,7 @@ export default function TasksPage() {
                   availableTopics={availableTopics}
                 />
               </div>
-              <div className="add-task-container flex h-full flex-col items-center justify-start rounded-lg bg-slate-400 p-3">
+              <div className="add-task-container flex h-full flex-col items-center justify-start rounded-lg bg-slate-400 p-3 shadow-xl">
                 <h1 className="text-3xl font-bold text-slate-100">Add Task</h1>
                 <div className="task-form-wrapper h-full overflow-auto">
                   <TaskForm