From 4af4d603bea9e9c9bf19a0f9f6f83cc208c9fefd Mon Sep 17 00:00:00 2001
From: Alan Daniel <stylesshjs@gmail.com>
Date: Tue, 7 Apr 2026 14:52:35 -0400
Subject: [PATCH] Add temporary shared logo

---
 .../src/routes/_protected/dashboard.tsx       | 13 ++++++++-
 apps/dashboard/src/routes/index.tsx           | 22 ++++++++++++---
 apps/dashboard/src/routes/login.tsx           | 14 ++++++++--
 packages/ui/src/components/logo.tsx           | 28 +++++++++++++++++++
 4 files changed, 70 insertions(+), 7 deletions(-)
 create mode 100644 packages/ui/src/components/logo.tsx

diff --git a/apps/dashboard/src/routes/_protected/dashboard.tsx b/apps/dashboard/src/routes/_protected/dashboard.tsx
index 914ad71..03159a8 100644
--- a/apps/dashboard/src/routes/_protected/dashboard.tsx
+++ b/apps/dashboard/src/routes/_protected/dashboard.tsx
@@ -11,6 +11,7 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@quickhub/ui/components/card";
+import { Logo } from "@quickhub/ui/components/logo";
 import { createFileRoute } from "@tanstack/react-router";
 import { signOut } from "#/lib/auth.client";
 
