Redesign beta Magent UI

frontend/app/ui/BrandingLogo.tsx

@@ -1,14 +1,44 @@
+'use client'
+
+import { useState } from 'react'
+
 type BrandingLogoProps = {
   className?: string
   alt?: string
 }
 
 export default function BrandingLogo({ className, alt = 'Magent logo' }: BrandingLogoProps) {
+  const [loaded, setLoaded] = useState(false)
+  const [failed, setFailed] = useState(false)
+
   return (
-    <img
-      className={className}
-      src="/api/branding/logo.png"
-      alt={alt}
-    />
+    <span className={`${className ?? ''} branding-logo-shell`} role="img" aria-label={alt}>
+      {!failed ? (
+        <img
+          className={loaded ? 'is-loaded' : undefined}
+          src="/api/branding/logo.png"
+          alt=""
+          aria-hidden="true"
+          onLoad={() => setLoaded(true)}
+          onError={() => setFailed(true)}
+        />
+      ) : null}
+      {!loaded ? (
+        <svg aria-hidden="true" viewBox="0 0 64 64" focusable="false">
+          <defs>
+            <linearGradient id="magentLogoGlow" x1="0" y1="0" x2="1" y2="1">
+              <stop offset="0%" stopColor="#7ed7ff" />
+              <stop offset="100%" stopColor="#c6c1ff" />
+            </linearGradient>
+          </defs>
+          <rect width="64" height="64" rx="12" fill="#0b1328" />
+          <rect x="6" y="6" width="52" height="52" rx="9" fill="#111a33" />
+          <path
+            d="M16 48V16h8l8 13 8-13h8v32h-8V30l-8 12-8-12v18h-8z"
+            fill="url(#magentLogoGlow)"
+          />
+        </svg>
+      ) : null}
+    </span>
   )
 }