jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

feat: Add alerts tailwind constants classes

Browse source
This commit is contained in:
Igor Carvalho 2023-07-05 16:12:48 -03:00
commit 9922ea0593
3 changed files with 44 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/frontend/src/alerts/error/index.tsx
View file

@ -39,19 +39,19 @@ export default function ErrorAlert({
removeAlert(id);
}, 500);
}}
className="mt-6 w-96 cursor-pointer rounded-md bg-error-background p-4 shadow-xl"
className="error-build-message"
>
<div className="flex">
<div className="flex-shrink-0">
<XCircle className="h-5 w-5 text-status-red" aria-hidden="true" />
<XCircle className="error-build-message-circle" aria-hidden="true" />
</div>
<div className="ml-3">
<h3 className="text-sm font-medium text-error-foreground">
<h3 className="error-build-foreground">
{title}
</h3>
{list.length !== 0 ? (
<div className="mt-2 text-sm text-error-foreground">
<ul className="list-disc space-y-1 pl-5">
<div className="error-build-message-div">
<ul className="error-build-message-list">
{list.map((item, index) => (
<li key={index}>{item}</li>
))}

6
src/frontend/src/alerts/success/index.tsx
View file

@ -34,17 +34,17 @@ export default function SuccessAlert({
setShow(false);
removeAlert(id);
}}
className="mt-6 w-96 rounded-md bg-success-background p-4 shadow-xl"
className="success-alert"
>
<div className="flex">
<div className="flex-shrink-0">
<CheckCircle2
className="h-5 w-5 text-status-green"
className="success-alert-icon"
aria-hidden="true"
/>
</div>
<div className="ml-3">
<p className="text-sm font-medium text-success-foreground">
<p className="success-alert-message">
{title}
</p>
</div>

36
src/frontend/src/index.css
View file

@ -351,4 +351,40 @@ The cursor: default; property value restores the browser's default cursor style
.generic-node-desc-text {
@apply w-full px-5 pb-3 text-sm text-muted-foreground
}
.alert-icon {
@apply h-5 w-5
} /*error-build-message-circle*/
.alert-font-size {
@apply text-sm font-medium
}
.error-build-message {
@apply mt-6 w-96 cursor-pointer rounded-md bg-error-background p-4 shadow-xl
}
.error-build-message-circle {
@apply text-status-red alert-icon
}
.error-build-text {
@apply text-error-foreground
}
.error-build-foreground {
@apply error-build-text alert-font-size
}
.error-build-message-div {
@apply mt-2 text-sm error-build-text
}
.error-build-message-list {
@apply list-disc space-y-1 pl-5
}
.success-alert {
@apply mt-6 w-96 rounded-md bg-success-background p-4 shadow-xl
}
.success-alert-icon {
@apply alert-icon text-status-green
}
.success-alert-message {
@apply alert-font-size text-success-foreground
}
}