TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-12 07:53:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

login cleanup, react

Browse Source
This commit is contained in:
Max Peintner
2023-04-14 17:22:59 +02:00
parent e651eacf2b
commit 770f186abb
19 changed files with 418 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/login/app/(login)/layout.tsx
View File

@@ -1,6 +1,6 @@
import { ColorService } from '#/utils/colors';
import Image from 'next/image';
import React, { useEffect } from 'react';
import { ZitadelLogo } from "#/ui/ZitadelLogo";
import { ColorService } from "#/utils/colors";
import React from "react";
export default async function Layout({
children,
@@ -11,14 +11,8 @@ export default async function Layout({
return (
<div className="mx-auto flex max-w-[400px] flex-col items-center space-y-4 py-10">
<div className="relative h-28 w-48">
<Image
fill
priority
sizes="100%"
src="https://zitadel.com/zitadel-logo-light.svg"
alt="Login logo"
/>
<div className="relative">
<ZitadelLogo height={70} width={180} />
</div>
<div className="w-full">{children}</div>

5
apps/login/app/(login)/login/page.tsx
View File

@@ -20,11 +20,8 @@ export default function Page() {
<div className="block">
<TextInput title="loginname" label="Loginname" />
</div>
<div className="hello">hello</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

36
apps/login/app/layout.tsx
View File

@@ -3,7 +3,6 @@ import "#/styles/globals.css";
import "@zitadel/react/styles.css";
import { AddressBar } from "#/ui/AddressBar";
import { GlobalNav } from "#/ui/GlobalNav";
import { VercelLogo } from "#/ui/VercelLogo";
import { ZitadelLogo } from "#/ui/ZitadelLogo";
import { Lato } from "@next/font/google";
@@ -12,33 +11,36 @@ const lato = Lato({
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={`dark [color-scheme:dark] ${lato.className}`}>
<html lang="en" className={`${darkModeClasses(false)} ${lato.className}`}>
<head />
<body className="overflow-y-scroll bg-background-dark-600 bg-[url('/grid.svg')]">
<body className="overflow-y-scroll bg-background-light-600 dark:bg-background-dark-600 bg-[url('/grid.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 p-px shadow-lg shadow-black/20">
<div className="rounded-lg bg-background-dark-600">
<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>
</div>
<div className="rounded-lg bg-vc-border-gradient p-px shadow-lg shadow-black/20">
<div className="rounded-lg bg-background-dark-500 p-3.5 lg:p-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-500 p-3.5 lg:p-8">
{children}
</div>
</div>
<div className="rounded-lg bg-vc-border-gradient p-px shadow-lg shadow-black/20">
<div className="rounded-lg bg-background-dark-600">
<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>
</div>
@@ -51,24 +53,16 @@ export default function RootLayout({
function Byline() {
return (
<div className="flex items-center justify-between space-x-4 p-3.5 lg:px-5 lg:py-3">
<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://vercel.com" title="Vercel">
<div className="w-7 text-gray-300 hover:text-gray-50">
{/* <a href="https://zitadel.com" title="ZITADEL">
<div className=" text-gray-300 hover:text-gray-50">
<ZitadelLogo />
</div>
</a>
</a> */}
<div className="text-sm font-semibold">ZITADEL</div>
</div>
<div className="flex items-center space-x-1.5">
<div className="text-sm text-gray-600">Deployed on</div>
<a href="https://vercel.com" title="Vercel">
<div className="w-16 text-gray-300 hover:text-gray-50">
<VercelLogo />
</div>
</a>
</div>
</div>
);
}