layout, components

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

@@ -1,14 +0,0 @@
-import { DefaultTags } from '#/ui/DefaultTags';
-
-export default function Head() {
-  return (
-    <>
-      <DefaultTags />
-      <title>ZITADEL Login Playground</title>
-      <meta
-        name="description"
-        content="This is a ZITADEL Login Playground to get an understanding how the login API works."
-      />
-    </>
-  );
-}

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

@@ -21,7 +21,9 @@ export default function Page() {
           <TextInput title="loginname" label="Loginname" />
         </div>
 
-        <div>{/* <IdentityProviders /> */}</div>
+        <div>
+          <IdentityProviders />
+        </div>
         <div className="mt-8 flex w-full flex-row items-center justify-between">
           <Button type="button" variant={ButtonVariants.Secondary}>
             back

apps/login/app/(login)/mfa/create/page.tsx

@@ -1,7 +1,8 @@
-'use client';
-import { Button, ButtonVariants } from '#/ui/Button';
-import { TextInput } from '#/ui/Input';
-import { useRouter } from 'next/navigation';
+"use client";
+import { Button, ButtonVariants } from "#/ui/Button";
+import { TextInput } from "#/ui/Input";
+import UserAvatar from "#/ui/UserAvatar";
+import { useRouter } from "next/navigation";
 
 export default function Page() {
   const router = useRouter();
@@ -11,17 +12,7 @@ export default function Page() {
       <h1>Password</h1>
       <p className="ztdl-p mb-6 block">Enter your password.</p>
 
-      <div className="flex w-full flex-row items-center rounded-full border p-[1px] dark:border-white/20">
-        {/* <Image
-          height={20}
-          width={20}
-          className="avatar-img"
-          src=""
-          alt="user-avatar"
-        /> */}
-        <div className="h-8 w-8 rounded-full bg-primary-dark-800"></div>
-        <span className="ml-4 text-14px">max@zitadel.cloud</span>
-      </div>
+      <UserAvatar name="max@zitadel.com"></UserAvatar>
 
       <div className="w-full">
         <TextInput type="password" label="Password" />

apps/login/app/(login)/password/change/page.tsx

@@ -1,7 +1,8 @@
-'use client';
-import { Button, ButtonVariants } from '#/ui/Button';
-import { TextInput } from '#/ui/Input';
-import { useRouter } from 'next/navigation';
+"use client";
+import { Button, ButtonVariants } from "#/ui/Button";
+import { TextInput } from "#/ui/Input";
+import UserAvatar from "#/ui/UserAvatar";
+import { useRouter } from "next/navigation";
 
 export default function Page() {
   const router = useRouter();
@@ -11,17 +12,7 @@ export default function Page() {
       <h1>Password</h1>
       <p className="ztdl-p mb-6 block">Enter your password.</p>
 
-      <div className="flex w-full flex-row items-center rounded-full border p-[1px] dark:border-white/20">
-        {/* <Image
-          height={20}
-          width={20}
-          className="avatar-img"
-          src=""
-          alt="user-avatar"
-        /> */}
-        <div className="h-8 w-8 rounded-full bg-primary-dark-800"></div>
-        <span className="ml-4 text-14px">max@zitadel.cloud</span>
-      </div>
+      <UserAvatar name="max@zitadel.com"></UserAvatar>
 
       <div className="w-full">
         <TextInput type="password" label="Password" />

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

@@ -1,7 +1,8 @@
-'use client';
-import { Button, ButtonVariants } from '#/ui/Button';
-import { TextInput } from '#/ui/Input';
-import { useRouter } from 'next/navigation';
+"use client";
+import { Button, ButtonVariants } from "#/ui/Button";
+import { TextInput } from "#/ui/Input";
+import UserAvatar from "#/ui/UserAvatar";
+import { useRouter } from "next/navigation";
 
 export default function Page() {
   const router = useRouter();
@@ -11,17 +12,7 @@ export default function Page() {
       <h1>Password</h1>
       <p className="ztdl-p mb-6 block">Enter your password.</p>
 
-      <div className="flex w-full flex-row items-center rounded-full border p-[1px] dark:border-white/20">
-        {/* <Image
-          height={20}
-          width={20}
-          className="avatar-img"
-          src=""
-          alt="user-avatar"
-        /> */}
-        <div className="h-8 w-8 rounded-full bg-primary-dark-800"></div>
-        <span className="ml-4 text-14px">max@zitadel.cloud</span>
-      </div>
+      <UserAvatar name="max@zitadel.com"></UserAvatar>
 
       <div className="w-full">
         <TextInput type="password" label="Password" />

apps/login/app/(login)/passwordless/create/page.tsx

@@ -1,7 +1,8 @@
-'use client';
-import { Button, ButtonVariants } from '#/ui/Button';
-import { TextInput } from '#/ui/Input';
-import { useRouter } from 'next/navigation';
+"use client";
+import { Button, ButtonVariants } from "#/ui/Button";
+import { TextInput } from "#/ui/Input";
+import UserAvatar from "#/ui/UserAvatar";
+import { useRouter } from "next/navigation";
 
 export default function Page() {
   const router = useRouter();
@@ -11,17 +12,7 @@ export default function Page() {
       <h1>Password</h1>
       <p className="ztdl-p mb-6 block">Enter your password.</p>
 
-      <div className="flex w-full flex-row items-center rounded-full border p-[1px] dark:border-white/20">
-        {/* <Image
-          height={20}
-          width={20}
-          className="avatar-img"
-          src=""
-          alt="user-avatar"
-        /> */}
-        <div className="h-8 w-8 rounded-full bg-primary-dark-800"></div>
-        <span className="ml-4 text-14px">max@zitadel.cloud</span>
-      </div>
+      <UserAvatar name="max@zitadel.cloud"></UserAvatar>
 
       <div className="w-full">
         <TextInput type="password" label="Password" />

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

@@ -1,7 +1,8 @@
-'use client';
-import { Button, ButtonVariants } from '#/ui/Button';
-import { TextInput } from '#/ui/Input';
-import { useRouter } from 'next/navigation';
+"use client";
+import { Button, ButtonVariants } from "#/ui/Button";
+import { TextInput } from "#/ui/Input";
+import UserAvatar from "#/ui/UserAvatar";
+import { useRouter } from "next/navigation";
 
 export default function Page() {
   const router = useRouter();
@@ -11,17 +12,7 @@ export default function Page() {
       <h1>Password</h1>
       <p className="ztdl-p mb-6 block">Enter your password.</p>
 
-      <div className="flex w-full flex-row items-center rounded-full border p-[1px] dark:border-white/20">
-        {/* <Image
-          height={20}
-          width={20}
-          className="avatar-img"
-          src=""
-          alt="user-avatar"
-        /> */}
-        <div className="h-8 w-8 rounded-full bg-primary-dark-800"></div>
-        <span className="ml-4 text-14px">max@zitadel.cloud</span>
-      </div>
+      <UserAvatar name="max@zitadel.com"></UserAvatar>
 
       <div className="w-full">
         <TextInput type="password" label="Password" />

apps/login/app/head.tsx

@@ -1,14 +0,0 @@
-import { DefaultTags } from '#/ui/DefaultTags';
-
-export default function Head() {
-  return (
-    <>
-      <DefaultTags />
-      <title>ZITADEL Login Playground</title>
-      <meta
-        name="description"
-        content="This is a ZITADEL Login Playground to get an understanding how the login API works."
-      />
-    </>
-  );
-}

apps/login/app/layout.tsx

@@ -1,68 +1,73 @@
+"use client";
+
 import "#/styles/globals.css";
 // include styles from the ui package
 import "@zitadel/react/styles.css";
 import { AddressBar } from "#/ui/AddressBar";
 import { GlobalNav } from "#/ui/GlobalNav";
-import { ZitadelLogo } from "#/ui/ZitadelLogo";
-import { Lato } from "@next/font/google";
+import { Lato } from "next/font/google";
+import { ThemeProvider } from "next-themes";
+import Byline from "#/ui/Byline";
 
 const lato = Lato({
   weight: "400",
   subsets: ["latin"],
 });
 
-const darkModeClasses = (d: boolean) =>
-  d ? "dark [color-scheme:dark] ui-dark" : "";
-
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className={`${darkModeClasses(false)} ${lato.className}`}>
+    <html lang="en" className={`${lato.className}`}>
       <head />
-      <body className="overflow-y-scroll bg-background-light-600 dark:bg-background-dark-600 bg-[url('/grid.svg')]">
-        <GlobalNav />
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        storageKey="cp-theme"
+        // value={{ dark: "dark ui-dark" }}
+        // [color-scheme:dark]
+      >
+        <body className="overflow-y-scroll bg-background-light-600 dark:bg-background-dark-600 bg-[url('/grid-light.svg')] dark:bg-[url('/grid-dark.svg')]">
+          <GlobalNav />
 
-        <div className="lg:pl-72">
-          <div className="mx-auto max-w-xl space-y-8 px-2 pt-20 lg:py-8 lg:px-8">
-            <div className="rounded-lg bg-vc-border-gradient dark:dark-bg-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
-              <div className="rounded-lg bg-background-light-500 dark:bg-background-dark-600">
-                <AddressBar />
+          <div className="lg:pl-72">
+            <div className="mx-auto max-w-xl space-y-8 px-2 pt-20 lg:py-8 lg:px-8">
+              <div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
+                <div className="rounded-lg bg-background-light-500 dark:bg-background-dark-600">
+                  <AddressBar />
+                </div>
               </div>
-            </div>
 
-            <div className="rounded-lg bg-vc-border-gradient dark:dark-bg-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
-              <div className="rounded-lg bg-background-light-500 dark:bg-background-dark-500 p-3.5 lg:p-8">
-                {children}
+              <div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
+                <div className="rounded-lg bg-background-light-500 dark:bg-background-dark-500 p-3.5 lg:p-8">
+                  {children}
+                </div>
               </div>
-            </div>
 
-            <div className="rounded-lg bg-vc-border-gradient dark:dark-bg-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
-              <div className="rounded-lg bg-background-light-500 dark:bg-background-dark-600">
-                <Byline />
+              <div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
+                <div className="rounded-lg bg-background-light-500 dark:bg-background-dark-600">
+                  <Byline />
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </body>
+        </body>
+      </ThemeProvider>
     </html>
   );
 }
 
-function Byline() {
-  return (
-    <div className="flex items-center p-3.5 lg:px-5 lg:py-3">
-      <div className="flex items-center space-x-1.5">
-        <div className="text-sm text-gray-600">By</div>
-        {/* <a href="https://zitadel.com" title="ZITADEL">
-          <div className=" text-gray-300 hover:text-gray-50">
-            <ZitadelLogo />
-          </div>
-        </a> */}
-        <div className="text-sm font-semibold">ZITADEL</div>
-      </div>
-    </div>
-  );
-}
+// export const metadata = () => {
+//   return (
+//     <>
+//       <DefaultTags />
+//       <title>ZITADEL Login Playground</title>
+//       <meta
+//         name="description"
+//         content="This is a ZITADEL Login Playground to get an understanding how the login API works."
+//       />
+//     </>
+//   );
+// };

apps/login/app/page.tsx

@@ -4,7 +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-300">Pages</h1>
+      <h1 className="text-xl font-medium text-gray-800 dark:text-gray-300">
+        Pages
+      </h1>
 
       <div className="space-y-10 text-white">
         {demos.map((section) => {
@@ -19,14 +21,14 @@ export default function Page() {
                     <Link
                       href={`/${item.slug}`}
                       key={item.name}
-                      className="bg-background-light-400 group block space-y-1.5 rounded-lg px-5 py-3 hover:bg-background-dark-300 dark:bg-background-dark-400"
+                      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-gray-300 dark:border-gray-600 transition-all "
                     >
-                      <div className="font-medium text-gray-200 group-hover:text-gray-50">
+                      <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>
 
                       {item.description ? (
-                        <div className="line-clamp-3 text-sm text-gray-400 group-hover:text-gray-300">
+                        <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">
                           {item.description}
                         </div>
                       ) : null}