Merge branch 'consistant-styling' into timetable-fixes

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>
   );

client/src/pages/login.tsx

@@ -73,10 +73,10 @@ export default function Login() {
 
       <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
         <form onSubmit={handleSubmit} className="space-y-6">
-          <label className="block text-sm/6 font-medium text-gray-100">
-            Username
-          </label>
           <div className="mt-2">
+            <label className="block text-sm/6 font-medium text-gray-100">
+              Username
+            </label>
             <input
               id="username"
               type="text"
@@ -87,10 +87,10 @@ export default function Login() {
             />
           </div>
 
-          <label className="block text-sm/6 font-medium text-gray-100">
-            Email
-          </label>
           <div className="mt-2">
+            <label className="block text-sm/6 font-medium text-gray-100">
+              Email
+            </label>
             <input
               id="email"
               type="email"
@@ -102,17 +102,17 @@ export default function Login() {
           </div>
 
           <div>
-            <div className="flex items-center justify-between">
-              <label className="block text-sm/6 font-medium text-gray-100">
-                Password
-              </label>
-              <div className="text-sm">
-                <a className="font-semibold text-indigo-400 hover:text-indigo-300">
-                  Forgot password?
-                </a>
-              </div>
-            </div>
             <div className="mt-2">
+              <div className="flex items-center justify-between">
+                <label className="block text-sm/6 font-medium text-gray-100">
+                  Password
+                </label>
+                <div className="text-sm">
+                  <a className="font-semibold text-indigo-400 hover:text-indigo-300">
+                    Forgot password?
+                  </a>
+                </div>
+              </div>
               <input
                 id="password"
                 type="password"

client/src/styles/globals.css

@@ -6,6 +6,8 @@
 
 @layer base {
   :root {
+    
+    @apply font-inter;
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
 
@@ -91,6 +93,7 @@
 
 @layer base {
   body {
+    @apply font-inter;
     @apply bg-background text-foreground;
     @apply font-inter;
   }