Fixed build animation

This commit is contained in:
Lucas Oliveira 2024-01-30 16:36:22 +01:00
commit 0257e99288
2 changed files with 6 additions and 6 deletions

View file

@ -383,14 +383,14 @@ export default function GenericNode({
) )
} }
> >
<div className="generic-node-status-position flex items-center"> <div className="generic-node-status-position flex items-center justify-center">
<IconComponent <IconComponent
name="Zap" name="Zap"
className={classNames( className={classNames(
validationStatus && validationStatus.valid validationStatus && validationStatus.valid
? "green-status" ? "green-status"
: "status-build-animation", : "status-build-animation",
"h-5 stroke-1" "h-5 stroke-1 absolute"
)} )}
/> />
<IconComponent <IconComponent
@ -399,7 +399,7 @@ export default function GenericNode({
validationStatus && !validationStatus.valid validationStatus && !validationStatus.valid
? "red-status" ? "red-status"
: "status-build-animation", : "status-build-animation",
"h-5 stroke-1" "h-5 stroke-1 absolute"
)} )}
/> />
<IconComponent <IconComponent
@ -408,7 +408,7 @@ export default function GenericNode({
!validationStatus || isBuilding !validationStatus || isBuilding
? "yellow-status" ? "yellow-status"
: "status-build-animation", : "status-build-animation",
"h-5 stroke-1" "h-5 stroke-1 absolute"
)} )}
/> />
</div> </div>

View file

@ -290,7 +290,7 @@
@apply hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0; @apply hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0;
} }
.generic-node-status { .generic-node-status {
@apply opacity-100; @apply opacity-100 animate-wiggle;
} }
.green-status { .green-status {
@apply generic-node-status text-status-green fill-status-green; @apply generic-node-status text-status-green fill-status-green;
@ -302,7 +302,7 @@
@apply generic-node-status text-status-yellow fill-status-yellow; @apply generic-node-status text-status-yellow fill-status-yellow;
} }
.status-build-animation { .status-build-animation {
@apply hidden animate-spin text-ring opacity-0; @apply opacity-0;
} }
.status-div { .status-div {
@apply absolute w-4 duration-200 ease-in-out; @apply absolute w-4 duration-200 ease-in-out;