Add red glow on error screen

share/wimi/CHANGELOG

@@ -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

src/css/index.css

@@ -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));
+}

src/js/components/App.tsx

@@ -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">
+        <div className="p-2 flex items-center h-full min-w-48 justify-center">
-          <img className="w-8 h-8" src={`/images/icon.svg`} />
+          <img data-testid="error" className="w-8 h-8" src="/images/icon.svg" />
-          <span className="ml-3 text-xs">{t("error")}</span>
         </div>
       </div>
     );