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

layout, components

Browse Source
This commit is contained in:
Max Peintner
2023-04-19 10:37:35 +02:00
parent 770f186abb
commit a321781355
24 changed files with 370 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
apps/login/ui/Input.tsx
View File

@@ -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>
);
},
}
);