Style and behavior iprovements for notifications in add card view

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 */

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}
+          {error ? (
-          {submitStatus ? <p className="text-meta">{submitStatus}</p> : null}
+            <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);
               }
             }}
           >