From cb447b770a8f02739bd0a73533d8c6db2fecdaf4 Mon Sep 17 00:00:00 2001
From: Ryan Hopper-Lowe <46546486+ryanhopperlowe@users.noreply.github.com>
Date: Wed, 4 Dec 2024 11:00:24 -0600
Subject: [PATCH] fix: realign home button icon on error boundary in admin ui
 (#759)

---
 ui/admin/app/components/errors/Error.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/ui/admin/app/components/errors/Error.tsx b/ui/admin/app/components/errors/Error.tsx
index e0085798..687a8b51 100644
--- a/ui/admin/app/components/errors/Error.tsx
+++ b/ui/admin/app/components/errors/Error.tsx
@@ -1,4 +1,3 @@
-import { Link } from "@remix-run/react";
 import { ArrowLeft, HomeIcon } from "lucide-react";
 
 import { OttoLogo } from "~/components/branding/OttoLogo";
@@ -11,6 +10,7 @@ import {
     CardHeader,
     CardTitle,
 } from "~/components/ui/card";
+import { Link } from "~/components/ui/link";
 
 export function Error({ error }: { error: Error }) {
     return (
@@ -28,19 +28,21 @@ export function Error({ error }: { error: Error }) {
                     </p>
                 </CardContent>
                 <CardFooter className="flex gap-4">
-                    <Button className="w-full" variant="secondary" asChild>
-                        <Link to="/">
-                            <HomeIcon className="mr-2" /> Go home
-                        </Link>
-                    </Button>
+                    <Link
+                        as="button"
+                        className="w-full"
+                        buttonVariant="secondary"
+                        to="/"
+                    >
+                        <HomeIcon /> Go home
+                    </Link>
                     <Button
                         className="w-full"
                         variant="secondary"
-                        onClick={() => {
-                            window.location.reload();
-                        }}
+                        onClick={() => window.location.reload()}
+                        startContent={<ArrowLeft />}
                     >
-                        <ArrowLeft className="mr-2" /> Go back
+                        Go back
                     </Button>
                 </CardFooter>
             </Card>