feat: better logo

izadoesdev · izadoesdev · commit 58613fb5c752 · 2025-08-28T14:16:33.000+03:00
diff --git a/apps/dashboard/app/(auth)/layout.tsx b/apps/dashboard/app/(auth)/layout.tsx
@@ -1,5 +1,5 @@
 import { auth } from '@databuddy/auth';
-import { CaretLeftIcon, SpinnerIcon } from '@phosphor-icons/react';
+import { CaretLeftIcon, SpinnerIcon } from '@phosphor-icons/react/ssr';
 import { headers } from 'next/headers';
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
diff --git a/apps/dashboard/app/(auth)/register/page.tsx b/apps/dashboard/app/(auth)/register/page.tsx
@@ -2,15 +2,15 @@
 
 import { authClient } from '@databuddy/auth/client';
 import {
-	WarningCircleIcon,
-	CheckCircleIcon,
 	CaretLeftIcon,
+	CheckCircleIcon,
 	EyeIcon,
 	EyeSlashIcon,
+	GithubLogoIcon,
+	GoogleLogoIcon,
 	InfoIcon,
 	SpinnerIcon,
-	GoogleLogoIcon,
-	GithubLogoIcon,
+	WarningCircleIcon,
 } from '@phosphor-icons/react';
 import Link from 'next/link';
 import { useRouter, useSearchParams } from 'next/navigation';
@@ -222,7 +222,7 @@ function RegisterPageContent() {
 
 			<div className="flex flex-col space-y-3">
 				<Button
-					className="w-full bg-amber-500 text-white hover:bg-amber-600 text-sm sm:text-base"
+					className="w-full bg-amber-500 text-sm text-white hover:bg-amber-600 sm:text-base"
 					disabled={isLoading}
 					onClick={resendVerificationEmail}
 				>
@@ -233,14 +233,16 @@ function RegisterPageContent() {
 						</>
 					) : (
 						<>
-							<span className="hidden sm:inline">Resend verification email</span>
+							<span className="hidden sm:inline">
+								Resend verification email
+							</span>
 							<span className="sm:hidden">Resend email</span>
 						</>
 					)}
 				</Button>
 
 				<Button
-					className="w-full border-amber-200 text-amber-700 hover:bg-amber-50 text-sm sm:text-base"
+					className="w-full border-amber-200 text-amber-700 text-sm hover:bg-amber-50 sm:text-base"
 					onClick={() => setRegistrationStep('form')}
 					variant="outline"
 				>
