refactor(ui): update branding assets and clean up repair proof UI

src/components/LogoWrapper.tsx

@@ -1,57 +0,0 @@
-import Image from 'next/image';
-
-import { cn } from '@/lib/utils';
-
-const sizeClasses = {
-  sm: 'size-8 rounded-lg border-2 p-0.5',
-  md: 'size-12 rounded-lg border-2 p-1.5',
-  lg: 'size-28 rounded-lg border-[5px] p-3',
-} as const;
-
-const variantClasses = {
-  default: 'border-white bg-primary shadow-md',
-  solid: 'border-white bg-primary',
-  glass: 'border-primary-foreground bg-primary/85 shadow-md',
-  sidebar: 'border-0 bg-primary',
-} as const;
-
-type LogoWrapperProps = {
-  alt?: string;
-  className?: string;
-  imageClassName?: string;
-  priority?: boolean;
-  size?: keyof typeof sizeClasses;
-  variant?: keyof typeof variantClasses;
-};
-
-export function LogoWrapper({
-  alt = 'RoadMonitor logo',
-  className,
-  imageClassName,
-  priority = false,
-  size = 'md',
-  variant = 'default',
-}: LogoWrapperProps) {
-  return (
-    <span
-      className={cn(
-        'inline-flex shrink-0 items-center justify-center',
-        sizeClasses[size],
-        variantClasses[variant],
-        className,
-      )}
-    >
-      <Image
-        src="/logo.png"
-        alt={alt}
-        width={112}
-        height={112}
-        className={cn(
-          'size-full object-contain brightness-0 invert',
-          imageClassName,
-        )}
-        priority={priority}
-      />
-    </span>
-  );
-}

src/components/app-sidebar.tsx

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { ChevronRight } from 'lucide-react';
-import { LogoWrapper } from '@/components/LogoWrapper';
+import Image from 'next/image';
 import { NavUser } from '@/components/nav-user';
 import {
   filterMenuItems,
@@ -97,10 +97,13 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
 function SidebarBrandControl({ isMobile }: { isMobile: boolean }) {
   return (
     <div className="group/sidebar-brand relative flex size-8 shrink-0 items-center justify-center">
-      <LogoWrapper
-        size="sm"
-        variant="sidebar"
-        className="transition-opacity duration-150 group-data-[collapsible=icon]:group-hover/sidebar-brand:opacity-0 group-data-[collapsible=icon]:group-focus-within/sidebar-brand:opacity-0"
+      <Image
+        src="/color_logo.svg"
+        alt="RoadMonitor logo"
+        width={81}
+        height={58}
+        className="h-auto w-10 transition-opacity duration-150 group-data-[collapsible=icon]:group-hover/sidebar-brand:opacity-0 group-data-[collapsible=icon]:group-focus-within/sidebar-brand:opacity-0"
+        priority
       />
       <Tooltip>
         <TooltipTrigger asChild>

src/components/auth/AuthBackground.tsx

@@ -1,5 +1,5 @@
-import { LogoWrapper } from '@/components/LogoWrapper';
 import { cn } from '@/lib/utils';
+import Image from 'next/image';
 
 const BOKEH_ORBS = [
   'top-[20%] left-[10%] size-[min(18vw,140px)] opacity-[0.14]',
@@ -82,24 +82,21 @@ export function AuthBackground({ className }: AuthBackgroundProps) {
         />
       ))}
 
-      <div className="absolute inset-x-10 top-1/2 -translate-y-1/2 text-center text-primary-foreground">
-        <div className="mb-9 inline-flex items-center gap-5 text-left">
-          <LogoWrapper
-            alt=""
-            className="size-28 rounded-lg border-[5px] p-4"
-            priority
-            variant="glass"
-          />
-          <span className="min-w-0">
-            <span className="block text-5xl font-semibold leading-none tracking-normal">
-              Road
-            </span>
-            <span className="block text-5xl font-semibold leading-none tracking-normal">
-              Monitor
-            </span>
-          </span>
-        </div>
-        <p className="mx-auto max-w-md text-base leading-7 text-primary-foreground/82">
+      <Image
+        src="/logo.svg"
+        alt=""
+        width={81}
+        height={58}
+        className="absolute left-10 top-12 h-auto w-16 object-contain"
+        priority
+      />
+
+      <div className="absolute bottom-10 left-10 right-10 text-left text-primary-foreground">
+        <p className="text-3xl leading-none tracking-tight">
+          <span className="font-semibold">Road</span>
+          <span className="font-normal">Monitor</span>
+        </p>
+        <p className="mt-1 max-w-sm text-xs leading-4 text-primary-foreground/90">
           Map, monitor, and repair road issues with data-driven surface
           intelligence.
         </p>
@@ -107,4 +104,3 @@ export function AuthBackground({ className }: AuthBackgroundProps) {
     </div>
   );
 }
-