add branding logo component

server/setup/copyInConfig.ts

@@ -69,7 +69,13 @@ async function copyInDomains() {
             } else {
                 await trx
                     .insert(domains)
-                    .values({ domainId, baseDomain, configManaged: true, type: "wildcard" })
+                    .values({
+                        domainId,
+                        baseDomain,
+                        configManaged: true,
+                        type: "wildcard",
+                        verified: true
+                    })
                     .execute();
             }
         }

src/app/[orgId]/settings/domains/DomainsTable.tsx

@@ -210,18 +210,17 @@ export default function DomainsTable({ domains }: Props) {
                                     : t("restart", { fallback: "Restart" })}
                             </Button>
                         )}
-                        {!domain.configManaged && (
-                            <Button
-                                variant="secondary"
-                                size="sm"
-                                onClick={() => {
-                                    setSelectedDomain(domain);
-                                    setIsDeleteModalOpen(true);
-                                }}
-                            >
-                                {t("delete")}
-                            </Button>
-                        )}
+                        <Button
+                            variant="secondary"
+                            size="sm"
+                            disabled={domain.configManaged}
+                            onClick={() => {
+                                setSelectedDomain(domain);
+                                setIsDeleteModalOpen(true);
+                            }}
+                        >
+                            {t("delete")}
+                        </Button>
                     </div>
                 );
             }

src/app/auth/login/DashboardLoginForm.tsx

@@ -14,6 +14,7 @@ import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import Image from "next/image";
 import { cleanRedirect } from "@app/lib/cleanRedirect";
+import BrandingLogo from "@app/components/BrandingLogo";
 import { useTranslations } from "next-intl";
 
 type DashboardLoginFormProps = {
@@ -26,42 +27,24 @@ export default function DashboardLoginForm({
     idps
 }: DashboardLoginFormProps) {
     const router = useRouter();
-    // const api = createApiClient(useEnvContext());
-    //
-    // useEffect(() => {
-    //     const logout = async () => {
-    //         try {
-    //             await api.post("/auth/logout");
-    //             console.log("user logged out");
-    //         } catch (e) {}
-    //     };
-    //
-    //     logout();
-    // });
-
+    const { env } = useEnvContext();
     const t = useTranslations();
 
+    function getSubtitle() {
+        return t("loginStart");
+    }
+
     return (
-        <Card className="w-full max-w-md">
-            <CardHeader>
+        <Card className="shadow-md w-full max-w-md">
+            <CardHeader className="border-b">
                 <div className="flex flex-row items-center justify-center">
-                    <Image
-                        src={`/logo/pangolin_orange.svg`}
-                        alt={t('pangolinLogoAlt')}
-                        width={100}
-                        height={100}
-                    />
+                    <BrandingLogo height={58} width={175} />
                 </div>
-                <div className="text-center space-y-1">
-                    <h1 className="text-2xl font-bold mt-1">
-                        {t('welcome')}
-                    </h1>
-                    <p className="text-sm text-muted-foreground">
-                        {t('loginStart')}
-                    </p>
+                <div className="text-center space-y-1 pt-3">
+                    <p className="text-muted-foreground">{getSubtitle()}</p>
                 </div>
             </CardHeader>
-            <CardContent>
+            <CardContent className="pt-6">
                 <LoginForm
                     redirect={redirect}
                     idps={idps}

src/app/auth/signup/SignupForm.tsx

@@ -32,6 +32,7 @@ import { useEnvContext } from "@app/hooks/useEnvContext";
 import Image from "next/image";
 import { cleanRedirect } from "@app/lib/cleanRedirect";
 import { useTranslations } from "next-intl";
+import BrandingLogo from "@app/components/BrandingLogo";
 
 type SignupFormProps = {
     redirect?: string;
@@ -88,9 +89,7 @@ export default function SignupForm({
             })
             .catch((e) => {
                 console.error(e);
-                setError(
-                    formatAxiosError(e, t('signupError'))
-                );
+                setError(formatAxiosError(e, t("signupError")));
             });
 
         if (res && res.status === 200) {
@@ -117,24 +116,21 @@ export default function SignupForm({
         setLoading(false);
     }
 
+    function getSubtitle() {
+        return t("authCreateAccount");
+    }
+
     return (
         <Card className="w-full max-w-md shadow-md">
             <CardHeader className="border-b">
                 <div className="flex flex-row items-center justify-center">
-                    <Image
-                        src={`/logo/pangolin_orange.svg`}
-                        alt={t('pangolinLogoAlt')}
-                        width="100"
-                        height="100"
+                    <BrandingLogo
+                        height={58}
+                        width={175}
                     />
                 </div>
-                <div className="text-center space-y-1">
-                    <h1 className="text-2xl font-bold mt-1">
-                        {t('welcome')}
-                    </h1>
-                    <p className="text-sm text-muted-foreground">
-                        {t('authCreateAccount')}
-                    </p>
+                <div className="text-center space-y-1 pt-3">
+                    <p className="text-muted-foreground">{getSubtitle()}</p>
                 </div>
             </CardHeader>
             <CardContent className="pt-6">
@@ -148,7 +144,7 @@ export default function SignupForm({
                             name="email"
                             render={({ field }) => (
                                 <FormItem>
-                                    <FormLabel>{t('email')}</FormLabel>
+                                    <FormLabel>{t("email")}</FormLabel>
                                     <FormControl>
                                         <Input {...field} />
                                     </FormControl>
@@ -161,7 +157,7 @@ export default function SignupForm({
                             name="password"
                             render={({ field }) => (
                                 <FormItem>
-                                    <FormLabel>{t('password')}</FormLabel>
+                                    <FormLabel>{t("password")}</FormLabel>
                                     <FormControl>
                                         <Input type="password" {...field} />
                                     </FormControl>
@@ -174,7 +170,9 @@ export default function SignupForm({
                             name="confirmPassword"
                             render={({ field }) => (
                                 <FormItem>
-                                    <FormLabel>{t('confirmPassword')}</FormLabel>
+                                    <FormLabel>
+                                        {t("confirmPassword")}
+                                    </FormLabel>
                                     <FormControl>
                                         <Input type="password" {...field} />
                                     </FormControl>
@@ -190,7 +188,7 @@ export default function SignupForm({
                         )}
 
                         <Button type="submit" className="w-full">
-                            {t('createAccount')}
+                            {t("createAccount")}
                         </Button>
                     </form>
                 </Form>

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<string>(""); // 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 && (
+            <Image
+                src={path}
+                alt="Logo"
+                width={props.width}
+                height={props.height}
+            />
+        )
+    );
+}