styling changes to tasks and focus pages

Author: Archer-Key

client/src/components/task_form.tsx

@@ -128,10 +128,10 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
   return (
     <form
       onSubmit={handleSubmit}
-      className="task-form flex h-full w-full flex-col items-center justify-between gap-2 rounded-lg bg-slate-900 p-4 text-slate-200"
+      className="task-form flex h-full w-full flex-col items-center justify-between gap-2 rounded-lg bg-indigo-800 p-4 text-slate-200"
     >
       <input
-        className="title-input w-full rounded-lg bg-indigo-400 px-3 py-1 text-3xl font-bold text-slate-100 brightness-90 placeholder:text-slate-300 hover:brightness-110"
+        className="title-input w-full rounded-lg bg-indigo-600 px-3 py-1 text-3xl font-bold text-slate-100 brightness-90 placeholder:text-slate-300 hover:brightness-110"
         type="text"
         value={taskName}
         onChange={(e) => setTaskName(e.target.value)}
@@ -143,7 +143,7 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
           Description
         </h1>
         <textarea
-          className="description-input w-full rounded-lg bg-indigo-400 p-2 brightness-90 placeholder:text-slate-300 hover:brightness-110"
+          className="description-input w-full rounded-lg bg-indigo-600 p-2 brightness-90 placeholder:text-slate-300 hover:brightness-110"
           value={description}
           onChange={(e) => setDescription(e.target.value)}
           rows={7}
@@ -157,7 +157,7 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
       />
       <TimeInput times={times} setTimes={setTimes} />
       <button
-        className="w-fit rounded-full border border-slate-300 bg-indigo-400 px-3 py-1 text-xl brightness-110 hover:brightness-125"
+        className="w-fit rounded-full border border-slate-300 bg-indigo-600 px-3 py-1 text-xl brightness-110 hover:brightness-125"
         type="submit"
       >
         Save

client/src/components/task_item.tsx

@@ -134,7 +134,7 @@ export function TaskItem({
     /* Item Display */
   }
   return (
-    <div className="task flex h-fit w-full min-w-[20rem] max-w-[48rem] flex-col gap-3 rounded-3xl bg-slate-900 p-5 text-slate-200 shadow-xl shadow-black/40">
+    <div className="task flex h-fit w-full min-w-[20rem] max-w-[48rem] flex-col gap-3 rounded-3xl bg-indigo-500 p-5 text-slate-200 shadow-xl shadow-black/40">
       <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
@@ -145,7 +145,7 @@ export function TaskItem({
         />
         {isEditing ? (
           <input
-            className="task-title-edit w-full rounded-lg bg-indigo-400 px-3 py-1 brightness-90 hover:brightness-110"
+            className="task-title-edit w-full rounded-lg bg-indigo-600 px-3 py-1 brightness-90 hover:brightness-110"
             value={draftName}
             onChange={(e) => setDraftName(e.target.value)}
           />
@@ -176,7 +176,7 @@ export function TaskItem({
           item.times.map((time) => (
             <div
               key={time.id}
-              className="day-time-tags flex w-fit flex-row gap-3 rounded-full bg-indigo-400 px-3 py-1 hover:brightness-110"
+              className="day-time-tags flex w-fit flex-row gap-3 rounded-full bg-indigo-600 px-3 py-1 hover:brightness-110"
             >
               <DayTag day={formatDay(time.day)} />
               <TimeTag start_time={time.start_time} end_time={time.end_time} />
@@ -219,7 +219,7 @@ export function TaskItem({
               Description
             </h1>
             <textarea
-              className="w-full rounded-lg bg-indigo-400 p-1 brightness-90 hover:brightness-110"
+              className="w-full rounded-lg bg-indigo-600 p-1 brightness-90 hover:brightness-110"
               value={draftDescription}
               rows={7}
               onChange={(e) => setDraftDescription(e.target.value)}
@@ -238,14 +238,14 @@ export function TaskItem({
         {isEditing ? (
           <div className="flex w-full flex-row justify-center gap-2 text-lg">
             <button
-              className="rounded-full bg-indigo-400 px-3 py-1 hover:brightness-110"
+              className="rounded-full bg-indigo-600 px-3 py-1 hover:brightness-110"
               onClick={saveEdit}
               disabled={saving}
             >
               Save
             </button>
             <button
-              className="rounded-full bg-indigo-400 px-3 py-1 hover:brightness-110"
+              className="rounded-full bg-indigo-600 px-3 py-1 hover:brightness-110"
               onClick={cancelEdit}
             >
               Cancel

client/src/components/time_input.tsx

@@ -56,12 +56,12 @@ export function TimeInput({ times, setTimes }: TimeInputProps) {
       {times.map((time, index) => (
         <div
           key={index}
-          className="time-input-wrapper flex w-full flex-row items-center justify-evenly gap-1 rounded-lg bg-indigo-400 p-1 brightness-90 hover:brightness-95"
+          className="time-input-wrapper flex w-full flex-row items-center justify-evenly gap-1 rounded-lg bg-indigo-600 p-1 brightness-90 hover:brightness-95"
         >
           <div className="day-select-wrapper flex w-[20%] flex-row items-center justify-center gap-1">
             <FaRegCalendarAlt />
             <select
-              className="day-select h-full rounded-lg bg-indigo-400 p-1 text-center hover:brightness-110"
+              className="day-select h-full rounded-lg bg-indigo-600 p-1 text-center hover:brightness-110"
               value={time.day}
               onChange={(e) =>
                 updateTime(index, "day", parseInt(e.target.value))
@@ -78,22 +78,22 @@ export function TimeInput({ times, setTimes }: TimeInputProps) {
             <FaRegClock />
             <div className="time-inputs-wrapper text-md flex flex-col">
               <input
-                className="time-input h-full rounded-lg bg-indigo-400 hover:brightness-110"
+                className="time-input h-full rounded-lg bg-indigo-600 hover:brightness-110"
                 type="time"
                 value={time.start_time}
                 onChange={(e) =>
                   updateTime(index, "start_time", e.target.value)
                 }
               />
               <input
-                className="time-input h-full rounded-lg bg-indigo-400 hover:brightness-110"
+                className="time-input h-full rounded-lg bg-indigo-600 hover:brightness-110"
                 type="time"
                 value={time.end_time}
                 onChange={(e) => updateTime(index, "end_time", e.target.value)}
               />
             </div>
           </div>
-          <div className="repeat-input-wrapper flex w-[25%] flex-row gap-2 rounded-lg bg-indigo-400 p-1 hover:brightness-110">
+          <div className="repeat-input-wrapper flex w-[25%] flex-row gap-2 rounded-lg bg-indigo-600 p-1 hover:brightness-110">
             <span>Repeats?</span>
             <input
               className="repeat-input"
@@ -113,7 +113,7 @@ export function TimeInput({ times, setTimes }: TimeInputProps) {
         </div>
       ))}
       <button
-        className="add-time-button w-12 rounded-full bg-indigo-400 text-xl hover:brightness-110"
+        className="add-time-button w-12 rounded-full bg-indigo-600 text-xl hover:brightness-110"
         type="button"
         onClick={addTime}
       >

client/src/components/topic_input.tsx

@@ -55,7 +55,7 @@ export function TopicInput({
           return (
             <div
               key={index}
-              className="new-topic-input flex w-full flex-row justify-evenly gap-2 rounded-lg bg-indigo-400 p-2 brightness-90 hover:brightness-95"
+              className="new-topic-input flex w-full flex-row justify-evenly gap-2 rounded-lg bg-indigo-600 p-2 brightness-90 hover:brightness-95"
             >
               <input
                 className="color-select h-5 w-5 border-0"
@@ -69,7 +69,7 @@ export function TopicInput({
                 }}
               />
               <input
-                className="topic-name-input w-[75%] bg-indigo-400 text-justify placeholder:text-slate-300 hover:brightness-110"
+                className="topic-name-input w-[75%] bg-indigo-600 text-justify placeholder:text-slate-300 hover:brightness-110"
                 type="text"
                 placeholder="Topic name..."
                 value={topic.name}
@@ -94,7 +94,7 @@ export function TopicInput({
 
       {/* Existing Topic Selection */}
       <select
-        className="topic-select w-full rounded-lg bg-indigo-400 p-2 text-center brightness-90 hover:brightness-110"
+        className="topic-select w-full rounded-lg bg-indigo-600 p-2 text-center brightness-90 hover:brightness-110"
         onChange={(e) => {
           const id = Number(e.target.value);
           if (!id) return;
@@ -114,7 +114,7 @@ export function TopicInput({
 
       <button
         type="button"
-        className="add-topic-button w-12 rounded-full bg-indigo-400 text-xl hover:brightness-110"
+        className="add-topic-button w-12 rounded-full bg-indigo-600 text-xl hover:brightness-110"
         onClick={() =>
           setTopics([...topics, { type: "new", name: "", color_hex: 0xffffff }])
         }

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

@@ -4,7 +4,7 @@ export default function CurrentTaskTitle(task_name: string) {
   return (
     <div className="m-3 flex flex-col items-center justify-center rounded-3xl bg-slate-900 p-10 shadow-xl shadow-black/40">
       <h1 className="mb-2 font-inter text-4xl font-semibold">Current Focus</h1>
-      <div className="rounded-full bg-indigo-400 p-3 px-8 font-inter text-xl font-semibold">
+      <div className="rounded-full bg-indigo-700 p-3 px-8 font-inter text-xl font-semibold">
         {task_name}
       </div>
     </div>

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

@@ -27,7 +27,7 @@ export default function TaskDisplay({
       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"
+          : "px-auto m-3 flex flex-auto flex-col rounded-3xl bg-indigo-700 p-4 shadow-md shadow-black/40"
       }
     >
       <div className="font-bold">{task.name}</div>

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

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

client/src/components/ui/navbar.tsx

@@ -14,31 +14,19 @@ export function Navbar() {
       : "rounded-md px-3 py-2 text-xl font-bold text-gray-300 hover:bg-white/5 hover:text-white";
 
   return (
-    <nav className="relative bg-indigo-500 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-white/10">
-      <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
-        <div className="relative flex h-16 items-center justify-between">
-          <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
-            <div className="hidden sm:ml-6 sm:block">
-              <div className="flex space-x-4">
-                <Link
-                  href="/tasks"
-                  aria-current="page"
-                  className={linkClass("/tasks")}
-                >
-                  Tasks
-                </Link>
-                <Link href="/schedule" className={linkClass("/schedule")}>
-                  Schedule
-                </Link>
-                <Link href="/focus" className={linkClass("/focus")}>
-                  Focus
-                </Link>
-                <LogoutButton />
-              </div>
-            </div>
-          </div>
-          <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"></div>
-        </div>
+    <nav className="flex bg-indigo-500 px-5 py-3 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-white/10">
+      <div className="flex w-full flex-1 items-center justify-center gap-4 sm:items-stretch sm:justify-start">
+        <Link href="/tasks" aria-current="page" className={linkClass("/tasks")}>
+          Tasks
+        </Link>
+        <Link href="/schedule" className={linkClass("/schedule")}>
+          Schedule
+        </Link>
+        <Link href="/focus" className={linkClass("/focus")}>
+          Focus
+        </Link>
+        <div className="w-full"></div>
+        <LogoutButton />
       </div>
     </nav>
   );

client/src/pages/focus.tsx

@@ -209,6 +209,13 @@ const CountdownTimer = () => {
         <p className="p-4 font-inter text-4xl font-semibold">Focus</p>
         <div className="flex flex-row justify-center">
           <div className="flex flex-col">
+            <div>
+              {currentTask ? (
+                <div>{CurrentTaskTitle(currentTask.name)}</div>
+              ) : (
+                <div>{CurrentTaskTitle("none")}</div>
+              )}
+            </div>
             <div>
               {currentTime ? (
                 <TimeDisplay
@@ -232,19 +239,12 @@ const CountdownTimer = () => {
                 </>
               )}
             </div>
-            <div>
-              {currentTask ? (
-                <div>{CurrentTaskTitle(currentTask.name)}</div>
-              ) : (
-                <div>{CurrentTaskTitle("none")}</div>
-              )}
-            </div>
           </div>
           <div>
             {times.length > 0 ? (
               <div className="justify-top flex flex-col pl-8">
                 <div className="p-4 font-inter text-2xl font-semibold">
-                  tasks
+                  Tasks
                 </div>
                 <UpcomingTasks tasks={tasks} times={times} refresh={refresh} />
               </div>

client/src/pages/tasks.tsx

@@ -209,7 +209,7 @@ export default function TasksPage() {
               />
             </div>
             <div
-              className="add-task-container sticky top-3 flex h-full flex-col items-center justify-start rounded-lg bg-slate-900 p-3 shadow-xl"
+              className="add-task-container sticky top-3 flex h-full flex-col items-center justify-start rounded-3xl bg-indigo-800 p-3 shadow-xl"
               style={{ display: showAddTask ? "flex" : "none" }}
             >
               <h1 className="text-3xl font-bold text-slate-100">Add Task</h1>
@@ -227,7 +227,7 @@ export default function TasksPage() {
               </div>
             </div>
             <button
-              className="toggle-add-task-button fixed bottom-9 right-9 flex h-12 w-12 items-center justify-center rounded-full border bg-indigo-400 text-xl brightness-90 hover:brightness-110"
+              className="toggle-add-task-button fixed bottom-9 right-9 flex h-12 w-12 items-center justify-center rounded-full border bg-indigo-600 text-xl brightness-90 hover:brightness-110"
               onClick={toggleShowAddTask}
             >
               {!showAddTask ? <RxPlus /> : <RxCross2 />}