From d8f6400add8d941ce31c9f338b00a4100aa1d0eb Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Mon, 9 Oct 2023 12:51:47 +0100
Subject: [PATCH] feat: added dark mode to login, logout, password reset
 (#11765)

Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
---
 apps/web/components/ui/AuthContainer.tsx      | 4 ++--
 apps/web/pages/auth/forgot-password/[id].tsx  | 1 -
 apps/web/pages/auth/forgot-password/index.tsx | 4 ++--
 apps/web/pages/auth/login.tsx                 | 3 +--
 apps/web/pages/auth/logout.tsx                | 1 -
 5 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/apps/web/components/ui/AuthContainer.tsx b/apps/web/components/ui/AuthContainer.tsx
index 9da5b38c0f..605875bfc2 100644
--- a/apps/web/components/ui/AuthContainer.tsx
+++ b/apps/web/components/ui/AuthContainer.tsx
@@ -15,7 +15,7 @@ interface Props {
 
 export default function AuthContainer(props: React.PropsWithChildren<Props>) {
   return (
-    <div className="flex min-h-screen flex-col justify-center bg-[#f3f4f6] py-12 sm:px-6 lg:px-8">
+    <div className="bg-subtle dark:bg-darkgray-50 flex min-h-screen flex-col justify-center py-12 sm:px-6 lg:px-8">
       <HeadSeo title={props.title} description={props.description} />
       {props.showLogo && <Logo small inline={false} className="mx-auto mb-auto" />}
 
@@ -28,7 +28,7 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
         </div>
       )}
       <div className="mb-auto mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="bg-default border-subtle mx-2 rounded-md border px-4 py-10 sm:px-10">
+        <div className="bg-default dark:bg-muted border-subtle mx-2 rounded-md border px-4 py-10 sm:px-10">
           {props.children}
         </div>
         <div className="text-default mt-8 text-center text-sm">{props.footerText}</div>
diff --git a/apps/web/pages/auth/forgot-password/[id].tsx b/apps/web/pages/auth/forgot-password/[id].tsx
index 36ca1c3511..d80ef07316 100644
--- a/apps/web/pages/auth/forgot-password/[id].tsx
+++ b/apps/web/pages/auth/forgot-password/[id].tsx
@@ -141,7 +141,6 @@ export default function Page({ requestId, isRequestExpired, csrfToken }: Props)
   );
 }
 
-Page.isThemeSupported = false;
 Page.PageWrapper = PageWrapper;
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const id = context.params?.id as string;
diff --git a/apps/web/pages/auth/forgot-password/index.tsx b/apps/web/pages/auth/forgot-password/index.tsx
index 750f86b996..a6fa28b361 100644
--- a/apps/web/pages/auth/forgot-password/index.tsx
+++ b/apps/web/pages/auth/forgot-password/index.tsx
@@ -126,8 +126,9 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
             />
             <div className="space-y-2">
               <Button
-                className="w-full justify-center"
+                className="w-full justify-center dark:bg-white dark:text-black"
                 type="submit"
+                color="primary"
                 disabled={loading}
                 aria-label={t("request_password_reset")}
                 loading={loading}>
@@ -141,7 +142,6 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
   );
 }
 
-ForgotPassword.isThemeSupported = false;
 ForgotPassword.PageWrapper = PageWrapper;
 
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
diff --git a/apps/web/pages/auth/login.tsx b/apps/web/pages/auth/login.tsx
index ca4e752e72..de15f84e4e 100644
--- a/apps/web/pages/auth/login.tsx
+++ b/apps/web/pages/auth/login.tsx
@@ -225,7 +225,7 @@ export default function Login({
                 type="submit"
                 color="primary"
                 disabled={formState.isSubmitting}
-                className="w-full justify-center">
+                className="w-full justify-center dark:bg-white dark:text-black">
                 {twoFactorRequired ? t("submit") : t("sign_in")}
               </Button>
             </div>
@@ -337,7 +337,6 @@ const _getServerSideProps = async function getServerSideProps(context: GetServer
   };
 };
 
-Login.isThemeSupported = false;
 Login.PageWrapper = PageWrapper;
 
 export const getServerSideProps = withNonce(_getServerSideProps);
diff --git a/apps/web/pages/auth/logout.tsx b/apps/web/pages/auth/logout.tsx
index 59a259ad2a..43990d6eff 100644
--- a/apps/web/pages/auth/logout.tsx
+++ b/apps/web/pages/auth/logout.tsx
@@ -57,7 +57,6 @@ export function Logout(props: Props) {
   );
 }
 
-Logout.isThemeSupported = false;
 Logout.PageWrapper = PageWrapper;
 export default Logout;