branding assets

apps/login/app/(login)/accounts/page.tsx

@@ -45,7 +45,7 @@ export default async function Page() {
                         loginName: session.factors.user.loginName,
                       })
                 }
-                className="group flex flex-row items-center border border-divider-light hover:shadow-lg dark:hover:bg-white/10 py-2 px-4 rounded-md transition-all"
+                className="group flex flex-row items-center bg-background-light-400 dark:bg-background-dark-400  border border-divider-light hover:shadow-lg dark:hover:bg-white/10 py-2 px-4 rounded-md transition-all"
               >
                 <div className="pr-4">
                   <Avatar

apps/login/app/(login)/layout.tsx

@@ -1,15 +1,31 @@
+import { BrandingSettings } from "@zitadel/server";
 import { ZitadelLogo } from "#/ui/ZitadelLogo";
 import React from "react";
+import { getBrandingSettings, server } from "#/lib/zitadel";
+import { Logo } from "#/ui/Logo";
 
 export default async function Layout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const branding: BrandingSettings = await getBrandingSettings(server);
+  let partial: Partial<BrandingSettings> | undefined;
+  if (branding) {
+    partial = {
+      lightTheme: branding?.lightTheme,
+      darkTheme: branding?.darkTheme,
+    };
+  }
   return (
     <div className="mx-auto flex flex-col items-center space-y-4">
       <div className="relative">
-        <ZitadelLogo height={70} width={180} />
+        <Logo
+          lightSrc={branding.lightTheme?.logoUrl ?? "/zitadel-logo-dark.svg"}
+          darkSrc={branding.darkTheme?.logoUrl ?? "/zitadel-logo-light.svg"}
+          height={150}
+          width={150}
+        />
       </div>
 
       <div className="w-full">{children}</div>

apps/login/app/page.tsx

@@ -4,11 +4,9 @@ import Link from "next/link";
 export default function Page() {
   return (
     <div className="space-y-8">
-      <h1 className="text-xl font-medium text-gray-800 dark:text-gray-300">
-        Pages
-      </h1>
+      <h1 className="text-xl font-medium">Pages</h1>
 
-      <div className="space-y-10 text-white">
+      <div className="space-y-10">
         {demos.map((section) => {
           return (
             <div key={section.name} className="space-y-5">
@@ -21,14 +19,12 @@ export default function Page() {
                     <Link
                       href={`/${item.slug}`}
                       key={item.name}
-                      className="bg-background-light-400 dark:bg-background-dark-400 group block space-y-1.5 rounded-lg px-5 py-3 hover:bg-background-light-500 hover:dark:bg-background-dark-300 hover:shadow-lg border border-divider-light dark:border-divider-dark transition-all "
+                      className="bg-background-light-400 dark:bg-background-dark-400 group block space-y-1.5 rounded-md px-5 py-3 hover:shadow-lg hover:dark:bg-white/10 border border-divider-light dark:border-divider-dark transition-all "
                     >
-                      <div className="font-medium text-gray-600 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-gray-300">
-                        {item.name}
-                      </div>
+                      <div className="font-medium">{item.name}</div>
 
                       {item.description ? (
-                        <div className="line-clamp-3 text-sm text-gray-500 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300">
+                        <div className="line-clamp-3 text-sm text-text-light-secondary-500 dark:text-text-dark-secondary-500">
                           {item.description}
                         </div>
                       ) : null}

apps/login/next.config.js

@@ -7,6 +7,12 @@ const nextConfig = {
   },
   images: {
     remotePatterns: [
+      {
+        protocol: "https",
+        hostname: process.env.ZITADEL_API_URL.replace("https://", ""),
+        port: "",
+        pathname: "/**",
+      },
       {
         protocol: "https",
         hostname: "zitadel.com",

apps/login/ui/Logo.tsx

@@ -0,0 +1,33 @@
+import Image from "next/image";
+
+type Props = {
+  darkSrc: string;
+  lightSrc: string;
+  height?: number;
+  width?: number;
+};
+
+export function Logo({ lightSrc, darkSrc, height = 40, width = 147.5 }: Props) {
+  return (
+    <>
+      <div className="hidden dark:flex">
+        <Image
+          height={height}
+          width={width}
+          src={darkSrc}
+          alt="logo"
+          priority={true}
+        />
+      </div>
+      <div className="flex dark:hidden">
+        <Image
+          height={height}
+          width={width}
+          priority={true}
+          src={lightSrc}
+          alt="logo"
+        />
+      </div>
+    </>
+  );
+}