layout, components

apps/login/ui/AddressBar.tsx

@@ -32,6 +32,7 @@ export function AddressBar() {
             {pathname
               .split("/")
               .slice(1)
+              .filter((s) => !!s)
               .map((segment) => {
                 return (
                   <React.Fragment key={segment}>

apps/login/ui/Byline.tsx

@@ -0,0 +1,18 @@
+import Theme from "./Theme";
+
+export default function Byline() {
+  return (
+    <div className="flex items-center justify-between w-full 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>
+      <Theme />
+    </div>
+  );
+}

apps/login/ui/GlobalNav.tsx

@@ -25,7 +25,7 @@ export function GlobalNav() {
             <ZitadelLogo />
           </div>
 
-          <h2 className="text-blue-500 font-bold uppercase transform translate-y-2 text-sm tracking-wide">
+          <h2 className="text-blue-500 font-bold uppercase transform translate-y-2 text-sm">
             Login
           </h2>
         </Link>

apps/login/ui/Input.tsx

@@ -1,13 +1,13 @@
-'use client';
-import { CheckCircleIcon } from '@heroicons/react/24/solid';
-import clsx from 'clsx';
+"use client";
+import { CheckCircleIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
 import React, {
   ChangeEvent,
   DetailedHTMLProps,
   forwardRef,
   InputHTMLAttributes,
   ReactNode,
-} from 'react';
+} from "react";
 
 export type TextInputProps = DetailedHTMLProps<
   InputHTMLAttributes<HTMLInputElement>,
@@ -25,15 +25,15 @@ export type TextInputProps = DetailedHTMLProps<
 
 const styles = (error: boolean, disabled: boolean) =>
   clsx({
-    'h-40px mb-2px rounded p-2 bg-input-light-background dark:bg-input-dark-background transition-colors duration-300 grow':
+    "h-40px mb-2px rounded p-[7px] bg-input-light-background dark:bg-input-dark-background transition-colors duration-300 grow":
       true,
-    'border border-input-light-border dark:border-input-dark-border hover:border-black hover:dark:border-white focus:border-primary-light-500 focus:dark:border-primary-dark-500':
+    "border border-input-light-border dark:border-input-dark-border hover:border-black hover:dark:border-white focus:border-primary-light-500 focus:dark:border-primary-dark-500":
       true,
-    'focus:outline-none focus:ring-0 text-base text-black dark:text-white placeholder:italic placeholder-gray-700 dark:placeholder-gray-700':
+    "focus:outline-none focus:ring-0 text-base text-black dark:text-white placeholder:italic placeholder-gray-700 dark:placeholder-gray-700":
       true,
-    'border border-warn-light-500 dark:border-warn-dark-500 hover:border-warn-light-500 hover:dark:border-warn-dark-500 focus:border-warn-light-500 focus:dark:border-warn-dark-500':
+    "border border-warn-light-500 dark:border-warn-dark-500 hover:border-warn-light-500 hover:dark:border-warn-dark-500 focus:border-warn-light-500 focus:dark:border-warn-dark-500":
       error,
-    'pointer-events-none text-gray-500 dark:text-gray-800 border border-gray-700 dark:border-gray-900 border-opacity-30 dark:border-opacity-30 hover:border-gray-700 hover:dark:border-gray-900 hover:border-opacity-30 hover:dark:border-opacity-30 cursor-default':
+    "pointer-events-none text-gray-500 dark:text-gray-800 border border-gray-700 dark:border-gray-900 border-opacity-30 dark:border-opacity-30 hover:border-gray-700 hover:dark:border-gray-900 hover:border-opacity-30 hover:dark:border-opacity-30 cursor-default":
       disabled,
   });
 
@@ -52,16 +52,16 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
       onBlur,
       ...props
     },
-    ref,
+    ref
   ) => {
     return (
       <label className="flex flex-col text-12px text-input-light-label dark:text-input-dark-label">
         <span
           className={`leading-14.5px mb-1 ${
-            error ? 'text-warn-light-500 dark:text-warn-dark-500' : ''
+            error ? "text-warn-light-500 dark:text-warn-dark-500" : ""
           }`}
         >
-          {label} {required && '*'}
+          {label} {required && "*"}
         </span>
         <input
           ref={ref}
@@ -70,14 +70,14 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
           required={required}
           disabled={disabled}
           placeholder={placeholder}
-          autoComplete={props.autoComplete ?? 'off'}
+          autoComplete={props.autoComplete ?? "off"}
           onChange={(e) => onChange && onChange(e)}
           onBlur={(e) => onBlur && onBlur(e)}
           {...props}
         />
 
         <div className="leading-14.5px h-14.5px text-warn-light-500 dark:text-warn-dark-500 flex flex-row items-center text-12px">
-          <span>{error ? error : ' '}</span>
+          <span>{error ? error : " "}</span>
         </div>
 
         {success && (
@@ -88,5 +88,5 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
         )}
       </label>
     );
-  },
+  }
 );

apps/login/ui/Theme.tsx

@@ -0,0 +1,36 @@
+"use client";
+import { Switch } from "@headlessui/react";
+import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
+import { useTheme } from "next-themes";
+
+export default function Theme() {
+  const { resolvedTheme, setTheme } = useTheme();
+
+  const isDark = resolvedTheme === "dark";
+  return (
+    <Switch
+      checked={isDark}
+      onChange={(checked) => setTheme(checked ? "dark" : "light")}
+      className={`${
+        isDark
+          ? "!bg-gray-800 dark:bg-background-dark-400"
+          : "!bg-gray-100 dark:bg-background-dark-400"
+      }
+      relative inline-flex h-4 w-9 items-center rounded-full`}
+    >
+      <span className="sr-only">Dark mode enabled</span>
+      <div
+        aria-hidden="true"
+        className={`${
+          isDark ? "translate-x-5" : "translate-x-0"
+        } flex flex-row items-center justify-center h-4 w-4 transform rounded-full bg-white transition-all shadow dark:bg-background-dark-500 ring-1 ring-gray-200 dark:ring-gray-800 ring-offset-1 ring-offset-white dark:ring-offset-background-dark-500`}
+      >
+        {isDark ? (
+          <MoonIcon className="dark:text-amber-500 h-4 w-4" />
+        ) : (
+          <SunIcon className="text-amber-500 h-4 w-4" />
+        )}
+      </div>
+    </Switch>
+  );
+}

apps/login/ui/UserAvatar.tsx

@@ -0,0 +1,19 @@
+type Props = {
+  name: string;
+};
+
+export default function UserAvatar({ name }: Props) {
+  return (
+    <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-light-700 dark:bg-primary-dark-800"></div>
+      <span className="ml-4 text-14px">{name}</span>
+    </div>
+  );
+}