From e2e94d86a270e80b3812f610b6578328d11527b8 Mon Sep 17 00:00:00 2001
From: Thomas Ruoff <ThomasRuoff@gmail.com>
Date: Tue, 15 Sep 2020 22:53:54 +0200
Subject: [PATCH] style error message better

---
 components/wizard/index.tsx | 6 ++----
 styles/index.css            | 8 ++++++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/components/wizard/index.tsx b/components/wizard/index.tsx
index 15229a3..0f42bd9 100644
--- a/components/wizard/index.tsx
+++ b/components/wizard/index.tsx
@@ -73,14 +73,12 @@ function WizardInternal() {
         <DateSelect />
         <Reason />
         <Contact />
-        <div>
+        <div className="flex items-end">
           <button type="submit" disabled={postData} className="btn btn-blue">
             {postData ? 'Speichern...' : 'Absenden'}
           </button>
           {postDataError && (
-            <div className="error-message">
-              <strong>Error:</strong> {postDataError}
-            </div>
+            <div className="error-message flex-grow">{postDataError}</div>
           )}
         </div>
       </form>
diff --git a/styles/index.css b/styles/index.css
index d163657..6a3c641 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -112,8 +112,12 @@
 }
 
 .error-message {
-  @apply inline-block bg-red-200 border-solid border-2 border-red-700 rounded text-red-700 py-1 px-2;
-  max-width: 10rem;
+  @apply flex items-center bg-red-200 border-solid border border-red-700 rounded text-red-700 py-2 px-3;
+}
+
+.error-message:before {
+  @apply mr-2;
+  content: '\274c';
 }
 
 .Calendar-grid {