added days to upcoming tasks

Author: TobbleCobble

client/src/components/ui/focus/taskDisplay.tsx

@@ -16,21 +16,40 @@ interface Time {
 export default function TaskDisplay({
   task,
   time,
-  current
+  current,
 }: {
   task: Task;
   time: Time;
-  current: Boolean;
+  current: boolean;
 }) {
   return (
-    <div className={current ? "px-auto m-3 flex flex-auto flex-col rounded-3xl bg-indigo-500 p-4 shadow-md shadow-black/40 outline-3 outline outline-slate-50" : "px-auto m-3 flex flex-auto flex-col rounded-3xl bg-indigo-400 p-4 shadow-md shadow-black/40"}>
-      <div className="flex flex-auto flex-row gap-4 px-3">
-        <div>{task.name}:</div>
-        <div>
-          {time.start_time} - {time.end_time}
-        </div>
+    <div
+      className={
+        current
+          ? "px-auto outline-3 m-3 flex flex-auto flex-col rounded-3xl bg-indigo-500 p-4 shadow-md shadow-black/40 outline outline-slate-50"
+          : "px-auto m-3 flex flex-auto flex-col rounded-3xl bg-indigo-400 p-4 shadow-md shadow-black/40"
+      }
+    >
+      <div className="font-bold">{task.name}</div>
+      <div>
+        {time.day === 1
+          ? "Mon"
+          : time.day === 2
+            ? "Tue"
+            : time.day === 3
+              ? "Wed"
+              : time.day === 4
+                ? "Thu"
+                : time.day === 5
+                  ? "Fri"
+                  : time.day === 6
+                    ? "Sat"
+                    : time.day === 7
+                      ? "Sun"
+                      : ""}{" "}
+        - {time.start_time} - {time.end_time}
       </div>
-      <div className="px-3 italic">{task.description}</div>
+      <div className="italic">{task.description}</div>
     </div>
   );
 }

client/src/components/ui/focus/timer.tsx

@@ -24,7 +24,7 @@ const Timer = (timeRemaining: number) => {
   };
 
   return (
-    <div className="rounded-full bg-indigo-400 p-3 px-8 font-inter text-xl font-semibold">
+    <div className="w-32 rounded-full bg-indigo-400 p-3 px-8 font-inter text-xl font-semibold">
       {formatTime(timeRemaining)}
     </div>
   );