-
- {t('welcome')}
-
-
- {t('authCreateAccount')}
-
+
@@ -148,7 +144,7 @@ export default function SignupForm({
name="email"
render={({ field }) => (
- {t('email')}
+ {t("email")}
@@ -161,7 +157,7 @@ export default function SignupForm({
name="password"
render={({ field }) => (
- {t('password')}
+ {t("password")}
@@ -174,7 +170,9 @@ export default function SignupForm({
name="confirmPassword"
render={({ field }) => (
- {t('confirmPassword')}
+
+ {t("confirmPassword")}
+
@@ -190,7 +188,7 @@ export default function SignupForm({
)}
diff --git a/src/components/BrandingLogo.tsx b/src/components/BrandingLogo.tsx
new file mode 100644
index 00000000..34771333
--- /dev/null
+++ b/src/components/BrandingLogo.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useTheme } from "next-themes";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+
+type BrandingLogoProps = {
+ width: number;
+ height: number;
+};
+
+export default function BrandingLogo(props: BrandingLogoProps) {
+ const { env } = useEnvContext();
+ const { theme } = useTheme();
+ const [path, setPath] = useState(""); // Default logo path
+
+ useEffect(() => {
+ function getPath() {
+ let lightOrDark = theme;
+
+ if (theme === "system" || !theme) {
+ lightOrDark = window.matchMedia("(prefers-color-scheme: dark)")
+ .matches
+ ? "dark"
+ : "light";
+ }
+
+ if (lightOrDark === "light") {
+ return "/logo/word_mark_black.png";
+ }
+
+ return "/logo/word_mark_white.png";
+ }
+
+ const path = getPath();
+ setPath(path);
+ }, [theme, env]);
+
+ return (
+ path && (
+
+ )
+ );
+}