Use project logo in header

frontend/components/dashboard/Dashboard.module.css

@@ -338,43 +338,26 @@
 }
 
 .root :global(.brand-mark) {
-  width: 28px;
+  width: 30px;
-  height: 28px;
+  height: 30px;
-  border-radius: 9px;
+  flex-shrink: 0;
-  border: 1px solid rgba(34, 211, 238, 0.28);
+  border-radius: 10px;
-  background:
+  border: 1px solid rgba(34, 211, 238, 0.22);
-    radial-gradient(
+  background: rgba(8, 15, 28, 0.78);
-      circle at 30% 30%,
-      rgba(34, 211, 238, 0.24),
-      transparent 52%
-    ),
-    linear-gradient(180deg, rgba(11, 22, 40, 0.96), rgba(6, 13, 24, 0.96));
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.08);
+  overflow: hidden;
+  box-shadow:
+    inset 0 0 0 1px rgba(148, 163, 184, 0.08),
+    0 0 20px rgba(34, 211, 238, 0.12);
 }
 
-.root :global(.brand-mark i) {
+.root :global(.brand-mark img) {
-  width: 13px;
+  width: 24px;
-  height: 13px;
+  height: 24px;
-  border-radius: 999px;
+  display: block;
-  border: 2px solid #22d3ee;
+  object-fit: contain;
-  position: relative;
-}
-
-.root :global(.brand-mark i::before),
-.root :global(.brand-mark i::after) {
-  content: "";
-  position: absolute;
-  inset: -4px;
-  border-radius: 999px;
-  border: 1px solid rgba(34, 211, 238, 0.34);
-}
-
-.root :global(.brand-mark i::after) {
-  inset: -8px;
-  border-color: rgba(59, 130, 246, 0.18);
 }
 
 .root :global(.brand h1) {
@@ -2472,6 +2455,14 @@
   box-shadow: 0 12px 34px rgba(31, 64, 104, 0.08);
 }
 
+:global(html.light) .root :global(.brand-mark) {
+  background: rgba(255, 255, 255, 0.82);
+  border-color: rgba(14, 165, 233, 0.24);
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
+    0 10px 24px rgba(31, 64, 104, 0.12);
+}
+
 :global(html.light) .root :global(.city-list),
 :global(html.light) .root :global(.home-intelligence-panel),
 :global(html.light) .root :global(.home-opportunity-strip) {

frontend/components/dashboard/HeaderBar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import Image from "next/image";
 import { usePathname } from "next/navigation";
 import clsx from "clsx";
 import {
@@ -146,7 +147,7 @@ export function HeaderBar({
     <header className="header">
       <div className="brand">
         <span className="brand-mark" aria-hidden="true">
-          <i />
+          <Image src="/favicon-32x32.png" alt="" width={24} height={24} priority />
         </span>
         <h1>PolyWeather</h1>
         <span className="subtitle">{t("header.subtitle")}</span>