fix(webapp): refine disconnected banner spacing and refresh icon

Mono-RevId: 0040665b7ac1ef0b2ca683178ad2fafbfdd19825

Author: carderne

apps/webapp/app/assets/icons/RefreshIcon.tsx

@@ -0,0 +1,42 @@
+export function RefreshIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        d="M5 8C6.38324 5.60879 9.03887 4 12 4C16.4183 4 20 7.58172 20 12"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 4V8H9"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19.0117 20V16H15.0117"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4 12C4 16.4183 7.58172 20 12 20C14.9611 20 17.6168 18.3912 19 16"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/webapp/app/components/DisconnectedBanner.tsx

@@ -1,4 +1,4 @@
-import { ArrowPathIcon } from "@heroicons/react/20/solid";
+import { RefreshIcon } from "~/assets/icons/RefreshIcon";
 import { useRevalidator } from "@remix-run/react";
 import { useLoaderDisconnected } from "~/hooks/useLoaderDisconnected";
 import { Button } from "~/components/primitives/Buttons";
@@ -12,13 +12,15 @@ export function DisconnectedBanner() {
   return (
     <div
       role="status"
-      className="fixed bottom-4 left-1/2 z-50 flex -translate-x-1/2 items-center gap-2 rounded border border-warning/30 bg-background-bright px-4 py-2 text-sm text-text-bright shadow-lg"
+      className="fixed bottom-4 left-1/2 z-50 flex -translate-x-1/2 items-center gap-2 rounded border border-warning/30 bg-background-bright p-2 pl-4 text-sm text-text-bright shadow-lg"
     >
       <span>Connection lost. Your data may be out of date.</span>
       <Button
         type="button"
         variant="minimal/small"
-        LeadingIcon={ArrowPathIcon}
+        className="size-6 p-0"
+        LeadingIcon={RefreshIcon}
+        leadingIconClassName="mx-0 size-4"
         aria-label="Refresh"
         tooltip="Refresh"
         onClick={() => revalidator.revalidate()}