feat(ui): align onboarding uploads with hi-fi designs

app/ui/src/app/components/ShellNavbar.tsx

@@ -1,7 +1,6 @@
 // app/components/ShellNavbar.tsx
 "use client";
 
-import Link from "next/link";
 import { usePathname } from "next/navigation";
 
 /**
@@ -11,14 +10,14 @@ import { usePathname } from "next/navigation";
  */
 export default function ShellNavbar() {
   const pathname = usePathname();
-  const isLandingPage = pathname === "/";
+  const usesWhiteOnboardingBackground =
+    pathname === "/" || pathname === "/welcome";
   const brandStyles = {
-    fontSize: "12px",
+    fontFamily: "var(--font-manrope), Arial, Helvetica, sans-serif",
+    fontSize: "20px",
     fontWeight: 700,
-    letterSpacing: "0.08em",
-    color: "#111",
-    textTransform: "uppercase" as const,
-    fontFamily: "inherit",
+    lineHeight: "28px",
+    color: "var(--edit-text-primary)",
     whiteSpace: "nowrap" as const,
     overflow: "hidden",
     textOverflow: "ellipsis",
@@ -28,31 +27,24 @@ export default function ShellNavbar() {
   return (
     <header
       style={{
-        height: "48px",
-        background: "#ffffff",
-        borderBottom: "1px solid #e8e8e8",
+        height: "68px",
+        background: usesWhiteOnboardingBackground
+          ? "#ffffff"
+          : "var(--edit-stone-50)",
+        borderBottom: usesWhiteOnboardingBackground
+          ? "1px solid rgba(0, 0, 0, 0.08)"
+          : "none",
         display: "flex",
         alignItems: "center",
-        paddingLeft: "20px",
-        paddingRight: "20px",
+        padding: "16px",
         position: "sticky",
         top: 0,
         zIndex: 50,
         minWidth: 0,
         overflow: "hidden",
       }}
     >
-      {isLandingPage ? (
-        <span style={brandStyles}>Delivery Optimizer</span>
-      ) : (
-        <Link
-          href="/"
-          aria-label="Return to the Delivery Optimizer landing page"
-          style={{ ...brandStyles, textDecoration: "none" }}
-        >
-          Delivery Optimizer
-        </Link>
-      )}
+      <span style={brandStyles}>Delivery Optimizer</span>
     </header>
   );
 }

app/ui/src/app/components/navbar/MobileNavbar.tsx

@@ -34,7 +34,7 @@ export default function MobileNavbar({ onMenuClick }: MobileNavbarProps) {
             />
           </svg>
         </button>
-        <span className={MOBILE_NAVBAR_TITLE}>DELIVERY OPTIMIZER</span>
+        <span className={MOBILE_NAVBAR_TITLE}>Delivery Optimizer</span>
       </div>
     </header>
   );

app/ui/src/app/components/navbar/Navbar.tsx

@@ -13,7 +13,7 @@ type NavbarProps = {
 export default function Navbar({ onSave }: NavbarProps) {
   return (
     <header className={NAVBAR_V2_ROOT}>
-      <span className={NAVBAR_V2_LOGO}>DELIVERY OPTIMIZER</span>
+      <span className={NAVBAR_V2_LOGO}>Delivery Optimizer</span>
       <button className={NAVBAR_V2_BTN_SAVE} onClick={onSave} type="button">
         Save
       </button>

app/ui/src/app/edit/components/address/CSVUploadOverlay.tsx

@@ -201,29 +201,31 @@ function StepColumnMapper({
                       onChange={(e) =>
                         onMappingChange(header, e.target.value as MappableField)
                       }
-                      className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                      className="absolute inset-0 w-full h-full appearance-none bg-transparent px-3 pr-10 text-[14px] leading-[1.5] text-[var(--edit-text-primary)] cursor-pointer truncate"
                     >
-                      <option value="">Select</option>
+                      <option
+                        value=""
+                        className="bg-[var(--edit-bg-primary)] text-[var(--edit-text-primary)]"
+                      >
+                        Select
+                      </option>
                       {(
                         Object.keys(FIELD_LABELS) as Exclude<
                           MappableField,
                           ""
                         >[]
                       ).map((f) => (
-                        <option key={f} value={f}>
+                        <option
+                          key={f}
+                          value={f}
+                          className="bg-[var(--edit-bg-primary)] text-[var(--edit-text-primary)]"
+                        >
                           {FIELD_LABELS[f]}
                         </option>
                       ))}
                     </select>
-                    <span className="flex-1 px-3 text-[14px] leading-[1.5] pointer-events-none truncate text-[var(--edit-text-primary)]">
-                      {mapping[header]
-                        ? FIELD_LABELS[
-                            mapping[header] as Exclude<MappableField, "">
-                          ]
-                        : "Select"}
-                    </span>
                     <svg
-                      className="shrink-0 mr-3 pointer-events-none rotate-90"
+                      className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none rotate-90"
                       width="16"
                       height="16"
                       viewBox="0 0 16 16"

app/ui/src/app/edit/formStyles.v2.ts

@@ -43,7 +43,7 @@ export const MOBILE_NAVBAR_MENU_BTN =
   "size-6 shrink-0 cursor-pointer flex items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--edit-teal-300)] rounded-[4px]";
 
 export const MOBILE_NAVBAR_TITLE =
-  "font-bold text-[20px] leading-[28px] text-[var(--edit-text-primary)] whitespace-nowrap";
+  "font-sans-manrope font-bold text-[20px] leading-[28px] text-[var(--edit-text-primary)] whitespace-nowrap";
 
 // ── MOBILE Sidebar (Figma 7472:3661) ─────────────────────────────────────────
 
@@ -67,7 +67,7 @@ export const MOBILE_SIDEBAR_CLOSE_BTN =
   "size-6 shrink-0 cursor-pointer flex items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--edit-teal-300)] rounded-[4px]";
 
 export const MOBILE_SIDEBAR_HEADER_TITLE =
-  "font-bold text-[20px] leading-[28px] text-[var(--edit-text-primary)] whitespace-nowrap";
+  "font-sans-manrope font-bold text-[20px] leading-[28px] text-[var(--edit-text-primary)] whitespace-nowrap";
 
 export const MOBILE_SIDEBAR_NAV = "flex flex-col gap-4 px-4 mt-[23px]";
 
@@ -99,7 +99,7 @@ export const ADDRESS_CARD_MOBILE_ROOT =
 export const ADDRESS_LIST_MOBILE_WRAP = "lg:hidden flex flex-col gap-4";
 
 export const NAVBAR_V2_LOGO =
-  "font-bold text-[20px] leading-7 text-[var(--edit-text-primary)] whitespace-nowrap";
+  "font-sans-manrope font-bold text-[20px] leading-7 text-[var(--edit-text-primary)] whitespace-nowrap";
 
 export const NAVBAR_V2_ACTIONS = "flex items-center gap-2";
 

app/ui/src/app/globals.css

@@ -95,7 +95,7 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-manrope), Arial, Helvetica, sans-serif;
 }
 
 /* Native <select> chevrons — shared by edit address/vehicle (avoids fragile Tailwind arbitrary URLs). */

app/ui/src/app/layout.tsx

@@ -1,8 +1,28 @@
 import type { Metadata, Viewport } from "next";
+import { Geist, Geist_Mono, Manrope } from "next/font/google";
 import ServiceWorkerRegistration from "@/app/components/ServiceWorkerRegistration";
 import "./globals.css";
 import FeedbackLauncher from "./components/FeedbackLauncher";
 
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+const manrope = Manrope({
+  variable: "--font-manrope",
+  subsets: ["latin"],
+});
+
+type RootLayoutProps = {
+  children: React.ReactNode;
+};
+
 export const metadata: Metadata = {
   title: {
     default: "Delivery Route Optimizer",
@@ -20,14 +40,12 @@ export const viewport: Viewport = {
   themeColor: "#111827",
 };
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html lang="en">
-      <body className="antialiased">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} ${manrope.variable} antialiased`}
+      >
         <ServiceWorkerRegistration />
         {children}
         <FeedbackLauncher />

app/ui/src/app/page.tsx

@@ -35,7 +35,6 @@ export default function LandingPage() {
           position: relative;
           z-index: 10;
           background: #ffffff;
-          border-bottom: 1px solid rgba(0,0,0,0.08);
         }
 
         .landing-content {

app/ui/src/app/results/components/MobileResultsNavbar.tsx

@@ -4,12 +4,12 @@ import {
   MOBILE_NAVBAR_LEFT_GROUP,
   MOBILE_NAVBAR_MENU_BTN,
   MOBILE_NAVBAR_ROOT,
-} from "../../edit/formStyles.v2";
+  MOBILE_NAVBAR_TITLE,
+} from "@/app/edit/formStyles.v2";
 import {
   RESULTS_MOBILE_NAV_CANCEL_BTN,
   RESULTS_MOBILE_NAV_SAVE_BTN,
-  RESULTS_MOBILE_NAV_TITLE,
-} from "../formStyles.mobile";
+} from "@/app/results/formStyles.mobile";
 
 type MobileResultsNavbarProps = {
   onMenuClick: () => void;
@@ -49,7 +49,9 @@ export default function MobileResultsNavbar({
             />
           </svg>
         </button>
-        <span className={RESULTS_MOBILE_NAV_TITLE}>Delivery Optimizer</span>
+        <span className={`${MOBILE_NAVBAR_TITLE} min-w-0 truncate`}>
+          Delivery Optimizer
+        </span>
       </div>
       <div className="flex shrink-0 items-center gap-2">
         {isEditMode && (

app/ui/src/app/results/components/RouteCard.tsx

@@ -1,9 +1,11 @@
 "use client";
 
+import { capitalize } from "@/app/edit/utils/deliveryHelpers";
 import type { Route } from "../types";
 import { routeColorHex } from "../utils/routeColors";
 import EditableStopItem from "./EditableStopItem";
 import RouteCardMenu from "./RouteCardMenu";
+import VehicleTypeIcon from "./VehicleTypeIcon";
 
 type RouteCardProps = {
   route: Route;
@@ -183,34 +185,12 @@ export default function RouteCard({
                 </div>
               </div>
               <p className="mt-3 flex items-center gap-2 text-[12px] text-[var(--edit-text-primary)]">
-                <svg
-                  className="h-4 w-4 text-[var(--edit-text-secondary)]"
-                  viewBox="0 0 20 20"
-                  fill="none"
-                  aria-hidden
-                >
-                  <path
-                    d="M2.5 5.5A1.5 1.5 0 0 1 4 4h7.5A1.5 1.5 0 0 1 13 5.5V7h1.75c.4 0 .77.16 1.06.44l1.75 1.75c.28.28.44.66.44 1.06v2A1.75 1.75 0 0 1 16.25 14h-.6a2.15 2.15 0 0 1-4.2 0h-3.9a2.15 2.15 0 0 1-4.2 0H2.75A1.75 1.75 0 0 1 1 12.25V7.25A1.75 1.75 0 0 1 2.75 5.5h-.25Z"
-                    stroke="currentColor"
-                    strokeWidth="1.4"
-                    strokeLinejoin="round"
-                  />
-                  <circle
-                    cx="5.4"
-                    cy="14"
-                    r="1.15"
-                    stroke="currentColor"
-                    strokeWidth="1.4"
-                  />
-                  <circle
-                    cx="13.6"
-                    cy="14"
-                    r="1.15"
-                    stroke="currentColor"
-                    strokeWidth="1.4"
-                  />
-                </svg>
-                <span>{route.vehicleType ?? "Vehicle"}</span>
+                <VehicleTypeIcon vehicleType={route.vehicleType} />
+                <span>
+                  {route.vehicleType
+                    ? capitalize(route.vehicleType)
+                    : "Vehicle"}
+                </span>
               </p>
             </button>
           </div>