From ab2f266802c2c1b9d59607b06aff0fa2135936c6 Mon Sep 17 00:00:00 2001
From: Thiago Chaves <thiago.coh@gmail.com>
Date: Sat, 13 Aug 2022 18:44:09 +0300
Subject: [PATCH] Style and behavior iprovements for notifications in add card
 view

---
 src/styles/components.css                     | 56 ++++++++++++++++++-
 .../AddExpressionView/AddExpressionView.tsx   | 14 ++++-
 2 files changed, 66 insertions(+), 4 deletions(-)

diff --git a/src/styles/components.css b/src/styles/components.css
index ad543d0..fc91c98 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -15,6 +15,8 @@
   --gap-small: 8px;
   --gap-medium: 16px;
   --gap-large: 32px;
+
+  --duration-short: 0.3s;
 }
 
 .grow {
@@ -169,6 +171,43 @@ i {
   background-color: rosybrown;
 }
 
+/* Notifications */
+
+.notification {
+  height: 50px;
+  position: relative;
+  padding: var(--gap-small);
+
+  animation-duration: var(--duration-short);
+  animation-name: slidein;
+  transition-duration: var(--duration-short);
+  transition-timing-function: ease-out;
+}
+
+.notification > p {
+  margin: auto;
+}
+
+.notification.error {
+  background-color: mistyrose;
+  border: 1px solid peru;
+}
+
+.notification.success {
+  background-color: mediumaquamarine;
+  border: 1px solid darkolivegreen;
+}
+
+@keyframes slidein {
+  from {
+    left: -100vw;
+  }
+
+  to {
+    left: 0%;
+  }
+}
+
 /* Icon buttons */
 
 .icon-button {
@@ -227,11 +266,24 @@ i {
   display: flex;
   flex-direction: column;
   margin: auto;
-  padding: 30px var(--gap-medium);
+  padding: 0 var(--gap-medium);
+}
+
+.content-query > select {
+  padding: var(--gap-small);
+}
+
+.content-query > input {
+  padding: var(--gap-small);
 }
 
 .content-query > label {
-  margin: var(--gap-medium) 0px;
+  margin-top: var(--gap-medium);
+  margin-bottom: var(--gap-small);
+}
+
+.content-query :first {
+  margin-top: 100px;
 }
 
 /* Margins and paddings */
diff --git a/src/views/AddExpressionView/AddExpressionView.tsx b/src/views/AddExpressionView/AddExpressionView.tsx
index cfd7793..4c9f1ad 100644
--- a/src/views/AddExpressionView/AddExpressionView.tsx
+++ b/src/views/AddExpressionView/AddExpressionView.tsx
@@ -21,8 +21,16 @@ export function AddExpressionView() {
     <form className="page-with-bottom-navigation">
       <section className="padding-small scroll">
         <div className="padding-small">
-          {error ? <p className="text-error">{error.message}</p> : null}
-          {submitStatus ? <p className="text-meta">{submitStatus}</p> : null}
+          {error ? (
+            <div className="notification error" key={error.message}>
+              <p>{error.message}</p>
+            </div>
+          ) : null}
+          {submitStatus ? (
+            <div className="notification success" key={submitStatus}>
+              <p>{submitStatus}</p>
+            </div>
+          ) : null}
         </div>
         {expression ? (
           <ExpressionCard
@@ -101,6 +109,8 @@ export function AddExpressionView() {
                 setError(undefined);
               } catch (error) {
                 setError(error);
+              } finally {
+                setSubmitStatus(undefined);
               }
             }}
           >