fix: dark mode, login and footer images

frontend/src/App.tsx

@@ -13,7 +13,7 @@ import Created from "./screens/apps/Created";
 
 function App() {
   return (
-    <div className="p-4">
+    <div className="p-4 dark:bg-black min-h-full">
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Navbar />}>

frontend/src/components/Footer.tsx

@@ -1,12 +1,23 @@
+import albyLogoWithText from "../assets/images/alby-logo-with-text.svg";
+import albyLogoWithTextDark from "../assets/images/alby-logo-with-text-dark.svg";
+import { useDarkMode } from "../hooks/useDarkMode";
+
 function Footer() {
+  const isDarkMode = useDarkMode();
   return (
-    <footer className="mt-20 mb-4 text-center">
-      <span className="text-gray-500 dark:text-neutral-300 text-xs">Made with 💜 by</span>
+    <footer className="mt-20 mb-4 flex justify-center items-center gap-2">
+      <span className="text-gray-500 dark:text-neutral-300 text-xs">
+        Made with 💜 by
+      </span>
       <a href="https://getalby.com?utm_source=nwc" rel="noreferrer noopener">
-        <img id="alby-logo" src="/public/images/alby-logo-with-text.svg" className="w-16 inline"/>
+        <img
+          id="alby-logo"
+          src={isDarkMode ? albyLogoWithTextDark : albyLogoWithText}
+          className="w-16 inline"
+        />
       </a>
     </footer>
-  )
+  );
 }
 
 export default Footer;

frontend/src/hooks/useDarkMode.ts

@@ -0,0 +1,23 @@
+import React from "react";
+
+export function useDarkMode() {
+  const [isDarkMode, setIsDarkMode] = React.useState(false);
+
+  React.useEffect(() => {
+    const darkModeMediaQuery = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    );
+
+    const handleDarkModeChange = (event: MediaQueryListEvent) => {
+      setIsDarkMode(event.matches);
+    };
+
+    darkModeMediaQuery.addEventListener("change", handleDarkModeChange);
+    setIsDarkMode(darkModeMediaQuery.matches);
+
+    return () => {
+      darkModeMediaQuery.removeEventListener("change", handleDarkModeChange);
+    };
+  }, []);
+  return isDarkMode;
+}

frontend/src/index.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+html,
+body,
+#root {
+  height: 100%;
+}

frontend/src/screens/Login.tsx

@@ -2,6 +2,7 @@ import { useNavigate } from "react-router-dom";
 import { useInfo } from "../hooks/useInfo";
 import { useEffect } from "react";
 import nwcLogo from "../assets/images/nwc-logo.svg";
+import albyHead from "../assets/images/alby-head.svg";
 
 function Login() {
   const { data: info } = useInfo();
@@ -36,9 +37,8 @@ function Login() {
           className=" inline-flex cursor-pointer items-center justify-center rounded-md transition-all px-10 py-4 text-black bg-gradient-to-r from-[#ffde6e] to-[#f8c455]"
           href="/alby/auth"
         >
-          {/* style="background: linear-gradient(180deg, #ffde6e 63.72%, #f8c455 95.24%);" */}
           <img
-            src="/public/images/alby-head.svg"
+            src={albyHead}
             width="400"
             height="400"
             className="w-[24px] mr-2"