Merge pull request #18 from codersforcauses/consistant-styling

all pages use the same colour scheme

Author: Archer-Key

client/src/components/task_form.tsx

@@ -101,10 +101,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-400 p-4 text-slate-200"
+      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"
     >
       <input
-        className="title-input w-full rounded-lg bg-slate-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-400 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)}
@@ -116,7 +116,7 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
           Description
         </h1>
         <textarea
-          className="description-input w-full rounded-lg bg-slate-400 p-2 brightness-90 placeholder:text-slate-300 hover:brightness-110"
+          className="description-input w-full rounded-lg bg-indigo-400 p-2 brightness-90 placeholder:text-slate-300 hover:brightness-110"
           value={description}
           onChange={(e) => setDescription(e.target.value)}
           rows={7}
@@ -130,7 +130,7 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
       />
       <TimeInput times={times} setTimes={setTimes} />
       <button
-        className="w-fit rounded-lg border border-slate-300 bg-slate-400 px-3 py-1 text-xl brightness-110 hover:brightness-125"
+        className="w-fit rounded-full border border-slate-300 bg-indigo-400 px-3 py-1 text-xl brightness-110 hover:brightness-125"
         type="submit"
       >
         Save

client/src/components/task_item.tsx

@@ -132,7 +132,7 @@ export function TaskItem({
     /* Item Display */
   }
   return (
-    <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 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-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
@@ -143,7 +143,7 @@ export function TaskItem({
         />
         {isEditing ? (
           <input
-            className="task-title-edit w-full rounded-lg bg-slate-400 px-3 py-1 brightness-90 hover:brightness-110"
+            className="task-title-edit w-full rounded-lg bg-indigo-400 px-3 py-1 brightness-90 hover:brightness-110"
             value={draftName}
             onChange={(e) => setDraftName(e.target.value)}
           />
@@ -167,14 +167,14 @@ export function TaskItem({
       </div>
 
       {/* Task Times */}
-      <div className="task-times-container flex flex-row flex-wrap items-start justify-start gap-y-1">
+      <div className="task-times-container flex flex-row flex-wrap items-start justify-start gap-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-fit flex-row gap-3 rounded-full bg-slate-400 px-3 py-1 hover:brightness-110"
+              className="day-time-tags flex w-fit flex-row gap-3 rounded-full bg-indigo-400 px-3 py-1 hover:brightness-110"
             >
               <DayTag day={formatDay(time.day)} />
               <TimeTag start_time={time.start_time} end_time={time.end_time} />
@@ -217,7 +217,7 @@ export function TaskItem({
               Description
             </h1>
             <textarea
-              className="w-full rounded-lg bg-slate-400 p-1 brightness-90 hover:brightness-110"
+              className="w-full rounded-lg bg-indigo-400 p-1 brightness-90 hover:brightness-110"
               value={draftDescription}
               rows={7}
               onChange={(e) => setDraftDescription(e.target.value)}
@@ -234,16 +234,16 @@ export function TaskItem({
 
       <div className="task-edit flex gap-2">
         {isEditing ? (
-          <div className="flex w-full flex-row justify-center text-lg">
+          <div className="flex w-full flex-row justify-center text-lg gap-2">
             <button
-              className="rounded-full bg-slate-400 px-3 py-1 hover:brightness-110"
+              className="rounded-full bg-indigo-400 px-3 py-1 hover:brightness-110"
               onClick={saveEdit}
               disabled={saving}
             >
               Save
             </button>
             <button
-              className="rounded-full bg-slate-400 px-3 py-1 hover:brightness-110"
+              className="rounded-full bg-indigo-400 px-3 py-1 hover:brightness-110"
               onClick={cancelEdit}
             >
               Cancel

client/src/components/task_list.tsx

@@ -46,7 +46,7 @@ export function TaskList({
     );
   }
   return (
-    <ul className="task-list h-fit space-y-3">
+    <ul className="task-list h-fit space-y-3 w-xl">
       {items.map((item) => (
         <li key={item.id}>
           <TaskItem

client/src/components/time_input.tsx

@@ -31,12 +31,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-slate-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-400 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-slate-400 p-1 text-center hover:brightness-110"
+              className="day-select h-full rounded-lg bg-indigo-400 p-1 text-center hover:brightness-110"
               value={time.day}
               onChange={(e) => {
                 const newTimes = [...times];
@@ -55,7 +55,7 @@ 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-slate-400 hover:brightness-110"
+                className="time-input h-full rounded-lg bg-indigo-400 hover:brightness-110"
                 type="time"
                 value={time.start_time}
                 onChange={(e) => {
@@ -65,7 +65,7 @@ export function TimeInput({ times, setTimes }: TimeInputProps) {
                 }}
               />
               <input
-                className="time-input h-full rounded-lg bg-slate-400 hover:brightness-110"
+                className="time-input h-full rounded-lg bg-indigo-400 hover:brightness-110"
                 type="time"
                 value={time.end_time}
                 onChange={(e) => {
@@ -76,7 +76,7 @@ export function TimeInput({ times, setTimes }: TimeInputProps) {
               />
             </div>
           </div>
-          <div className="repeat-input-wrapper flex w-[25%] flex-row gap-2 rounded-lg bg-slate-400 p-1 hover:brightness-110">
+          <div className="repeat-input-wrapper flex w-[25%] flex-row gap-2 rounded-lg bg-indigo-400 p-1 hover:brightness-110">
             <span>Repeats?</span>
             <input
               className="repeat-input"
@@ -99,7 +99,7 @@ export function TimeInput({ times, setTimes }: TimeInputProps) {
         </div>
       ))}
       <button
-        className="add-time-button w-12 rounded-full bg-slate-400 text-xl hover:brightness-110"
+        className="add-time-button w-12 rounded-full bg-indigo-400 text-xl hover:brightness-110"
         type="button"
         onClick={() =>
           setTimes([

client/src/components/timetable.tsx

@@ -370,7 +370,7 @@ function Timetable({ timetable_tasks_props }: TimetableProps) {
   return (
     <div
       id="timetable-border"
-      className="h-full w-full rounded-lg bg-slate-900 p-3"
+      className="h-full w-full rounded-lg bg-slate-900 p-3 shadow-xl shadow-black/40"
     >
       <div
         id="timetable-content"

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-slate-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-400 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-slate-400 text-justify placeholder:text-slate-300 hover:brightness-110"
+                className="topic-name-input w-[75%] bg-indigo-400 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-slate-400 p-2 text-center brightness-90 hover:brightness-110"
+        className="topic-select w-full rounded-lg bg-indigo-400 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-slate-400 text-xl hover:brightness-110"
+        className="add-topic-button w-12 rounded-full bg-indigo-400 text-xl hover:brightness-110"
         onClick={() =>
           setTopics([...topics, { type: "new", name: "", color_hex: 0xffffff }])
         }

client/src/components/ui/countdown.tsx

@@ -2,7 +2,7 @@ const Timer = (timeRemaining: number) => {
   const formatTime = (time: number) => {
     const seconds = Math.floor(time % 60);
     const minutes = Math.floor((time / 60) % 60);
-    const hours = Math.floor((time / (60 * 60)) % 24);
+    const hours = Math.floor((time / (60 * 60)));
 
     return (
       <div className="countdown-display">
@@ -24,7 +24,7 @@ const Timer = (timeRemaining: number) => {
   };
 
   return (
-    <div className="w-32 rounded-full bg-indigo-400 p-3 px-8 font-inter text-xl font-semibold">
+    <div className="rounded-full bg-indigo-400 p-3 px-8 font-inter text-xl font-semibold w-full">
       {formatTime(timeRemaining)}
     </div>
   );

client/src/components/ui/currentTask.tsx

@@ -14,7 +14,7 @@ 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-800 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-white/10">
+    <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">