@@ -29,8 +30,18 @@ function DashboardPage() {
 		.toUpperCase();
 
 	return (
-		<main className="min-h-screen bg-[linear-gradient(180deg,_color-mix(in_oklch,_var(--color-secondary)_55%,_transparent)_0%,_transparent_38%)] p-4 sm:p-8">
+		<main className="min-h-dvh bg-[linear-gradient(180deg,_color-mix(in_oklch,_var(--color-secondary)_55%,_transparent)_0%,_transparent_38%)] p-4 sm:p-8">
 			<div className="mx-auto grid max-w-5xl gap-6">
+				<div className="flex items-center gap-3 px-1">
+					<Logo className="size-8" />
+					<div>
+						<p className="text-xs font-medium tracking-[0.28em] text-muted-foreground uppercase">
+							QuickHub
+						</p>
+						<p className="text-sm text-muted-foreground">Workspace</p>
+					</div>
+				</div>
+
 				<Card className="border-border/70 bg-background/95 shadow-sm">
 					<CardHeader className="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
 						<div className="flex items-center gap-4">
diff --git a/apps/dashboard/src/routes/index.tsx b/apps/dashboard/src/routes/index.tsx
index 8f5d594..559d987 100644
--- a/apps/dashboard/src/routes/index.tsx
+++ b/apps/dashboard/src/routes/index.tsx
@@ -7,6 +7,7 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@quickhub/ui/components/card";
+import { Logo } from "@quickhub/ui/components/logo";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { getSession } from "#/lib/auth.functions";
 import { getUserRepos } from "#/lib/github.functions";
@@ -31,14 +32,27 @@ function Home() {
 	const ctaLink = session ? "/dashboard" : "/login";
 
 	return (
-		<main className="min-h-screen bg-[radial-gradient(circle_at_top,_color-mix(in_oklch,_var(--color-primary)_6%,_transparent),_transparent_48%),linear-gradient(180deg,_color-mix(in_oklch,_var(--color-secondary)_65%,_white)_0%,_transparent_45%)]">
+		<main className="min-h-dvh bg-[radial-gradient(circle_at_top,_color-mix(in_oklch,_var(--color-primary)_6%,_transparent),_transparent_48%),linear-gradient(180deg,_color-mix(in_oklch,_var(--color-secondary)_65%,_white)_0%,_transparent_45%)]">
 			<div className="mx-auto flex w-full max-w-6xl flex-col gap-10 px-4 py-10 sm:px-6 lg:px-8">
 				<section className="grid gap-6 lg:grid-cols-[minmax(0,1.2fr)_minmax(320px,420px)]">
 					<Card className="border-border/70 bg-background/90 shadow-sm backdrop-blur">
 						<CardHeader className="gap-5">
-							<Badge variant="outline" className="w-fit">
-								Circle base imported
-							</Badge>
+							<div className="flex flex-wrap items-center justify-between gap-3">
+								<div className="flex items-center gap-3">
+									<Logo />
+									<div>
+										<p className="text-xs font-medium tracking-[0.28em] text-muted-foreground uppercase">
+											QuickHub
+										</p>
+										<p className="text-sm text-muted-foreground">
+											Placeholder logo
+										</p>
+									</div>
+								</div>
+								<Badge variant="outline" className="w-fit">
+									Shared UI baseline
+								</Badge>
+							</div>
 							<div className="space-y-3">
 								<CardTitle className="text-3xl tracking-tight sm:text-4xl">
 									QuickHub, now on a shared UI foundation.
diff --git a/apps/dashboard/src/routes/login.tsx b/apps/dashboard/src/routes/login.tsx
index 7bfdc72..fca9a33 100644
--- a/apps/dashboard/src/routes/login.tsx
+++ b/apps/dashboard/src/routes/login.tsx
@@ -6,6 +6,7 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@quickhub/ui/components/card";
+import { Logo } from "@quickhub/ui/components/logo";
 import { createFileRoute, redirect } from "@tanstack/react-router";
 import { signIn } from "#/lib/auth.client";
 import { getSession } from "#/lib/auth.functions";
@@ -20,9 +21,18 @@ export const Route = createFileRoute("/login")({
 
 function LoginPage() {
 	return (
-		<main className="flex min-h-screen items-center justify-center bg-[radial-gradient(circle_at_top,_color-mix(in_oklch,_var(--color-primary)_6%,_transparent),_transparent_48%),linear-gradient(180deg,_color-mix(in_oklch,_var(--color-secondary)_65%,_white)_0%,_transparent_45%)] px-4">
+		<main className="flex min-h-dvh items-center justify-center bg-[radial-gradient(circle_at_top,_color-mix(in_oklch,_var(--color-primary)_6%,_transparent),_transparent_48%),linear-gradient(180deg,_color-mix(in_oklch,_var(--color-secondary)_65%,_white)_0%,_transparent_45%)] px-4">
 			<Card className="w-full max-w-md border-border/70 bg-background/95 shadow-sm backdrop-blur">
-				<CardHeader className="text-center">
+				<CardHeader className="gap-5 text-center">
+					<div className="mx-auto flex items-center gap-3">
+						<Logo />
+						<div className="text-left">
+							<p className="text-xs font-medium tracking-[0.28em] text-muted-foreground uppercase">
+								QuickHub
+							</p>
+							<p className="text-sm text-muted-foreground">Placeholder logo</p>
+						</div>
+					</div>
 					<CardTitle className="text-2xl tracking-tight sm:text-3xl">
 						Sign in to QuickHub
 					</CardTitle>
diff --git a/packages/ui/src/components/logo.tsx b/packages/ui/src/components/logo.tsx
new file mode 100644
index 0000000..0fbc8bf
--- /dev/null
+++ b/packages/ui/src/components/logo.tsx
@@ -0,0 +1,28 @@
+import type * as React from "react";
+
+import { cn } from "../lib/utils";
+
+function Logo({ className, ...props }: React.ComponentProps<"svg">) {
+	return (
+		<svg
+			data-slot="logo"
+			viewBox="0 0 40 40"
+			aria-hidden="true"
+			className={cn("size-10 shrink-0 text-foreground", className)}
+			{...props}
+		>
+			<path
+				className="fill-current"
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M20 0C27.4768 0 31.2154 -0.000204921 34 1.60742C35.8242 2.66064 37.3394 4.17577 38.3926 6C40.0002 8.7846 40 12.5232 40 20C40 27.4768 40.0002 31.2154 38.3926 34C37.3394 35.8242 35.8242 37.3394 34 38.3926C31.2154 40.0002 27.4768 40 20 40C12.5232 40 8.7846 40.0002 6 38.3926C4.17577 37.3394 2.66064 35.8242 1.60742 34C-0.000204921 31.2154 0 27.4768 0 20C0 12.5232 -0.000204921 8.7846 1.60742 6C2.66064 4.17577 4.17577 2.66064 6 1.60742C8.7846 -0.000204921 12.5232 0 20 0ZM22 4C13.1634 4 6 11.1634 6 20C6 28.8366 13.1634 36 22 36C30.8366 36 38 28.8366 38 20C38 11.1634 30.8366 4 22 4Z"
+			/>
+			<path
+				className="fill-current"
+				d="M36 20C36 25.5228 31.5228 30 26 30C20.4772 30 16 25.5228 16 20C16 14.4772 20.4772 10 26 10C31.5228 10 36 14.4772 36 20Z"
+			/>
+		</svg>
+	);
+}
+
+export { Logo };