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

fix: use login app namespace for component theming

Browse Source
This commit is contained in:
peintnermax
2024-08-13 10:14:42 +02:00
parent e488bd9ea6
commit 222f141e99
5 changed files with 10 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/zitadel-react/src/components/SignInWithAzureAD.tsx
View File

@@ -2,15 +2,11 @@
import { ReactNode, forwardRef } from "react";
import { SignInWithIdentityProviderProps } from "./SignInWith";
import { IdpButtonClasses } from "./classes";
export const SignInWithAzureAD = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
({ children, className = "", name = "", ...props }, ref): ReactNode => (
<button
type="button"
ref={ref}
className={`ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
{...props}
>
<button type="button" ref={ref} className={`${IdpButtonClasses} ${className}`} {...props}>
<div className="ztdl-h-12 ztdl-p-[10px] ztdl-w-12 ztdl-flex ztdl-items-center ztdl-justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" className="w-full h-full">
<path fill="#f25022" d="M1 1H10V10H1z"></path>

8
packages/zitadel-react/src/components/SignInWithGithub.tsx
View File

@@ -2,15 +2,11 @@
import { ReactNode, forwardRef } from "react";
import { SignInWithIdentityProviderProps } from "./SignInWith";
import { IdpButtonClasses } from "./classes";
export const SignInWithGithub = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
({ children, className = "", name = "", ...props }, ref): ReactNode => (
<button
type="button"
ref={ref}
className={`ztdl-h-[50px] ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
{...props}
>
<button type="button" ref={ref} className={`${IdpButtonClasses} ${className}`} {...props}>
<div className="ztdl-h-8 ztdl-w-8 ztdl-mx-2 flex items-center justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"

8
packages/zitadel-react/src/components/SignInWithGitlab.tsx
View File

@@ -1,14 +1,10 @@
import { ReactNode, forwardRef } from "react";
import { SignInWithIdentityProviderProps } from "./SignInWith";
import { IdpButtonClasses } from "./classes";
export const SignInWithGitlab = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
({ children, className = "", name = "", ...props }, ref): ReactNode => (
<button
type="button"
ref={ref}
className={`ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
{...props}
>
<button type="button" ref={ref} className={`${IdpButtonClasses} ${className}`} {...props}>
<div className="ztdl-h-12 ztdl-w-12 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width={25} height={24} fill="none">
<path

8
packages/zitadel-react/src/components/SignInWithGoogle.tsx
View File

@@ -1,14 +1,10 @@
import { ReactNode, forwardRef } from "react";
import { SignInWithIdentityProviderProps } from "./SignInWith";
import { IdpButtonClasses } from "./classes";
export const SignInWithGoogle = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
({ children, className = "", name = "", ...props }, ref): ReactNode => (
<button
type="button"
ref={ref}
className={`ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
{...props}
>
<button type="button" ref={ref} className={`${IdpButtonClasses} ${className}`} {...props}>
<div className="ztdl-h-12 ztdl-w-12 ztdl-flex ztdl-items-center ztdl-justify-center">
<svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" id="Capa_1" viewBox="0 0 150 150">
<style>

2
packages/zitadel-react/src/components/classes.ts Normal file
View File

@@ -0,0 +1,2 @@
export const IdpButtonClasses =
"transition-all ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border border-divider-light hover:border-black dark:border-divider-dark hover:dark:border-white focus:border-primary-light-500 focus:dark:border-primary-dark-500 outline-none rounded-md px-4 text-sm";