Fix: auth dark mode

packages/frontend/components/layout/AuthLayout.tsx

@@ -0,0 +1,32 @@
+import { Box, Center, Container, useComputedColorScheme } from "@mantine/core";
+import { IconAnalyze } from "@tabler/icons-react";
+
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const scheme = useComputedColorScheme();
+
+  return (
+    <Box
+      style={{
+        backgroundColor:
+          scheme === "dark"
+            ? "var(--mantine-color-dark-6)"
+            : "var(--mantine-color-gray-0)",
+      }}
+      h="100vh"
+    >
+      <Box style={{ position: "absolute", top: 10, left: 10 }}>
+        <IconAnalyze
+          color={scheme === "dark" ? "white" : "#5468ff"}
+          size={40}
+        />
+      </Box>
+      <Center h="100vh">
+        <Container mb="10%">{children}</Container>
+      </Center>
+    </Box>
+  );
+}

packages/frontend/pages/login.tsx

@@ -21,6 +21,7 @@ import { NextSeo } from "next-seo";
 import { useAuth } from "@/utils/auth";
 import { useRouter } from "next/router";
 import { notifications } from "@mantine/notifications";
+import AuthLayout from "@/components/layout/AuthLayout";
 
 function LoginPage() {
   const router = useRouter();
@@ -151,13 +152,10 @@ function LoginPage() {
   }, [router.query.email]);
 
   return (
-    <Box style={{ backgroundColor: "var(--mantine-color-gray-0)" }} h="100vh">
+    <AuthLayout>
       <Container size="600" pt="60">
         <NextSeo title="Login" />
         <Stack align="center" gap="50">
-          <Stack align="center">
-            <IconAnalyze color="#4f87ff" size="60" />
-          </Stack>
           <Paper radius="md" p="xl" miw="350" shadow="md">
             <Text size="xl" mb="lg" fw="700" ta="center">
               Welcome back!
@@ -237,7 +235,7 @@ function LoginPage() {
           </Paper>
         </Stack>
       </Container>
-    </Box>
+    </AuthLayout>
   );
 }
 export default LoginPage;

packages/frontend/pages/request-password-reset.tsx

@@ -1,18 +1,11 @@
-import {
-  Box,
-  Button,
-  Container,
-  Paper,
-  Stack,
-  Text,
-  TextInput,
-} from "@mantine/core";
+import { Button, Paper, Stack, Text, TextInput } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { notifications } from "@mantine/notifications";
-import { IconAnalyze, IconAt, IconCheck } from "@tabler/icons-react";
+import { IconAt, IconCheck } from "@tabler/icons-react";
 import { NextSeo } from "next-seo";
 import { useState } from "react";
 import errorHandler from "../utils/errors";
+import AuthLayout from "@/components/layout/AuthLayout";
 
 export default function PasswordReset() {
   const [loading, setLoading] = useState(false);
@@ -53,52 +46,45 @@ export default function PasswordReset() {
   }
 
   return (
-    <Box style={{ backgroundColor: "var(--mantine-color-gray-0)" }} h="100vh">
-      <Container py={100} size={600}>
-        <NextSeo title="Login" />
-        <Stack align="center" gap={50}>
-          <Stack align="center">
-            <IconAnalyze color={"#4f87ff"} size={60} />
-          </Stack>
+    <AuthLayout>
+      <NextSeo title="Request password reset" />
 
-          <Paper radius="md" p="xl" maw={400} miw={350} shadow="md">
-            <Text size="lg" mb="lg" fw={500} ta="center">
-              Password Recovery
-            </Text>
+      <Paper radius="md" p="xl" maw={400} miw={350} shadow="md">
+        <Text size="lg" mb="lg" fw={500} ta="center">
+          Password Recovery
+        </Text>
 
-            <Text size="sm" mb="lg" c="gray.8">
-              Enter your email address and if it is registered, we will send you
-              a link to reset your password.
-            </Text>
+        <Text mb="lg" opacity={0.8}>
+          Enter your email address and if it is registered, we will send you a
+          link to reset your password.
+        </Text>
 
-            <form onSubmit={form.onSubmit(handlePasswordReset)}>
-              <Stack gap="lg">
-                <TextInput
-                  leftSection={<IconAt size="16" />}
-                  label="Email"
-                  type="email"
-                  value={form.values.email}
-                  onChange={(event) =>
-                    form.setFieldValue("email", event.currentTarget.value)
-                  }
-                  error={form.errors.email && "Invalid email"}
-                  placeholder="Your email"
-                />
+        <form onSubmit={form.onSubmit(handlePasswordReset)}>
+          <Stack gap="lg">
+            <TextInput
+              leftSection={<IconAt size="16" />}
+              label="Email"
+              type="email"
+              value={form.values.email}
+              onChange={(event) =>
+                form.setFieldValue("email", event.currentTarget.value)
+              }
+              error={form.errors.email && "Invalid email"}
+              placeholder="Your email"
+            />
 
-                <Button
-                  className="CtaBtn"
-                  type="submit"
-                  fullWidth
-                  size="md"
-                  loading={loading}
-                >
-                  Request reset link
-                </Button>
-              </Stack>
-            </form>
-          </Paper>
-        </Stack>
-      </Container>
-    </Box>
+            <Button
+              className="CtaBtn"
+              type="submit"
+              fullWidth
+              size="md"
+              loading={loading}
+            >
+              Request reset link
+            </Button>
+          </Stack>
+        </form>
+      </Paper>
+    </AuthLayout>
   );
 }

