Dashboard theming and added background image

src/app/dashboard/__tests__/page.test.tsx

@@ -8,6 +8,13 @@ vi.mock("next/navigation", () => ({
   redirect: vi.fn(),
 }));
 
+// Mock next/font/google
+vi.mock("next/font/google", () => ({
+  Cinzel: () => ({
+    className: "mocked-cinzel-font",
+  }),
+}));
+
 // Mock Supabase server client to return a fake authenticated user
 vi.mock("../../../lib/supabase/server", () => ({
   createClient: vi.fn(async () => ({
@@ -36,16 +43,10 @@ describe("Dashboard Page Tests", () => {
     expect(screen.getByText("Dashboard")).toBeInTheDocument();
   });
 
-  it("should display the user email", async () => {
-    const page = await DashboardPage();
-    render(page);
-    expect(screen.getByText("[email protected]")).toBeInTheDocument();
-  });
-
   it("should render the home link", async () => {
     const page = await DashboardPage();
     render(page);
-    expect(screen.getByRole("link", { name: /Go home/i })).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: /Home/i })).toBeInTheDocument();
   });
 
   it("should render the logout button", async () => {
@@ -57,6 +58,12 @@ describe("Dashboard Page Tests", () => {
   it("should render the tutorial link", async () => {
     const page = await DashboardPage();
     render(page);
-    expect(screen.getByRole("link", { name: /Hello World Tutorial/i })).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: /Hello World/i })).toBeInTheDocument();
+  });
+
+  it("should render the profile button", async () => {
+    const page = await DashboardPage();
+    render(page);
+    expect(screen.getByRole("link", { name: /Profile/i })).toBeInTheDocument();
   });
 });

src/app/dashboard/page.tsx

@@ -1,6 +1,13 @@
 import { redirect } from "next/navigation";
 import Link from "next/link";
 import { createClient as createServerClient } from "../../lib/supabase/server";
+import { Cinzel } from 'next/font/google'; // Import Cinzel font
+
+//font for words
+const cinzel = Cinzel({
+  subsets: ["latin"],
+  weight: ["400", "700"],
+});
 
 async function logout() {
   "use server";
@@ -19,30 +26,51 @@ export default async function DashboardPage() {
     redirect("/login");
   }
 
+  const celestialButtonClasses = "btn border-2 border-cyan-400 text-cyan-400 bg-transparent hover:bg-cyan-900/50 hover:border-cyan-200 hover:text-cyan-200 shadow-lg shadow-cyan-500/50 transition duration-300 ease-in-out w-full";
+  const celestialButtonNoFullWidth = "btn border-2 border-cyan-400 text-cyan-400 bg-transparent hover:bg-cyan-900/50 hover:border-cyan-200 hover:text-cyan-200 shadow-lg shadow-cyan-500/50 transition duration-300 ease-in-out";
+
+
   return (
-    <main className="bg-white min-h-dvh p-8">
-      <div className="flex items-center gap-4">
-        <h1 className="text-black text-2xl font-semibold">Dashboard</h1>
-        <Link href="/" className="btn btn-neutral btn-outline" aria-label="Go home">
-          <span>Home</span>
-        </Link>
-        <Link href="/profile" className="btn btn-neutral btn-outline" aria-label="Go to profile">
-          <span>Profile</span>
-        </Link>
-        <form action={logout}>
-          <button type="submit" className="btn btn-neutral btn-outline">
-            <span>Log out</span>
-          </button>
-        </form>
-      </div>
+    <main
+      className={`relative min-h-dvh p-8 text-white ${cinzel.className}`}
+      style={{
+        backgroundImage: "url('/dashboard.png')",
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    >
+      <div className="flex justify-between items-start w-full"> 
+
+        <div className="flex flex-col gap-4 p-0 w-fit"> 
+          <h1 className="text-white text-5xl font-bold tracking-wider mb-4">
+            Dashboard
+          </h1>
+          <div className="flex flex-col gap-4 w-32"> 
+            <Link href="/" className={celestialButtonClasses} aria-label="Go home">
+              <span>Home</span>
+            </Link>
+          </div>
+        </div>
 
-      <p className="my-4 text-neutral-600">
-        You&apos;re logged in as: <span className="font-bold">{user.email}</span>.
-      </p>
+        {/* profile & logout */}
+        <div className="flex items-center gap-4 p-0 w-fit"> 
+          <Link href="/profile" className={celestialButtonNoFullWidth} aria-label="Go to profile">
+            <span>Profile</span>
+          </Link>
+          <form action={logout}>
+            <button type="submit" className={celestialButtonNoFullWidth}>
+              <span>Log out</span>
+            </button>
+          </form>
+        </div>
+      </div>
 
-      <Link href="tutorial-hello-world" className="btn btn-neutral btn-outline">
-        Hello World Tutorial
-      </Link>
+      {/* tutorials */}
+        <div className="absolute bottom-16 left-1/2 -translate-x-1/2">
+          <Link href="tutorial-hello-world" className={celestialButtonNoFullWidth}>
+            Hello World
+          </Link>
+        </div>
     </main>
   );
-}
+}