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

@@ -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>

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;

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) => {

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);

apps/web/pages/auth/logout.tsx

@@ -57,7 +57,6 @@ export function Logout(props: Props) {
   );
 }
 
-Logout.isThemeSupported = false;
 Logout.PageWrapper = PageWrapper;
 export default Logout;