feat: add logo and favicon (#238)

This commit is contained in:
Guillaume 2025-06-09 16:30:03 +02:00 committed by GitHub
parent 0c87f3e6ec
commit e36193a8c0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 67 additions and 2 deletions

View File

@ -2,13 +2,13 @@ import {
CircleUser,
Globe2,
Lock,
PlaneTakeoff,
Server,
Settings,
Users,
} from 'lucide-react';
import type { ReactNode } from 'react';
import { NavLink, useSubmit } from 'react-router';
import Logo from '~/components/Logo';
import Menu from '~/components/Menu';
import { AuthSession } from '~/server/web/sessions';
import cn from '~/utils/cn';
@ -91,7 +91,7 @@ export default function Header(data: Props) {
>
<div className="container flex items-center justify-between py-4">
<div className="flex items-center gap-x-2">
<PlaneTakeoff />
<Logo />
<h1 className="text-2xl font-semibold">headplane</h1>
</div>
<div className="flex items-center gap-x-4">

10
app/components/Logo.tsx Normal file
View File

@ -0,0 +1,10 @@
import cn from '~/utils/cn';
import LogoSvg from '../../public/logo-light.svg';
export interface LogoProps {
className?: string;
}
export default function Logo({ className }: LogoProps) {
return <img alt="Logo" className={cn(className)} src={LogoSvg} />;
}

View File

@ -41,6 +41,7 @@ export function Layout({ children }: { readonly children: React.ReactNode }) {
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
<link rel="icon" href="favicon.ico" />
</head>
<body className="overscroll-none dark:bg-headplane-900 dark:text-headplane-50">
{children}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 73 KiB

14
public/logo-dark-bg.svg Normal file
View File

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 30 30">
<g transform="translate(-142.5 -229.5)">
<path d="M120 147.5h20a5 5 45 0 1 5 5v20a5 5 135 0 1-5 5h-20a5 5 45 0 1-5-5v-20a5 5 135 0 1 5-5" style="fill:#181717" transform="translate(27.5 82)"/>
<circle cx="150" cy="237" r="2.5" style="fill:#f7f5f4"/>
<circle cx="157.5" cy="237" r="2.5" style="fill:#444343"/>
<circle cx="165" cy="237" r="2.5" style="fill:#f7f5f4"/>
<circle cx="150" cy="244.5" r="2.5" style="fill:#f7f5f4"/>
<circle cx="157.5" cy="244.5" r="2.5" style="fill:#f7f5f4"/>
<circle cx="165" cy="244.5" r="2.5" style="fill:#f7f5f4"/>
<circle cx="150" cy="252" r="2.5" style="fill:#f7f5f4"/>
<circle cx="157.5" cy="252" r="2.5" style="fill:#444343"/>
<circle cx="165" cy="252" r="2.5" style="fill:#f7f5f4"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 901 B

13
public/logo-dark.svg Normal file
View File

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 30 30">
<g transform="translate(-37.5 -229.5)">
<circle cx="45" cy="237" r="2.5" style="fill:#1f1e1e"/>
<circle cx="52.5" cy="237" r="2.5" style="fill:#cdcccb"/>
<circle cx="60" cy="237" r="2.5" style="fill:#1f1e1e"/>
<circle cx="45" cy="244.5" r="2.5" style="fill:#1f1e1e"/>
<circle cx="52.5" cy="244.5" r="2.5" style="fill:#1f1e1e"/>
<circle cx="60" cy="244.5" r="2.5" style="fill:#1f1e1e"/>
<circle cx="45" cy="252" r="2.5" style="fill:#1f1e1e"/>
<circle cx="52.5" cy="252" r="2.5" style="fill:#cdcccb"/>
<circle cx="60" cy="252" r="2.5" style="fill:#1f1e1e"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 732 B

14
public/logo-light-bg.svg Normal file
View File

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 30 30">
<g transform="translate(-32.5 -240.587)">
<path d="M70 147.5h20a5 5 45 0 1 5 5v20a5 5 135 0 1-5 5H70a5 5 45 0 1-5-5v-20a5 5 135 0 1 5-5" style="fill:#f9f7f6" transform="translate(-32.5 93.087)"/>
<circle cx="40" cy="248.087" r="2.5" style="fill:#1f1e1e"/>
<circle cx="47.5" cy="248.087" r="2.5" style="fill:#cdcccb"/>
<circle cx="55" cy="248.087" r="2.5" style="fill:#1f1e1e"/>
<circle cx="40" cy="255.587" r="2.5" style="fill:#1f1e1e"/>
<circle cx="47.5" cy="255.587" r="2.5" style="fill:#1f1e1e"/>
<circle cx="55" cy="255.587" r="2.5" style="fill:#1f1e1e"/>
<circle cx="40" cy="263.087" r="2.5" style="fill:#1f1e1e"/>
<circle cx="47.5" cy="263.087" r="2.5" style="fill:#cdcccb"/>
<circle cx="55" cy="263.087" r="2.5" style="fill:#1f1e1e"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 926 B

13
public/logo-light.svg Normal file
View File

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 30 30">
<g transform="translate(-142.5 -229.5)">
<circle cx="150" cy="237" r="2.5" style="fill:#f7f5f4"/>
<circle cx="157.5" cy="237" r="2.5" style="fill:#444343"/>
<circle cx="165" cy="237" r="2.5" style="fill:#f7f5f4"/>
<circle cx="150" cy="244.5" r="2.5" style="fill:#f7f5f4"/>
<circle cx="157.5" cy="244.5" r="2.5" style="fill:#f7f5f4"/>
<circle cx="165" cy="244.5" r="2.5" style="fill:#f7f5f4"/>
<circle cx="150" cy="252" r="2.5" style="fill:#f7f5f4"/>
<circle cx="157.5" cy="252" r="2.5" style="fill:#444343"/>
<circle cx="165" cy="252" r="2.5" style="fill:#f7f5f4"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 742 B