Add red glow on error screen
This commit is contained in:
parent
b96824f86f
commit
ebe5d1616a
3 changed files with 13 additions and 3 deletions
|
@ -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
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue