Add red glow on error screen

This commit is contained in:
0x1eef 2024-09-02 19:52:46 -03:00
parent b96824f86f
commit ebe5d1616a
3 changed files with 13 additions and 3 deletions

View file

@ -2,6 +2,10 @@
** vNEXT
**** Add red glow on error screen
The icon shown on the error screen how has an animation
that adds a red glow
**** Rotate icon on loader screen
The icon shown on the loader screen now slowly rotates
to help indicate the loading state

View file

@ -3,6 +3,7 @@
--primary-color: #FFF;
--secondary-color: #333333;
--accent-color: #007BFF;
--error-color: #FF0000;
}
@font-face {
@ -28,3 +29,9 @@ body {
img[data-testid="spin"] {
animation: rotate 2s linear infinite;
}
img[data-testid="error"] {
transition: filter 0.3s ease;
filter: drop-shadow(0 0 20px var(--error-color))
drop-shadow(0 0 10px var(--error-color));
}

View file

@ -18,9 +18,8 @@ export function App() {
} else if (error) {
return (
<div data-testid="error" className="h-14 flex flex-col justify-center">
<div className="p-2 flex items-center w-full h-full min-w-48 justify-center">
<img className="w-8 h-8" src={`/images/icon.svg`} />
<span className="ml-3 text-xs">{t("error")}</span>
<div className="p-2 flex items-center h-full min-w-48 justify-center">
<img data-testid="error" className="w-8 h-8" src="/images/icon.svg" />
</div>
</div>
);