From 2d195fd48cbbb2da6f92f3623321bf8b2bfeb9e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Syn=C3=A1=C4=8Dek?=
 <ondrejsynacek@fastmail.com>
Date: Fri, 25 Dec 2020 10:03:50 +0100
Subject: [PATCH] fix: improve styling for errors

---
 lib/frontend/components/Input.svelte  | 14 ++++++++++++++
 lib/frontend/components/Status.svelte | 11 ++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/lib/frontend/components/Input.svelte b/lib/frontend/components/Input.svelte
index 3a3be84..2db8a99 100644
--- a/lib/frontend/components/Input.svelte
+++ b/lib/frontend/components/Input.svelte
@@ -1,5 +1,6 @@
 <style>
   #form {
+    box-sizing: border-box;
     flex: 1;
     display: flex;
     min-width: 300px;
@@ -13,6 +14,10 @@
     flex: 1;
     font-size: 1rem;
   }
+
+  .input--error {
+    border: 1px solid firebrick;
+  }
 </style>
 
 <script>
@@ -28,6 +33,13 @@
     value = e.currentTarget.value
   }
 
+  let inputClasses = ''
+  $: inputClasses = [
+    error ? 'input--error' : '',
+    pending ? 'input--pending': '',
+  ].join(' ')
+  console.log(inputClasses)
+
   const handleSubmit = async (e) => {
     e.preventDefault()
     createEvent(value, { logger })
@@ -40,6 +52,7 @@
     pattern="^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?|\d+$"
     id="url"
     name="url"
+    class={inputClasses}
     bind:value={value}
     disabled={pending}
     placeholder="Paste / type FB event URL or event number..."
@@ -47,6 +60,7 @@
   />
   <input
     id="submit"
+    class={inputClasses}
     type='submit'
     value='Submit'
     disabled={pending}
diff --git a/lib/frontend/components/Status.svelte b/lib/frontend/components/Status.svelte
index 6ed7e36..eaded9d 100644
--- a/lib/frontend/components/Status.svelte
+++ b/lib/frontend/components/Status.svelte
@@ -1,7 +1,9 @@
 <style>
   #status {
     flex: 1;
-    height: 2rem;
+    min-height: 1rem;
+    max-height: 3rem;
+    overflow: auto;
     margin: 5px;
   }
 
@@ -11,6 +13,13 @@
     overflow: hidden;
     white-space: nowrap;
   }
+
+  .status-item--error {
+    box-sizing: border-box;
+    border: 1px solid firebrick;
+    background-color: salmon;
+    color: darkred;
+  }
 </style>
 
 <script>