@@ -262,7 +264,7 @@ function RegisterPageContent() {
 			</div>
 
 			<Button
-				className="w-full bg-green-500 text-white hover:bg-green-600 text-sm sm:text-base"
+				className="w-full bg-green-500 text-sm text-white hover:bg-green-600 sm:text-base"
 				onClick={() => router.push('/login')}
 			>
 				<span className="hidden sm:inline">Continue to login</span>
@@ -273,7 +275,7 @@ function RegisterPageContent() {
 
 	const renderFormContent = () => (
 		<div className="space-y-4">
-			<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 -mt-4">
+			<div className="-mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
 				<Button
 					className="flex h-11 w-full cursor-pointer items-center justify-center transition-all duration-200 hover:bg-primary/5"
 					disabled={isLoading}
@@ -315,7 +317,7 @@ function RegisterPageContent() {
 					</Label>
 					<Input
 						autoComplete="name"
-						className="h-11 bg-input border-none transition-all duration-200 focus:ring-2 focus:ring-primary/20 placeholder:text-muted-foreground/50"
+						className="h-11 border-none bg-input transition-all duration-200 placeholder:text-muted-foreground/50 focus:ring-2 focus:ring-primary/20"
 						disabled={isLoading}
 						id="name"
 						name="name"
@@ -333,7 +335,7 @@ function RegisterPageContent() {
 					</Label>
 					<Input
 						autoComplete="email"
-						className="h-11 bg-input border-none transition-all duration-200 focus:ring-2 focus:ring-primary/20 placeholder:text-muted-foreground/50"
+						className="h-11 border-none bg-input transition-all duration-200 placeholder:text-muted-foreground/50 focus:ring-2 focus:ring-primary/20"
 						disabled={isLoading}
 						id="email"
 						name="email"
@@ -366,7 +368,7 @@ function RegisterPageContent() {
 						<div className="relative">
 							<Input
 								autoComplete="new-password"
-								className="h-11 pr-10 bg-input border-none transition-all duration-200 focus:ring-2 focus:ring-primary/20 placeholder:text-muted-foreground/50"
+								className="h-11 border-none bg-input pr-10 transition-all duration-200 placeholder:text-muted-foreground/50 focus:ring-2 focus:ring-primary/20"
 								disabled={isLoading}
 								id="password"
 								minLength={8}
@@ -404,7 +406,7 @@ function RegisterPageContent() {
 						<div className="relative">
 							<Input
 								autoComplete="new-password"
-								className="h-11 pr-10 bg-input border-none transition-all duration-200 focus:ring-2 focus:ring-primary/20 placeholder:text-muted-foreground/50"
+								className="h-11 border-none bg-input pr-10 transition-all duration-200 placeholder:text-muted-foreground/50 focus:ring-2 focus:ring-primary/20"
 								disabled={isLoading}
 								id="confirmPassword"
 								minLength={8}
@@ -416,7 +418,9 @@ function RegisterPageContent() {
 								value={formData.confirmPassword}
 							/>
 							<Button
-								aria-label={showConfirmPassword ? 'Hide password' : 'Show password'}
+								aria-label={
+									showConfirmPassword ? 'Hide password' : 'Show password'
+								}
 								className="absolute top-0 right-0 h-full px-3 text-muted-foreground hover:text-foreground"
 								onClick={() => setShowConfirmPassword(!showConfirmPassword)}
 								size="sm"
@@ -444,29 +448,29 @@ function RegisterPageContent() {
 					</div>
 				</VisuallyHidden>
 
-				<div className="flex sm:flex-row items-center gap-2 sm:items-center space-y-2 sm:space-y-0 sm:space-x-2">
+				<div className="flex items-center gap-2 space-y-2 sm:flex-row sm:items-center sm:space-x-2 sm:space-y-0">
 					<Checkbox
 						checked={acceptTerms}
-						className="mt-1 sm:mt-0 cursor-pointer data-[state=unchecked]:bg-input data-[state=checked]:border-primary data-[state=checked]:bg-primary"
+						className="mt-1 cursor-pointer data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=unchecked]:bg-input sm:mt-0"
 						disabled={isLoading}
 						id="terms"
 						onCheckedChange={(checked) => setAcceptTerms(checked as boolean)}
 					/>
 					<Label
-						className="text-muted-foreground text-xs leading-tight sm:text-sm tracking-tighter"
+						className="text-muted-foreground text-xs leading-tight tracking-tighter sm:text-sm"
 						htmlFor="terms"
 					>
 						I agree to the{''}
 						<Link
-							className="font-medium text-primary hover:text-primary/80 text-xs sm:text-sm tracking-tighter"
+							className="font-medium text-primary text-xs tracking-tighter hover:text-primary/80 sm:text-sm"
 							href="https://www.databuddy.cc/terms"
 							target="_blank"
 						>
 							Terms of Service
 						</Link>
 						{''}and{''}
 						<Link
-							className="font-medium text-primary hover:text-primary/80 text-xs sm:text-sm tracking-tighter"
+							className="font-medium text-primary text-xs tracking-tighter hover:text-primary/80 sm:text-sm"
 							href="https://www.databuddy.cc/privacy"
 							target="_blank"
 						>
@@ -476,7 +480,7 @@ function RegisterPageContent() {
 				</div>
 
 				<Button
-					className="hover:-translate-y-0.5 relative h-11 w-full overflow-hidden shadow transition-all duration-300 hover:shadow-lg hover:shadow-primary/20 text-sm sm:text-base"
+					className="hover:-translate-y-0.5 relative h-11 w-full overflow-hidden text-sm shadow transition-all duration-300 hover:shadow-lg hover:shadow-primary/20 sm:text-base"
 					disabled={isLoading}
 					type="submit"
 				>
diff --git a/apps/dashboard/components/layout/logo.tsx b/apps/dashboard/components/layout/logo.tsx
@@ -1,25 +1,71 @@
-import { Geist_Mono } from 'next/font/google';
 import Link from 'next/link';
 
-const geistMono = Geist_Mono({
-	subsets: ['latin'],
-	weight: ['400', '500', '600', '700'],
-	variable: '--font-geist-mono',
-});
+const logo = (height: number, width: number) => (
+	<svg
+		fill="none"
+		height={height}
+		viewBox="0 0 186 29"
+		width={width}
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<title>Databuddy</title>
+		<path
+			clip-rule="evenodd"
+			d="M9.66667 9.66667H14.5V14.5H9.66667V9.66667ZM14.5 14.5H19.3333V19.3333H14.5V14.5Z"
+			fill="white"
+			fill-rule="evenodd"
+		/>
+		<path d="M29 4.83333H24.1667V24.1667H29V4.83333Z" fill="white" />
+		<path
+			clip-rule="evenodd"
+			d="M0 0H24.1667V4.83333H4.83333V24.1667H24.1667V29H0V0Z"
+			fill="white"
+			fill-rule="evenodd"
+		/>
+		<path
+			d="M51.2349 6.67191C56.4323 6.67191 59.3299 9.61556 59.3299 14.859C59.3299 20.0793 56.4783 23 51.3729 23H45.8535V6.67191H51.2349ZM48.7512 20.4473H51.2349C54.6845 20.4473 56.3633 18.6075 56.3633 14.859C56.3633 11.0414 54.6845 9.22461 51.2349 9.22461H48.7512V20.4473Z"
+			fill="white"
+		/>
+		<path
+			d="M60.9523 23L66.8396 6.67191H70.2892L76.1766 23H73.1869L71.8301 19.0445H65.2988L63.942 23H60.9523ZM66.1727 16.5378H70.9562L68.5644 9.54657L66.1727 16.5378Z"
+			fill="white"
+		/>
+		<path
+			d="M88.6246 6.67191V9.22461H83.6802V23H80.7825V9.22461H75.8151V6.67191H88.6246Z"
+			fill="white"
+		/>
+		<path
+			d="M88.294 23L94.1813 6.67191H97.6309L103.518 23H100.529L99.1717 19.0445H92.6405L91.2836 23H88.294ZM93.5144 16.5378H98.2978L95.9061 9.54657L93.5144 16.5378Z"
+			fill="white"
+		/>
+		<path
+			d="M106.264 23V6.67191H112.082C116.291 6.67191 118.383 8.12074 118.383 11.2024C118.383 13.1112 117.21 14.307 115.233 14.537C117.67 14.79 119.073 16.1698 119.073 18.3775C119.073 21.3672 116.934 23 113.002 23H106.264ZM109.161 20.4933H113.048C114.957 20.4933 116.107 19.7114 116.107 18.1936C116.107 16.6757 114.957 15.8478 113.048 15.8478H109.161V20.4933ZM109.161 13.5251H112.243C114.244 13.5251 115.417 12.7892 115.417 11.3634C115.417 9.86853 114.313 9.15562 112.243 9.15562H109.161V13.5251Z"
+			fill="white"
+		/>
+		<path
+			d="M135.57 17.1817C135.57 20.9762 133.063 23.368 129.062 23.368C125.06 23.368 122.577 20.9762 122.577 17.1817V6.64891H125.474V17.1817C125.474 19.5274 126.785 20.8153 129.062 20.8153C131.361 20.8153 132.672 19.5274 132.672 17.1817V6.64891H135.57V17.1817Z"
+			fill="white"
+		/>
+		<path
+			d="M145.05 6.67191C150.248 6.67191 153.146 9.61556 153.146 14.859C153.146 20.0793 150.294 23 145.188 23H139.669V6.67191H145.05ZM142.567 20.4473H145.05C148.5 20.4473 150.179 18.6075 150.179 14.859C150.179 11.0414 148.5 9.22461 145.05 9.22461H142.567V20.4473Z"
+			fill="white"
+		/>
+		<path
+			d="M161.821 6.67191C167.018 6.67191 169.916 9.61556 169.916 14.859C169.916 20.0793 167.064 23 161.959 23H156.439V6.67191H161.821ZM159.337 20.4473H161.821C165.27 20.4473 166.949 18.6075 166.949 14.859C166.949 11.0414 165.27 9.22461 161.821 9.22461H159.337V20.4473Z"
+			fill="white"
+		/>
+		<path
+			d="M171.336 6.67191H174.532L178.442 13.6631L182.352 6.67191H185.525L179.891 16.5148V23H176.993V16.5148L171.336 6.67191Z"
+			fill="white"
+		/>
+	</svg>
+);
 
 export function Logo() {
 	return (
 		<Link className="flex items-center gap-3" href="/">
-			<div className="relative flex-shrink-0 transition-transform duration-200">
-				<LogoSVG height={24} width={24} />
-			</div>
-			<div className="flex items-center">
-				<h1
-					className={`
-          ${geistMono.variable} select-none font-semibold text-foreground leading-none tracking-wider transition-colors duration-200 `}
-				>
-					DATABUDDY
-				</h1>
+			<div className="relative flex-shrink-0 scale-150 not-dark:brightness-0 transition-transform duration-200">
+				{logo(24, 240)}
 			</div>
 		</Link>
 	);
