From 9a0bf117491cf19c85eeaa2bdb81e604d38166b2 Mon Sep 17 00:00:00 2001
From: Thomas Ruoff <ThomasRuoff@gmail.com>
Date: Mon, 14 Sep 2020 23:25:18 +0200
Subject: [PATCH] add error notification next to send button

---
 components/wizard/index.tsx | 6 +++++-
 styles/index.css            | 5 +++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/components/wizard/index.tsx b/components/wizard/index.tsx
index ec02566..15229a3 100644
--- a/components/wizard/index.tsx
+++ b/components/wizard/index.tsx
@@ -73,11 +73,15 @@ function WizardInternal() {
         <DateSelect />
         <Reason />
         <Contact />
-        <div>{postDataError}</div>
         <div>
           <button type="submit" disabled={postData} className="btn btn-blue">
             {postData ? 'Speichern...' : 'Absenden'}
           </button>
+          {postDataError && (
+            <div className="error-message">
+              <strong>Error:</strong> {postDataError}
+            </div>
+          )}
         </div>
       </form>
     </>
diff --git a/styles/index.css b/styles/index.css
index 059eb1d..d163657 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -111,6 +111,11 @@
   @apply text-blue-700;
 }
 
+.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;
+}
+
 .Calendar-grid {
   @apply flex flex-wrap;
 }