changed time tags on task item to display in a row for better UI, added TopicTagAlt with similar styling to github labels for better UI, changed topic input to use TopicTagAlt for existing topics to match viewing display

Author: Archer-Key

client/src/components/task_item.tsx

@@ -5,7 +5,7 @@ import { FaRegTrashCan } from "react-icons/fa6";
 import { TimeInput } from "@/components/time_input";
 import TimeTag, { DayTag } from "@/components/time_tag";
 import { TopicInput } from "@/components/topic_input";
-import TopicTag from "@/components/topic_tag";
+import { TopicTagAlt } from "@/components/topic_tag";
 
 interface Time {
   id: number;
@@ -126,7 +126,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 shadow-xl">
+    <div className="task flex h-fit w-full max-w-[48rem] 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 gap-2 text-3xl font-bold text-slate-100 hover:text-slate-100">
         {/* Task Name and Completion */}
         <input
@@ -161,14 +161,14 @@ export function TaskItem({
       </div>
 
       {/* Task Times */}
-      <div className="task-times-container flex flex-col items-start">
+      <div className="task-times-container flex flex-row flex-wrap items-start justify-start gap-x-8 gap-y-1">
         {isEditing ? (
           <TimeInput times={draftTimes} setTimes={setDraftTimes} />
         ) : item.times?.length > 0 ? (
           item.times.map((time) => (
             <div
               key={time.id}
-              className="day-time-tags flex w-full flex-row gap-3"
+              className="day-time-tags flex w-fit flex-row gap-3 rounded-full bg-slate-400 px-3 py-1 hover:brightness-110"
             >
               <DayTag day={formatDay(time.day)} />
               <TimeTag start_time={time.start_time} end_time={time.end_time} />
@@ -189,7 +189,7 @@ export function TaskItem({
           />
         ) : item.topics.length > 0 ? (
           item.topics.map((topic) => (
-            <TopicTag
+            <TopicTagAlt
               key={topic.id}
               name={topic.name}
               color_hex={topic.color_hex}

client/src/components/topic_input.tsx

@@ -1,4 +1,7 @@
 import { FaRegTrashCan } from "react-icons/fa6";
+import { RxCross2 } from "react-icons/rx";
+
+import { TopicTagAlt } from "@/components/topic_tag";
 
 interface Topic {
   id: number;
@@ -25,34 +28,25 @@ export function TopicInput({
     <div className="topic-input flex w-full flex-col items-center justify-center gap-2 text-slate-200">
       <h1 className="topic-input-title text-xl hover:brightness-110">Topics</h1>
       {/* Selected Topics Display */}
-      <div className="topics-container flex w-full flex-col items-center justify-center gap-2">
+      <div className="topics-container flex w-full flex-row flex-wrap items-center justify-start gap-2">
         {topics.map((topic, index) => {
           if (topic.type === "existing") {
             const topicData = availableTopics.find((t) => t.id === topic.id);
             if (!topicData) return null;
             return (
-              <div
-                key={index}
-                className="flex w-full items-center justify-evenly gap-2 rounded-lg bg-slate-400 p-2 brightness-90 hover:brightness-95"
-              >
-                <div
-                  className="topic-color aspect-square h-5"
-                  style={{
-                    backgroundColor:
-                      "#" + topicData.color_hex.toString(16).padStart(6, "0"),
-                  }}
-                ></div>
-                <span className="topic-name w-full max-w-[75%] text-justify">
-                  {topicData.name}
-                </span>
+              <div key={index} className="flex w-fit flex-row gap-2 rounded-lg">
+                <TopicTagAlt
+                  name={topicData.name}
+                  color_hex={topicData.color_hex}
+                />
                 <button
                   className="hover:brightness-90"
                   type="button"
                   onClick={() =>
                     setTopics(topics.filter((_, i) => i !== index))
                   }
                 >
-                  <FaRegTrashCan className="hover:text-red-500" />
+                  <RxCross2 className="hover:text-red-500" />
                 </button>
               </div>
             );

client/src/components/topic_tag.tsx

@@ -26,3 +26,47 @@ function TopicTag({ name, color_hex }: TopicTagProps) {
 }
 
 export default TopicTag;
+
+function getHexColorValues(hex: string) {
+  const r = parseInt(hex.substring(1, 3), 16);
+  const g = parseInt(hex.substring(3, 5), 16);
+  const b = parseInt(hex.substring(5, 7), 16);
+
+  return { r: r, g: g, b: b };
+}
+
+function modifyBrightness(hex: string, brightness: number): string {
+  const { r, g, b } = getHexColorValues(hex);
+
+  const brightness_modifier = Math.floor((256 * (brightness - 100)) / 100);
+
+  const new_r = Math.min(255, Math.max(0, r + brightness_modifier));
+  const new_g = Math.min(255, Math.max(0, g + brightness_modifier));
+  const new_b = Math.min(255, Math.max(0, b + brightness_modifier));
+
+  const r_str = new_r.toString(16).padStart(2, "0");
+  const g_str = new_g.toString(16).padStart(2, "0");
+  const b_str = new_b.toString(16).padStart(2, "0");
+
+  return "#" + r_str + g_str + b_str;
+}
+
+export function TopicTagAlt({ name, color_hex }: TopicTagProps) {
+  const color_hex_code = "#" + color_hex.toString(16).padStart(6, "0");
+
+  const foreground_hex_code = modifyBrightness(color_hex_code, 125);
+  const background_hex_code = modifyBrightness(color_hex_code, 60);
+
+  return (
+    <div
+      className="topic-tag flex w-fit flex-row items-center overflow-hidden rounded-full border px-2 py-1 text-sm hover:brightness-110"
+      style={{
+        borderColor: foreground_hex_code,
+        color: foreground_hex_code,
+        backgroundColor: background_hex_code,
+      }}
+    >
+      <p className="topic-tag-text truncate">{name}</p>
+    </div>
+  );
+}

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

@@ -145,7 +145,7 @@ export default function TasksPage() {
                   availableTopics={availableTopics}
                 />
               </div>
-              <div className="add-task-container hidden h-full flex-col items-center justify-start rounded-lg bg-slate-400 p-3 shadow-xl">
+              <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