feat: logo updaates

src/app/router/Prompt/Prompt.tsx

@@ -16,7 +16,6 @@ import NostrConfirmSignMessage from "@screens/Nostr/ConfirmSignMessage";
 import NostrConfirmSignSchnorr from "@screens/Nostr/ConfirmSignSchnorr";
 import Unlock from "@screens/Unlock";
 import { HashRouter, Navigate, Outlet, Route, Routes } from "react-router-dom";
-import AlbyLogo from "~/app/components/AlbyLogo";
 import Toaster from "~/app/components/Toast/Toaster";
 import Providers from "~/app/context/Providers";
 import RequireAuth from "~/app/router/RequireAuth";
@@ -30,6 +29,7 @@ import WebbtcEnable from "~/app/screens/Enable/WebbtcEnable";
 import WeblnEnable from "~/app/screens/Enable/WeblnEnable";
 import NostrConfirmDecrypt from "~/app/screens/Nostr/ConfirmDecrypt";
 import NostrConfirmEncrypt from "~/app/screens/Nostr/ConfirmEncrypt";
+import { useTheme } from "~/app/utils";
 import type { NavigationState, OriginData } from "~/types";
 
 // Parse out the parameters from the querystring.
@@ -179,12 +179,20 @@ function Prompt() {
 }
 
 const Layout = () => {
+  const theme = useTheme();
   return (
     <>
       <Toaster />
       <div className="px-4 py-2 justify-between items-center bg-white flex border-b border-gray-200 dark:bg-surface-02dp dark:border-neutral-700 gap-5">
         <div className="w-24 shrink-0">
-          <AlbyLogo />
+          <img
+            src={
+              theme === "dark"
+                ? "assets/icons/alby_logo_dark.svg"
+                : "assets/icons/alby_logo.svg"
+            }
+            className="h-8"
+          />
         </div>
         <AccountMenu showOptions={false} />
       </div>

src/app/router/connectorRoutes.tsx

@@ -19,7 +19,7 @@ import ConnectAlbyHub from "~/app/screens/connectors/ConnectAlbyHub";
 import ConnectNWC from "~/app/screens/connectors/ConnectNWC";
 import ConnectVoltage from "~/app/screens/connectors/ConnectVoltage";
 import ConnectCommando from "../screens/connectors/ConnectCommando";
-import albyhub from "/static/assets/icons/albyhub.png";
+import albyhub from "/static/assets/icons/albyhub.svg";
 import btcpay from "/static/assets/icons/btcpay.svg";
 import citadel from "/static/assets/icons/citadel.svg";
 import core_ln from "/static/assets/icons/core_ln.svg";

src/app/screens/Onboard/PinExtension/index.tsx

@@ -20,11 +20,11 @@ export default function PinExtension() {
       <img
         src={
           theme === "dark"
-            ? "assets/icons/alby_logo_dark.svg"
-            : "assets/icons/alby_logo.svg"
+            ? "assets/images/pin_extension_dark.png"
+            : "assets/images/pin_extension_light.png"
         }
         alt="Pin your Alby extension"
-        className="h-32"
+        className="h-64"
       />
     );
   };

src/app/screens/ReceiveInvoice/index.tsx

@@ -17,7 +17,7 @@ import SkeletonLoader from "~/app/components/SkeletonLoader";
 import toast from "~/app/components/Toast";
 import { useAccount } from "~/app/context/AccountContext";
 import { useSettings } from "~/app/context/SettingsContext";
-import { isAlbyOAuthAccount } from "~/app/utils";
+import { isAlbyOAuthAccount, useTheme } from "~/app/utils";
 import api from "~/common/lib/api";
 import msg from "~/common/lib/msg";
 import { poll } from "~/common/utils/helpers";
@@ -60,6 +60,8 @@ function ReceiveInvoice() {
     };
   }, []);
 
+  const theme = useTheme();
+
   const [fiatAmount, setFiatAmount] = useState("");
 
   useEffect(() => {
@@ -171,7 +173,11 @@ function ReceiveInvoice() {
                   ) : (
                     <img
                       className="w-[64px] h-[64px] absolute z-1"
-                      src="assets/icons/alby_icon_qr.svg"
+                      src={
+                        theme === "dark"
+                          ? "assets/icons/alby_logo_qr_dark.svg"
+                          : "assets/icons/alby_logo_qr_light.svg"
+                      }
                       alt="Alby logo"
                     />
                   )}

src/app/screens/Unlock/index.tsx

@@ -64,7 +64,7 @@ function Unlock() {
     <Container maxWidth="sm">
       <div className="p-8">
         <div className="flex justify-center">
-          <div className="w-40 dark:text-white">
+          <div className="w-64 mt-4 dark:text-white">
             <AlbyLogo />
           </div>
         </div>

src/app/screens/connectors/ChooseConnectorPath/index.tsx

@@ -3,12 +3,15 @@ import { Link } from "react-router-dom";
 import Button from "~/app/components/Button";
 import ConnectorPath from "~/app/components/ConnectorPath";
 import ConnectAlby from "~/app/screens/connectors/ConnectAlby";
+import { useTheme } from "~/app/utils";
 
 export default function ChooseConnectorPath() {
   const { t } = useTranslation("translation", {
     keyPrefix: "choose_path",
   });
 
+  const theme = useTheme();
+
   return (
     <div className="mx-auto max-w-3xl">
       <div className="relative">
@@ -20,7 +23,11 @@ export default function ChooseConnectorPath() {
             title={t("alby.title")}
             icon={
               <img
-                src="assets/icons/alby.png"
+                src={
+                  theme === "dark"
+                    ? "assets/icons/alby_dark.svg"
+                    : "assets/icons/alby_light.svg"
+                }
                 className="w-10 h-10 rounded-md"
               />
             }

src/app/screens/connectors/ConnectAlbyHub/index.tsx

@@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom";
 import toast from "~/app/components/Toast";
 import msg from "~/common/lib/msg";
 
-import logo from "/static/assets/icons/albyhub.png";
+import logo from "/static/assets/icons/albyhub.svg";
 
 export default function ConnectAlbyHub() {
   const navigate = useNavigate();