Match server branding to logo

DorkNet.Server/site/src/components/BrandMark.tsx

@@ -0,0 +1,9 @@
+import logoUrl from '../assets/dorknet.svg';
+
+export function BrandMark({ className = 'size-8' }: { className?: string }) {
+  return (
+    <span className={`inline-flex shrink-0 items-center justify-center rounded-md bg-ink-950 ring-1 ring-brand-300/30 shadow-lg shadow-brand-900/30 ${className}`}>
+      <img src={logoUrl} alt="" className="h-full w-full object-contain p-0.5" />
+    </span>
+  );
+}

DorkNet.Server/site/src/components/Header.tsx

@@ -1,5 +1,6 @@
 import { NavLink, Link, useLocation, useNavigate } from 'react-router-dom';
 import { useEffect, useRef, useState } from 'react';
+import { BrandMark } from './BrandMark';
 
 const NAV = [
   { to: '/', label: 'Home', exact: true },
@@ -30,8 +31,8 @@ export function Header() {
     <header className="sticky top-0 z-40 border-b border-ink-800 bg-ink-950/85 backdrop-blur">
       <div className="mx-auto max-w-6xl flex items-center gap-4 px-4 sm:px-6 py-3">
         <Link to="/" className="flex items-center gap-2 shrink-0">
-          <span className="inline-block size-6 rounded-md bg-gradient-to-br from-brand-400 to-brand-700 shadow-inner" />
-          <span className="font-semibold text-ink-50 tracking-tight">DorkNet</span>
+          <BrandMark className="size-7" />
+          <span className="font-semibold text-ink-50">DorkNet</span>
         </Link>
 
         <nav className="hidden md:flex items-center gap-1 ml-2">