packages/frontend/pages/reset-password.tsx

@@ -1,22 +1,14 @@
-import {
-  Box,
-  Button,
-  Container,
-  Paper,
-  PasswordInput,
-  Stack,
-  Text,
-} from "@mantine/core";
+import { Button, Paper, PasswordInput, Stack, Text } from "@mantine/core";
 
 import { useForm } from "@mantine/form";
-import { IconAnalyze } from "@tabler/icons-react";
 
 import { NextSeo } from "next-seo";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { fetcher } from "@/utils/fetcher";
 import { useAuth } from "@/utils/auth";
 import analytics from "@/utils/analytics";
+import AuthLayout from "@/components/layout/AuthLayout";
 
 export default function UpdatePassword() {
   const { setJwt } = useAuth();
@@ -61,46 +53,39 @@ export default function UpdatePassword() {
   };
 
   return (
-    <Box style={{ backgroundColor: "var(--mantine-color-gray-0)" }} h="100vh">
-      <Container py={100} size={600}>
-        <NextSeo title="Reset password" />
-        <Stack align="center" gap={50}>
-          <Stack align="center">
-            <IconAnalyze color={"#4f87ff"} size={60} />
-          </Stack>
-          <Paper radius="md" p="xl" miw={350} shadow="md">
-            <Text size="lg" mb="lg" fw="700" ta="center">
-              Reset your password
-            </Text>
-            <form onSubmit={form.onSubmit(handlePasswordReset)}>
-              <Stack>
-                <PasswordInput
-                  label="New Password"
-                  type="password"
-                  autoComplete="new-password"
-                  value={form.values.password}
-                  onChange={(event) =>
-                    form.setFieldValue("password", event.currentTarget.value)
-                  }
-                  error={form.errors.password && "Invalid password"}
-                  placeholder="Your new password"
-                />
+    <AuthLayout>
+      <NextSeo title="Reset password" />
+      <Paper radius="md" p="xl" miw={350} shadow="md">
+        <Text size="lg" mb="lg" fw="700" ta="center">
+          Reset your password
+        </Text>
+        <form onSubmit={form.onSubmit(handlePasswordReset)}>
+          <Stack>
+            <PasswordInput
+              label="New Password"
+              type="password"
+              autoComplete="new-password"
+              value={form.values.password}
+              onChange={(event) =>
+                form.setFieldValue("password", event.currentTarget.value)
+              }
+              error={form.errors.password && "Invalid password"}
+              placeholder="Your new password"
+            />
 
-                <Button
-                  className="CtaBtn"
-                  mt="md"
-                  size="md"
-                  type="submit"
-                  fullWidth
-                  loading={loading}
-                >
-                  Confirm
-                </Button>
-              </Stack>
-            </form>
-          </Paper>
-        </Stack>
-      </Container>
-    </Box>
+            <Button
+              className="CtaBtn"
+              mt="md"
+              size="md"
+              type="submit"
+              fullWidth
+              loading={loading}
+            >
+              Confirm
+            </Button>
+          </Stack>
+        </form>
+      </Paper>
+    </AuthLayout>
   );
 }