From ebe5d1616adadd3e905ef9611aa7d1950b391ac5 Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Mon, 2 Sep 2024 19:52:46 -0300
Subject: [PATCH] Add red glow on error screen

---
 share/wimi/CHANGELOG      | 4 ++++
 src/css/index.css         | 7 +++++++
 src/js/components/App.tsx | 5 ++---
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/share/wimi/CHANGELOG b/share/wimi/CHANGELOG
index 3bbe0fa..86ae159 100644
--- a/share/wimi/CHANGELOG
+++ b/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
diff --git a/src/css/index.css b/src/css/index.css
index 0ce0c52..11f21df 100644
--- a/src/css/index.css
+++ b/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));
+}
diff --git a/src/js/components/App.tsx b/src/js/components/App.tsx
index d1de92e..4527b7c 100644
--- a/src/js/components/App.tsx
+++ b/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">
-          <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>
     );