style: fix logo in dark mode on login page

Co-authored-by: Alexander Biraben-Renard <[email protected]>

app/auth/login/page.tsx

@@ -1,12 +1,12 @@
 import { auth, signIn } from "@/auth"
 import Link from "@/components/Link"
+import ThemedLogo from "@/components/ThemedLogo"
 
 import styles from "./page.module.scss"
 
 import { Button, Flex, Separator, Text } from "@radix-ui/themes"
 import { Heading } from "@react-email/components"
 import { AuthError } from "next-auth"
-import Image from "next/image"
 import { redirect } from "next/navigation"
 import React from "react"
 
@@ -36,7 +36,7 @@ const LoginPage = async () => {
   return (
     <Flex gap="6" direction="column">
       <Flex className={styles.logosContainer}>
-        <Image src="/images/imperial-logo-blue.svg" alt="imperial logo in blue" width={0} height={0} />
+        <ThemedLogo />
       </Flex>
       <Flex pl="9" pr="9" direction="column" gap="5">
         <Flex direction="column" justify="center" align="center">

app/auth/login/partner/page.tsx

@@ -63,7 +63,7 @@ const LoginPage = () => {
         </TextField.Root>
 
         <Button size="3" style={{ width: "100%" }}>
-          {isPending ? <Spinner /> : "Sign In With Magic Link"}
+          {isPending ? <Spinner /> : "Sign in with magic link"}
         </Button>
       </form>
     </Flex>

components/ThemedLogo.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import Image from "next/image"
+
+const ThemedLogo = () => {
+  const { resolvedTheme } = useTheme()
+  let src
+
+  if (resolvedTheme === "dark") {
+    src = "/images/imperial-logo.svg"
+  } else {
+    src = "/images/imperial-logo-blue.svg"
+  }
+
+  return <Image src={src} alt="imperial logo" width={0} height={0} />
+}
+
+export default ThemedLogo