installed react-icons package in client, replaced icon placeholders with relevant icon, added placeholder text styling to new topic input to make text visible

Author: Archer-Key

client/package-lock.json

@@ -27,6 +27,7 @@
     "next": "15.4.7",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7"
   },

client/package.json

@@ -1,4 +1,6 @@
 import { useState } from "react";
+import { FaRegEdit } from "react-icons/fa";
+import { FaRegTrashCan } from "react-icons/fa6";
 
 import { TimeInput } from "@/components/time_input";
 import TimeTag, { DayTag } from "@/components/time_tag";
@@ -233,19 +235,16 @@ export function TaskItem({
           </div>
         ) : (
           <button className="hover:brightness-110" onClick={startEdit}>
-            Edit
+            <FaRegEdit className="h-5 w-5" />
           </button>
         )}
       </div>
 
       {/* Delete Button */}
       <div>
         {!isEditing && (
-          <button
-            onClick={() => onDelete(item.id)}
-            className="mt-2 text-red-500"
-          >
-            Delete Task
+          <button onClick={() => onDelete(item.id)}>
+            <FaRegTrashCan className="h-5 w-5 hover:text-red-600" />
           </button>
         )}
       </div>

client/src/components/task_item.tsx

@@ -1,3 +1,6 @@
+import { FaRegCalendarAlt,FaRegClock } from "react-icons/fa";
+import { FaRegTrashCan } from "react-icons/fa6";
+
 interface Time {
   id: number;
   day: number;
@@ -31,7 +34,7 @@ export function TimeInput({ times, setTimes }: TimeInputProps) {
           className="time-input-wrapper flex w-full flex-row items-center justify-evenly gap-1 rounded-lg bg-slate-400 p-1 brightness-90 hover:brightness-95"
         >
           <div className="day-select-wrapper flex w-[20%] flex-row items-center justify-center gap-1">
-            <div className="calendar-placeholder h-5 w-5 bg-slate-200"></div>
+            <FaRegCalendarAlt />
             <select
               className="day-select h-full rounded-lg bg-slate-400 p-1 text-center hover:brightness-110"
               value={time.day}
@@ -49,7 +52,7 @@ export function TimeInput({ times, setTimes }: TimeInputProps) {
             </select>
           </div>
           <div className="time-select-wrapper flex w-[35%] flex-row items-center justify-center gap-1">
-            <div className="clock-placeholder h-5 w-5 rounded-full bg-slate-200"></div>
+            <FaRegClock />
             <div className="time-inputs-wrapper text-md flex flex-col">
               <input
                 className="time-input h-full rounded-lg bg-slate-400 hover:brightness-110"
@@ -91,7 +94,7 @@ export function TimeInput({ times, setTimes }: TimeInputProps) {
             type="button"
             onClick={() => setTimes(times.filter((_, i) => i !== index))}
           >
-            <div className="trashcan-placeholder h-5 w-5 bg-red-500"></div>
+            <FaRegTrashCan className="hover:text-red-500" />
           </button>
         </div>
       ))}

client/src/components/time_input.tsx

@@ -1,3 +1,5 @@
+import { FaRegCalendarAlt,FaRegClock } from "react-icons/fa";
+
 import { getDurationMinutes } from "@/components/timetable";
 
 /*
@@ -51,7 +53,7 @@ function TimeTag({ start_time, end_time, display }: TimeTagProps) {
   );
   return (
     <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>
+      <FaRegClock />
       <p className="hover:brightness-110">{time_display_string}</p>
     </div>
   );
@@ -66,7 +68,7 @@ interface DayTagProps {
 export function DayTag({ day }: DayTagProps) {
   return (
     <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>
+      <FaRegCalendarAlt />
       <p className="hover:brightness-110">{day}</p>
     </div>
   );

client/src/components/time_tag.tsx

@@ -1,3 +1,5 @@
+import { FaRegTrashCan } from "react-icons/fa6";
+
 interface Topic {
   id: number;
   name: string;
@@ -50,7 +52,7 @@ export function TopicInput({
                     setTopics(topics.filter((_, i) => i !== index))
                   }
                 >
-                  <div className="trashcan-placeholder aspect-square h-5 bg-red-500"></div>
+                  <FaRegTrashCan className="hover:text-red-500" />
                 </button>
               </div>
             );
@@ -73,9 +75,9 @@ export function TopicInput({
                 }}
               />
               <input
-                className="topic-name-input w-[75%] bg-slate-400 text-justify hover:brightness-110"
+                className="topic-name-input w-[75%] bg-slate-400 text-justify placeholder:text-slate-300 hover:brightness-110"
                 type="text"
-                placeholder="New Topic Name"
+                placeholder="Topic name..."
                 value={topic.name}
                 onChange={(e) => {
                   const newTopics = [...topics];
@@ -89,7 +91,7 @@ export function TopicInput({
                 type="button"
                 onClick={() => setTopics(topics.filter((_, i) => i !== index))}
               >
-                <div className="trashcan-placeholder aspect-square h-5 bg-red-500"></div>
+                <FaRegTrashCan className="hover:text-red-500" />
               </button>
             </div>
           );

client/src/components/topic_input.tsx

@@ -0,0 +1 @@
+{}