chore: update logo in admin UI

ui/admin/app/components/branding/OttoLogo.tsx

@@ -1,6 +1,7 @@
 import { assetUrl, cn } from "~/lib/utils";
 
 import { TypographyH2 } from "~/components/Typography";
+import { useTheme } from "~/components/theme";
 
 export function OttoLogo({
     hideText = false,
@@ -9,6 +10,13 @@ export function OttoLogo({
     hideText?: boolean;
     classNames?: { root?: string; image?: string };
 }) {
+    const { isDark } = useTheme();
+    let logo = isDark
+        ? "/logo/otto8-logo-blue-white-text.svg"
+        : "/logo/otto8-logo-blue-black-text.svg";
+    if (hideText) {
+        logo = "/logo/otto8-icon-blue.svg";
+    }
     return (
         <TypographyH2
             className={cn(
@@ -17,11 +25,10 @@ export function OttoLogo({
             )}
         >
             <img
-                src={assetUrl("/logo/OttoLogo.svg")}
+                src={assetUrl(logo)}
                 alt="Otto Logo"
-                className={cn("w-10 h-10 dark:invert", classNames.image)}
+                className={cn("h-8", classNames.image)}
             />
-            {!hideText && "Otto"}
         </TypographyH2>
     );
 }

ui/admin/app/components/errors/Error.tsx

@@ -17,7 +17,7 @@ export function Error({ error }: { error: Error }) {
         <div className="flex min-h-screen w-full items-center justify-center p-4">
             <Card className="w-96">
                 <CardHeader className="mx-4">
-                    <OttoLogo classNames={{ image: "h-10 w-10" }} />
+                    <OttoLogo />
                 </CardHeader>
                 <CardContent className="space-y-2 text-center border-b mb-4">
                     <CardTitle>Oops! An error occurred</CardTitle>

ui/admin/app/components/errors/RouteError.tsx

@@ -16,7 +16,7 @@ export function RouteError({ error }: { error: ErrorResponse }) {
         <div className="flex min-h-screen w-full items-center justify-center p-4">
             <Card className="w-96">
                 <CardHeader className="mx-4">
-                    <OttoLogo classNames={{ image: "h-10 w-10" }} />
+                    <OttoLogo />
                 </CardHeader>
                 <CardContent className="space-y-2 text-center border-b mb-4">
                     <CardTitle>Oops! {error.status}</CardTitle>

ui/admin/app/components/errors/Unauthorized.tsx

@@ -13,7 +13,7 @@ export function Unauthorized() {
         <div className="flex min-h-screen w-full items-center justify-center p-4">
             <Card className="w-96">
                 <CardHeader className="mx-4">
-                    <OttoLogo classNames={{ image: "h-10 w-10" }} />
+                    <OttoLogo />
                 </CardHeader>
                 <CardContent className="space-y-2 text-center border-b mb-4">
                     <CardDescription className="text-center">

ui/admin/app/components/sidebar/Sidebar.tsx

@@ -85,13 +85,7 @@ export function AppSidebar() {
                 )}
             >
                 <div className={cn("flex items-center justify-center h-full")}>
-                    <OttoLogo
-                        classNames={{
-                            image: "w-8 h-8",
-                            root: "text-foreground",
-                        }}
-                        hideText={state === "collapsed"}
-                    />
+                    <OttoLogo hideText={state === "collapsed"} />
                 </div>
             </SidebarHeader>
             <SidebarContent