feat: new illustration for linking account

frontend/src/components/connections/AlbyConnectionCard.tsx

@@ -9,6 +9,8 @@ import {
 import { useState } from "react";
 import { Link } from "react-router-dom";
 
+import albyAccountDark from "public/images/illustrations/alby-account-dark.svg";
+import albyAccountLight from "public/images/illustrations/alby-account-light.svg";
 import BudgetAmountSelect from "src/components/BudgetAmountSelect";
 import BudgetRenewalSelect from "src/components/BudgetRenewalSelect";
 import ExternalLink from "src/components/ExternalLink";
@@ -38,7 +40,6 @@ 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";
 
 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.