diff --git a/apps/login/app/(login)/layout.tsx b/apps/login/app/(login)/layout.tsx index b280b4c010e..957c0e40b9b 100644 --- a/apps/login/app/(login)/layout.tsx +++ b/apps/login/app/(login)/layout.tsx @@ -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 (
-
- Login logo +
+
{children}
diff --git a/apps/login/app/(login)/login/page.tsx b/apps/login/app/(login)/login/page.tsx index 5a882d8ca60..9753d41b6a1 100644 --- a/apps/login/app/(login)/login/page.tsx +++ b/apps/login/app/(login)/login/page.tsx @@ -20,11 +20,8 @@ export default function Page() {
-
hello
-
- -
+
{/* */}
@@ -55,7 +56,7 @@ export function GlobalNav() { {demos.map((section) => { return (
-
+
{section.name}
@@ -88,11 +89,12 @@ function GlobalNavItem({ onClick={close} href={`/${item.slug}`} className={clsx( - 'block rounded-md px-3 py-2 text-sm font-medium hover:text-gray-300', + "block rounded-md px-3 py-2 text-sm font-medium hover:text-black dark:hover:text-gray-300", { - 'text-gray-500 hover:bg-gray-800': !isActive, - 'text-gray-200': isActive, - }, + "text-gray-500 dark:text-gray-500 hover:bg-gray-100 hover:dark:bg-gray-800": + !isActive, + "text-gray-800 dark:text-gray-200": isActive, + } )} > {item.name} diff --git a/apps/login/ui/IdentityProviders.tsx b/apps/login/ui/IdentityProviders.tsx index 9fcd2f27b0b..3dedc04d4e6 100644 --- a/apps/login/ui/IdentityProviders.tsx +++ b/apps/login/ui/IdentityProviders.tsx @@ -1,9 +1,10 @@ -import { SignInWithGoogle } from "@zitadel/react"; +import { SignInWithGoogle, SignInWithGitlab } from "@zitadel/react"; export default function IdentityProviders() { return ( -
+
+
); } diff --git a/apps/login/ui/VercelLogo.tsx b/apps/login/ui/VercelLogo.tsx deleted file mode 100644 index 6550d288430..00000000000 --- a/apps/login/ui/VercelLogo.tsx +++ /dev/null @@ -1,11 +0,0 @@ -export function VercelLogo() { - return ( - - - - ); -} diff --git a/apps/login/ui/ZitadelLogo.tsx b/apps/login/ui/ZitadelLogo.tsx index c1a52405337..20c7e066bdd 100644 --- a/apps/login/ui/ZitadelLogo.tsx +++ b/apps/login/ui/ZitadelLogo.tsx @@ -1,14 +1,39 @@ -import { ZitadelLogoDark } from './ZitadelLogoDark'; -import { ZitadelLogoLight } from './ZitadelLogoLight'; +import Image from "next/image"; +import { ZitadelLogoDark } from "./ZitadelLogoDark"; +import { ZitadelLogoLight } from "./ZitadelLogoLight"; +type Props = { + height?: number; + width?: number; +}; -export function ZitadelLogo() { +export function ZitadelLogo({ height = 40, width = 147.5 }: Props) { return ( <>
- + {/* */} + + zitadel logo
- + zitadel logo
); diff --git a/packages/zitadel-react/README.md b/packages/zitadel-react/README.md new file mode 100644 index 00000000000..0d2b62c8d6d --- /dev/null +++ b/packages/zitadel-react/README.md @@ -0,0 +1,39 @@ +# How to use + +### Install + +```sh +npm install @zitadel/react +``` + +or + +```sh +yarn add @zitadel/react +``` + +### Import styles file + +To get the styles, import them in `_app.tsx` or global styling file + +``` +import "@zitadel/react/styles.css"; +``` + +### Setup Dark mode + +to set dark theme, wrap your components in a `ui-dark` class. + +### Use components + +```tsx +import { SignInWithGoogle } from "@zitadel/react"; + +export default function IdentityProviders() { + return ( +
+ +
+ ); +} +``` diff --git a/packages/zitadel-react/src/components/SignInWithGitlab.tsx b/packages/zitadel-react/src/components/SignInWithGitlab.tsx new file mode 100644 index 00000000000..6ac1313c9f7 --- /dev/null +++ b/packages/zitadel-react/src/components/SignInWithGitlab.tsx @@ -0,0 +1,41 @@ +import * as React from "react"; + +export interface SignInWithGitlabProps { + children?: React.ReactNode; +} + +export function SignInWithGitlab(props: SignInWithGitlabProps) { + return ( +
+
+ + + + + + +
+ Sign in with Gitlab +
+ ); +} + +SignInWithGitlab.displayName = "SignInWithGitlab"; diff --git a/packages/zitadel-react/src/components/SignInWithGoogle.tsx b/packages/zitadel-react/src/components/SignInWithGoogle.tsx index d01b5ea8abb..c73d4b2183d 100644 --- a/packages/zitadel-react/src/components/SignInWithGoogle.tsx +++ b/packages/zitadel-react/src/components/SignInWithGoogle.tsx @@ -6,14 +6,49 @@ export interface SignInWithGoogleProps { export function SignInWithGoogle(props: SignInWithGoogleProps) { return ( -
- google +
+
+ + + + + + + +
Sign in with Google
); diff --git a/packages/zitadel-react/src/index.tsx b/packages/zitadel-react/src/index.tsx index a8e0fe8bee0..6bb124c0635 100644 --- a/packages/zitadel-react/src/index.tsx +++ b/packages/zitadel-react/src/index.tsx @@ -4,3 +4,8 @@ export { SignInWithGoogle, type SignInWithGoogleProps, } from "./components/SignInWithGoogle"; + +export { + SignInWithGitlab, + type SignInWithGitlabProps, +} from "./components/SignInWithGitlab"; diff --git a/packages/zitadel-react/src/styles.css b/packages/zitadel-react/src/styles.css index 6b6d4bc4be8..b5c61c95671 100644 --- a/packages/zitadel-react/src/styles.css +++ b/packages/zitadel-react/src/styles.css @@ -1,7 +1,3 @@ @tailwind base; @tailwind components; @tailwind utilities; - -.hello { - color: yellow; -} diff --git a/packages/zitadel-react/tsup.config.ts b/packages/zitadel-react/tsup.config.ts index edd820fd354..8a2f312e51e 100644 --- a/packages/zitadel-react/tsup.config.ts +++ b/packages/zitadel-react/tsup.config.ts @@ -4,7 +4,7 @@ export default defineConfig((options: Options) => ({ treeshake: true, splitting: true, publicDir: true, - entry: ["src/**/*.{tsx,png,svg}"], + entry: ["src/**/*.tsx"], format: ["esm"], dts: true, minify: true, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8a11c99bbf2..5c1edec4265 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -36,7 +36,6 @@ importers: clsx: 1.2.1 date-fns: 2.29.3 del-cli: 5.0.0 - dinero.js: 2.0.0-alpha.8 eslint-config-zitadel: workspace:* grpc-tools: 1.11.3 lint-staged: 13.0.3 @@ -62,7 +61,6 @@ importers: '@zitadel/server': link:../../packages/zitadel-server clsx: 1.2.1 date-fns: 2.29.3 - dinero.js: 2.0.0-alpha.8 next: 13.2.3_z72xxk7vwlamvgqemvc4ptm4du nice-grpc: 2.0.1 react: 18.2.0 @@ -1756,22 +1754,6 @@ packages: prettier: 2.8.0 dev: true - /@dinero.js/calculator-number/2.0.0-alpha.8: - resolution: {integrity: sha512-/L+N7g5DjcS6wlMb2hcOXWBKW2TGiG+vZDZr9ow0nsHUTdwtMarL1bmBH9fGldHhH2XsxcrjN9H+036yeNzh3Q==} - dependencies: - '@dinero.js/core': 2.0.0-alpha.8 - dev: false - - /@dinero.js/core/2.0.0-alpha.8: - resolution: {integrity: sha512-3jaw2j6J/SshlCZz5KhHkh8zP47HRmt9RpnjR0BJs2awpweVuZIyyX9qzGVUEVpml9IwzQ1U+YdXevhOxtcDgg==} - dependencies: - '@dinero.js/currencies': 2.0.0-alpha.8 - dev: false - - /@dinero.js/currencies/2.0.0-alpha.8: - resolution: {integrity: sha512-zApiqtuuPwjiM9LJA5/kNcT48VSHRiz2/mktkXjIpfxrJKzthXybUAgEenExIH6dYhLDgVmsLQZtZFOsdYl0Ag==} - dev: false - /@emotion/unitless/0.7.5: resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==} dev: false @@ -3100,14 +3082,6 @@ packages: /didyoumean/1.2.2: resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==} - /dinero.js/2.0.0-alpha.8: - resolution: {integrity: sha512-6bl+g6oh6iQ6vPR5Pd4qr7D+P5e51GYRUT3jl8HYqYeejYC5sd9OVTTbXC3WU7L25mAIbOm+diiTVz1rL4QLwg==} - dependencies: - '@dinero.js/calculator-number': 2.0.0-alpha.8 - '@dinero.js/core': 2.0.0-alpha.8 - '@dinero.js/currencies': 2.0.0-alpha.8 - dev: false - /dir-glob/3.0.1: resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==} engines: {node: '>=8'}