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

red warn color

Browse Source
This commit is contained in:
Max Peintner
2023-05-24 14:56:06 +02:00
parent f0bd712859
commit 34ec74badf
2 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/login/app/(login)/error.tsx
View File

@@ -10,9 +10,9 @@ export default function Error({ error, reset }: any) {
}, [error]); }, [error]);
return ( return (
<Boundary labels={["Home page Error UI"]} color="pink"> <Boundary labels={["Home page Error UI"]} color="red">
<div className="space-y-4"> <div className="space-y-4">
<div className="text-sm text-warn-light-500 dark:text-warn-dark-500"> <div className="text-sm text-red-500 dark:text-red-500">
<strong className="font-bold">Error:</strong> {error?.message} <strong className="font-bold">Error:</strong> {error?.message}
</div> </div>
<div> <div>

10
apps/login/ui/Boundary.tsx
View File

@@ -8,15 +8,16 @@ const Label = ({
}: { }: {
children: React.ReactNode; children: React.ReactNode;
animateRerendering?: boolean; animateRerendering?: boolean;
color?: "default" | "pink" | "blue" | "violet" | "cyan" | "orange"; color?: "default" | "pink" | "blue" | "violet" | "cyan" | "orange" | "red";
}) => { }) => {
return ( return (
<div <div
className={clsx("rounded-full px-1.5 shadow-[0_0_1px_3px_black]", { className={clsx("rounded-full px-1.5", {
"bg-gray-800 text-gray-500": color === "default", "bg-gray-800 text-gray-500": color === "default",
"bg-pink-500 text-pink-100": color === "pink", "bg-pink-500 text-pink-100": color === "pink",
"bg-blue-500 text-blue-100": color === "blue", "bg-blue-500 text-blue-100": color === "blue",
"bg-cyan-500 text-cyan-100": color === "cyan", "bg-cyan-500 text-cyan-100": color === "cyan",
"bg-red-500 text-red-100": color === "red",
"bg-violet-500 text-violet-100": color === "violet", "bg-violet-500 text-violet-100": color === "violet",
"bg-orange-500 text-orange-100": color === "orange", "bg-orange-500 text-orange-100": color === "orange",
"animate-[highlight_1s_ease-in-out_1]": animateRerendering, "animate-[highlight_1s_ease-in-out_1]": animateRerendering,
@@ -36,7 +37,7 @@ export const Boundary = ({
children: React.ReactNode; children: React.ReactNode;
labels?: string[]; labels?: string[];
size?: "small" | "default"; size?: "small" | "default";
color?: "default" | "pink" | "blue" | "violet" | "cyan" | "orange"; color?: "default" | "pink" | "blue" | "violet" | "cyan" | "orange" | "red";
animateRerendering?: boolean; animateRerendering?: boolean;
}) => { }) => {
return ( return (
@@ -48,6 +49,7 @@ export const Boundary = ({
"border-pink-500": color === "pink", "border-pink-500": color === "pink",
"border-blue-500": color === "blue", "border-blue-500": color === "blue",
"border-cyan-500": color === "cyan", "border-cyan-500": color === "cyan",
"border-red-500": color === "red",
"border-violet-500": color === "violet", "border-violet-500": color === "violet",
"border-orange-500": color === "orange", "border-orange-500": color === "orange",
"animate-[rerender_1s_ease-in-out_1] text-pink-500": animateRerendering, "animate-[rerender_1s_ease-in-out_1] text-pink-500": animateRerendering,
@@ -55,7 +57,7 @@ export const Boundary = ({
> >
<div <div
className={clsx( className={clsx(
"absolute -top-2.5 flex space-x-1 text-[9px] uppercase leading-4 tracking-widest", "absolute -top-2 flex space-x-1 text-[9px] uppercase leading-4 tracking-widest",
{ {
"left-3 lg:left-5": size === "small", "left-3 lg:left-5": size === "small",
"left-4 lg:left-9": size === "default", "left-4 lg:left-9": size === "default",