From e4beda88372936e892f0a117a2b11fa6fa205420 Mon Sep 17 00:00:00 2001
From: Matthew Alex <matalex412@gmail.com>
Date: Wed, 21 Aug 2024 14:29:03 +0100
Subject: [PATCH] style: fix logo in dark mode on login page

Co-authored-by: Alexander Biraben-Renard <ab1223@ic.ac.uk>
---
 app/auth/login/page.tsx         |  4 ++--
 app/auth/login/partner/page.tsx |  2 +-
 components/ThemedLogo.tsx       | 19 +++++++++++++++++++
 3 files changed, 22 insertions(+), 3 deletions(-)
 create mode 100644 components/ThemedLogo.tsx

diff --git a/app/auth/login/page.tsx b/app/auth/login/page.tsx
index d4def809..d6dae685 100644
--- a/app/auth/login/page.tsx
+++ b/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">
diff --git a/app/auth/login/partner/page.tsx b/app/auth/login/partner/page.tsx
index fa3c8076..2281b5b0 100644
--- a/app/auth/login/partner/page.tsx
+++ b/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>
diff --git a/components/ThemedLogo.tsx b/components/ThemedLogo.tsx
new file mode 100644
index 00000000..d37482c8
--- /dev/null
+++ b/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