feat: new illustration for linking account

frontend/src/components/connections/AlbyConnectionCard.tsx

@@ -38,7 +38,8 @@ import { Separator } from "src/components/ui/separator";
 import { useAlbyMe } from "src/hooks/useAlbyMe";
 import { LinkStatus, useLinkAccount } from "src/hooks/useLinkAccount";
 import { App, BudgetRenewalType } from "src/types";
-import linkAccountIllustration from "/images/illustrations/link-account.png";
+import albyAccountDark from "/images/illustrations/alby-account-dark.svg";
+import albyAccountLight from "/images/illustrations/alby-account-light.svg";
 
 function AlbyConnectionCard({ connection }: { connection?: App }) {
   const { data: albyMe } = useAlbyMe();
@@ -94,8 +95,12 @@ function AlbyConnectionCard({ connection }: { connection?: App }) {
                       every app you access through your Alby Account will handle
                       payments via the Hub.
                       <img
-                        src={linkAccountIllustration}
-                        className="w-80 mx-auto"
+                        src={albyAccountDark}
+                        className="w-full hidden dark:block"
+                      />
+                      <img
+                        src={albyAccountLight}
+                        className="w-full dark:hidden"
                       />
                       You can add a budget that will restrict how much can be
                       spent from the Hub with your Alby Account.