Ben0189 · cloverluo112 · Oct 8, 2024 · Oct 8, 2024 · Oct 8, 2024 · Oct 8, 2024
diff --git a/blotztask-ui/public/comingsoon.webp → ...k-ui/public/assets/images/comingsoon.webp b/blotztask-ui/public/comingsoon.webp → ...k-ui/public/assets/images/comingsoon.webp
diff --git a/blotztask-ui/public/assets/images/logo.svg b/blotztask-ui/public/assets/images/logo.svg
diff --git a/blotztask-ui/src/app/coming-soon/page.tsx b/blotztask-ui/src/app/coming-soon/page.tsx
@@ -28,7 +28,7 @@ export default function Home() {
         <div className= "flex">
           <div className= "mr-0" >
             <img
-            src="/comingsoon.webp" 
+            src="/assets/images/comingsoon.webp" 
             alt="An image of a coming soon page"
             className="w-160 h-auto object-cover"
             />

diff --git a/blotztask-ui/src/app/layout.tsx b/blotztask-ui/src/app/layout.tsx
@@ -25,7 +25,7 @@ export default function RootLayout({
     <html lang="en">
       <body
         className={cn(
-          'min-h-screen bg-background font-sans antialiased',
+          'min-h-screen font-sans antialiased',
           fontSans.variable
         )}
       >
@@ -37,8 +37,7 @@ export default function RootLayout({
             disableTransitionOnChange
           >
             <MainNav />
-            {/* <Navbar /> TODO: Implement navbar to navigate between pages*/}
-            <section className="container mx-auto px-12 py-4">
+            <section className="container mx-auto px-12 pt-8 font-display">
               {children}
             </section>
           </ThemeProvider>

diff --git a/blotztask-ui/src/app/navbar/main-nav.module.css b/blotztask-ui/src/app/navbar/main-nav.module.css
@@ -0,0 +1,29 @@
+.link-underline {
+    background-image: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff); 
+    background-size: 0 3px; 
+    background-position: 0 100%; 
+    background-repeat: no-repeat; 
+    transition: background-size 0.3s ease-in-out; 
+  }
+
+.link-underline:hover {
+    background-size: 100% 3px;
+}
+
+.nav-btn {
+    @apply rounded-full text-white transition-all text-center flex items-center justify-center font-display;
+    transition: all 0.3s ease;
+}
+
+.signout-nav-btn {
+    @apply font-display rounded-2xl border border-transparent py-2 px-5 text-black transition-all text-center text-sm flex items-center justify-center;
+    background: white; 
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
+    transition: all 0.3s ease;
+}
+
+.signout-nav-btn:hover {
+    border: 1px solid white; /* Set border to white on hover */
+    background: transparent; /* Make background transparent to show the nav bar's background */
+    color: white; /* Change text color to white */
+}
diff --git a/blotztask-ui/src/app/navbar/main-nav.tsx b/blotztask-ui/src/app/navbar/main-nav.tsx
@@ -6,9 +6,10 @@ import {
   signOut,
   useSession,
 } from 'next-auth/react';
-import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
+import styles from './main-nav.module.css';
+import { H4 } from '@/components/ui/heading-with-anchor';
 
 export function MainNav({}: React.HTMLAttributes<HTMLElement>) {
   const { data: session } = useSession();
@@ -26,53 +27,48 @@ export function MainNav({}: React.HTMLAttributes<HTMLElement>) {
   }, []);
 
   return (
-    <nav className="flex-between w-full pt-4 px-8">
-      <Link href="/" className="flex">
-        <Image
-          src="/assets/images/logo.svg"
-          alt="logo"
-          width={50}
-          height={50}
-        />
+    <nav className="w-full py-5 px-8 bg-primary-dark flex justify-between items-center">
+      <Link href="/">
+        <H4 className="text-white font-display ">Blotz</H4>
       </Link>
 
-      <div className="sm:flex hidden">
+      <div className="sm:flex hidden justify-end">
         {session?.user ? (
-          <div className="flex gap-3 md:gap-5">
+          <div className="flex gap-6">
             <Link
               href="/task-dayview"
-              className="gradient_green_blue_btn gradient_green_blue_btn:hover"
+              className={styles['nav-btn']}
             >
-              <span>Day View</span>
+              <span className={styles['link-underline']}>Day View</span>
             </Link>
             <Link
               href="/task-list"
-              className="gradient_green_blue_btn gradient_green_blue_btn:hover"
+              className={styles['nav-btn']}
             >
-              <span>Task List</span>
+              <span className={styles['link-underline']}>Task List</span>
             </Link>
             <Link
               href="/tasks"
-              className="gradient_green_blue_btn gradient_green_blue_btn:hover"
+              className={styles['nav-btn']}
             >
-              <span>New Task List</span>
+              <span className={styles['link-underline']}>New Task List</span>
             </Link>
             <Link
               href="/test-connection"
-              className="gradient_green_blue_btn gradient_green_blue_btn:hover"
+              className={styles['nav-btn']}
             >
-              <span>Test Connection</span>
+              <span className={styles['link-underline']}>Test Connection</span>
             </Link>
             <Link
               href="/profile"
-              className="gradient_green_blue_btn gradient_green_blue_btn:hover"
+              className={styles['nav-btn']}
             >
-              <span>My Profile</span>
+              <span className={styles['link-underline']}>My Profile</span>
             </Link>
             <button
               type="button"
               onClick={() => signOut()}
-              className="inverse_gradient_green_blue_btn inverse_gradient_green_blue_btn:hover"
+              className={styles['signout-nav-btn']}
             >
               Sign Out
             </button>
@@ -84,7 +80,7 @@ export function MainNav({}: React.HTMLAttributes<HTMLElement>) {
                 <Link
                   key={provider.id}
                   href="/signin?callbackUrl=%2F"
-                  className="gradient_green_blue_btn gradient_green_blue_btn:hover"
+                  className="nav-btn nav-btn:hover"
                 >
                   <span>Sign in</span>
                 </Link>

diff --git a/blotztask-ui/src/app/page.tsx b/blotztask-ui/src/app/page.tsx
@@ -4,9 +4,9 @@ import { H1, H3 } from '@/components/ui/heading-with-anchor';
 export default function Home() {
   return (
     <main className="flex flex-col gap-5 p-12 md:items-center md:p-28">
-      <H1 className="green_gradient">
+      <H1 className="heading-primary">
         Blotz
-        <span className="blue_gradient text-center">Task</span>
+        <span className="heading-secondary">Task</span>
       </H1>
 
       <H3 className="text-lg font-light text-muted-foreground sm:text-xl">

diff --git a/blotztask-ui/src/app/task-dayview/page.tsx b/blotztask-ui/src/app/task-dayview/page.tsx
@@ -8,6 +8,7 @@ import { taskDto } from './models/taskDto';
 import { TaskDTO, taskDTOSchema } from './schema/schema';
 import { Button } from '@/components/ui/button';
 import { TaskForm } from './components/form';
+import { H1, H5 } from '@/components/ui/heading-with-anchor';
 
 // Define mock data
 const mockTasks: taskDto[] = [
@@ -60,50 +61,53 @@ export default function Dayview() {
 
   return (
     <>
-      <div className="hidden h-full flex-1 flex-col space-y-8 md:flex bg-white border-1 ">
-        <div className="items-center space-y-2 ">
-          <div>
-            <h2 className="text-2xl font-bold tracking-tight">Day View</h2>
-            <p className="text-muted-foreground">
-              Here&apos;s a list of your tasks for today
-            </p>
-          </div>
-          <div className="grid gap-6 w-3/4">
-            {tasks.map((task) => (
-              <Card key={task.id}>
-                <CardHeader className="flex-row pb-1">
-                  <Checkbox
-                    className="rounded-full mt-1 mr-2"
-                    checked={task.isDone}
-                    onCheckedChange={() => handleCheckboxChange(task.id)}
-                  />
-                  <CardTitle className={task.isDone ? 'line-through' : ''}>
-                    {task.title}
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="grid gap-1">
-                  <div className="flex items-start space-x-4 rounded-md bg-accent text-accent-foreground transition-all pt-2">
-                    <div className="space-y-1">
-                      <p className="text-sm text-muted-foreground">
-                        {task.description}
-                      </p>
-                    </div>
+      <div className='flex flex-col gap-5'>
+        <div className='flex flex-col gap-5'>
+          <H1 className="heading-primary">
+            Day
+            <span className="heading-secondary">View</span>
+          </H1>        
+          <H5>
+              List of today&apos;s task
+          </H5>
+        </div>
+
+        <div className="grid gap-6 w-3/4">
+
+          {tasks.map((task) => (
+            <Card key={task.id}>
+              <CardHeader className="flex-row pb-1">
+                <Checkbox
+                  className="rounded-full mt-1 mr-2"
+                  checked={task.isDone}
+                  onCheckedChange={() => handleCheckboxChange(task.id)}
+                />
+                <CardTitle className={task.isDone ? 'line-through' : ''}>
+                  {task.title}
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="grid gap-1">
+                <div className="flex items-start space-x-4 rounded-md bg-accent text-accent-foreground transition-all pt-2">
+                  <div className="space-y-1">
+                    <p className="text-sm text-muted-foreground">
+                      {task.description}
+                    </p>
                   </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+
+          <div className="w-1/2 flex gap-5 flex-col">
+            <Button className="self-start" onClick={toggleFormVisibility}>Add task</Button>
+            {isFormVisible && (
+              <Card>
+                <CardHeader className="pb-1"></CardHeader>
+                <CardContent className="grid gap-1">
+                  <TaskForm setTasks={setTasks} />
                 </CardContent>
               </Card>
-            ))}
-
-            <div className="w-1/2">
-              <Button onClick={toggleFormVisibility}>Add task</Button>
-              {isFormVisible && (
-                <Card>
-                  <CardHeader className="pb-1"></CardHeader>
-                  <CardContent className="grid gap-1">
-                    <TaskForm setTasks={setTasks} />
-                  </CardContent>
-                </Card>
-              )}
-            </div>
+            )}
           </div>
         </div>
       </div>

diff --git a/blotztask-ui/src/app/tasks/page.tsx b/blotztask-ui/src/app/tasks/page.tsx
@@ -55,7 +55,7 @@ export default async function TaskPage() {
       <Card className="mb-4 bg-yellow-50">
         <CardHeader>
           <CardTitle className="text-yellow-600">
-            <span className="info-icon">ℹ️</span>Notice
+            <span className="info-icon pr-2">ℹ️</span>Notice
           </CardTitle>
         </CardHeader>
         <CardContent>

diff --git a/blotztask-ui/src/app/test-connection/page.tsx b/blotztask-ui/src/app/test-connection/page.tsx
@@ -29,8 +29,8 @@ export default function Home() {
 
   return (
     <main className="flex flex-col gap-5 p-12 md:items-center md:p-28">
-      <H1>⚒️ Test Server Connection</H1>
-      <H3 className="text-lg font-light text-muted-foreground sm:text-xl">
+      <H1 className='heading-primary'>⚒️ Test Server Connection</H1>
+      <H3 className="text-lg font-light text-muted-foreground sm:text-xl heading-secondary">
         Click the button to fetch the current list of todo items.
       </H3>
       <div className="mt-16 flex flex-col gap-3 md:flex-row">

diff --git a/blotztask-ui/src/components/ui/button.tsx b/blotztask-ui/src/components/ui/button.tsx
@@ -10,7 +10,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+          'bg-primary-dark text-primary-light hover:bg-primary-dark/50 font-bold',
         destructive:
           'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:
@@ -21,7 +21,7 @@ const buttonVariants = cva(
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'h-9 px-4 py-2',
+        default: 'h-10 px-5 py-5',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
         icon: 'h-9 w-9',

diff --git a/blotztask-ui/src/styles/globals.css b/blotztask-ui/src/styles/globals.css
@@ -8,85 +8,12 @@
   Note: The styles for this gradient grid background is heavily inspired by the creator of this amazing site (https://dub.sh) – all credits go to them! 
 */
 
-/* This class is not in used
-.gradient {
-  height: fit-content;
-  z-index: 3;
-  width: 100%;
-  max-width: 640px;
-  background-image: radial-gradient(
-      at 27% 37%,
-      hsla(215, 98%, 61%, 1) 0px,
-      transparent 0%
-    ),
-    radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 1) 0px, transparent 50%),
-    radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 1) 0px, transparent 50%),
-    radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 1) 0px, transparent 50%),
-    radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 1) 0px, transparent 50%),
-    radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 1) 0px, transparent 50%),
-    radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 1) 0px, transparent 50%);
-  position: absolute;
-  content: "";
-  width: 100%;
-  height: 100%;
-  filter: blur(100px) saturate(150%);
-  top: 80px;
-  opacity: 0.15;
-} */
-
-/* Tailwind Styles */
-
-/* .app {
-  @apply relative z-10 flex justify-center items-center flex-col max-w-7xl mx-auto sm:px-16 px-6;
-} */
-
-/* .black_btn {
-  @apply rounded-full border border-blue-200 bg-blue-200 py-2 px-5 text-white transition-all hover:bg-blue-500 hover:border-blue-500 text-center text-sm font-inter flex items-center justify-center;
-} */
-
-/* .outline_btn {
-  @apply rounded-full border border-blue-600 bg-transparent py-1.5 px-5 border-blue-600 transition-all hover:bg-blue-500 hover:text-white text-center text-sm font-inter flex items-center justify-center;
-} */
-
-.gradient_green_blue_btn {
-  @apply rounded-full border border-transparent py-2 px-5 text-white transition-all text-center text-sm font-inter flex items-center justify-center shadow-md;
-  background: linear-gradient(135deg, #4caf50, #2196f3);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
-  transition: all 0.3s ease;
-}
-
-.gradient_green_blue_btn:hover {
-  background: linear-gradient(135deg, #2196f3, #4caf50); 
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
-}
-
-.inverse_gradient_green_blue_btn {
-  @apply rounded-full border border-transparent py-2 px-5 text-black transition-all text-center text-sm font-inter flex items-center justify-center shadow-md;
-  background: white; 
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
-  transition: all 0.3s ease;
-}
-
-.inverse_gradient_green_blue_btn:hover {
-  background: linear-gradient(135deg, #4caf50, #2196f3); 
-  color: white;
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
-}
-
-/* .head_text {
-  @apply mt-5 text-5xl font-extrabold leading-[1.15] text-black sm:text-6xl;
-} */
-
-/* .orange_gradient {
-  @apply bg-gradient-to-r from-amber-500 via-orange-600 to-yellow-500 bg-clip-text text-transparent;
-} */
-
-.green_gradient {
-  @apply bg-gradient-to-r from-green-400 to-green-500 bg-clip-text text-transparent;
+.heading-primary{
+  @apply font-display text-primary-dark
 }
 
-.blue_gradient {
-  @apply bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent;
+.heading-secondary{
+  @apply font-display text-secondary ;
 }
 
 /* .desc {