From b54bb7c1b912e2096f93ce03d70c5912c8023dce Mon Sep 17 00:00:00 2001
From: Katja Lutz <mail@katjalutz.ch>
Date: Sat, 23 Jul 2022 19:13:52 +0200
Subject: [PATCH] feat: make unsupported devices warning more obvious

---
 src/components/WelcomeModal.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/WelcomeModal.tsx b/src/components/WelcomeModal.tsx
index cb19e10..d07e6e8 100644
--- a/src/components/WelcomeModal.tsx
+++ b/src/components/WelcomeModal.tsx
@@ -958,8 +958,12 @@ const WelcomeModal: Component = (props) => {
           <LaunchIcon />
           Loslegen
         </button>
-        <div class="w-full text-sm lg:hidden bg-error bg-opacity-50 ring-2 ring-offset-2 ring-error text-error-content rounded p-3 shadow-2xl flex items-center justify-center gap-3">
-          <WarningIcon /> Bitte verwende einen Laptop oder Computer!
+        <div
+          style={{ animation: "bounce 1.5s infinite;" }}
+          class="animate-bounce w-full text-sm font-bold lg:hidden bg-red-300 ring-2 ring-offset-2 ring-error text-error-content rounded p-3 shadow-2xl flex items-center justify-center gap-3"
+        >
+          <WarningIcon /> Bitte verwende einen Laptop oder Computer mit einer
+          Mindestbreite von 1024 Pixel!
         </div>
       </div>
       <a