Improve flash message styling & invalid address error message

* more readable flash message popup
* close flash message popup by clicking outside
* show input in "invalid address" error message

src/clj/commiteth/routes/services.clj

@@ -235,8 +235,10 @@
                           :body-params [user-id :- Long, address :- String]
                           :summary "Update user address"
                           (if-not (eth/valid-address? address)
+                            (do
+                              (log/debug "POST /address: invalid input" address)
                               {:status 400
-                             :body "Invalid Ethereum address"}
+                               :body (str "Invalid Ethereum address '" address "'")})
                             (let [result (users/update-user-address
                                           user-id
                                           address)]

src/cljs/commiteth/core.cljs

@@ -285,4 +285,5 @@
   (load-interceptors!)
   (hook-browser-navigation!)
   (load-data true)
+  (.addEventListener js/window "click" #(rf/dispatch [:clear-flash-message]))
   (on-js-load))

src/cljs/commiteth/handlers.cljs

@@ -324,9 +324,11 @@
                           (dispatch [:set-flash-message
                                      :success
                                      "Address saved"]))
-           :on-error   #(dispatch [:set-flash-message
+           :on-error   #(do
+                          (println %)
+                          (dispatch [:set-flash-message
                                      :error
-                                   (:response %)])
+                                     (:response %)]))
            :finally    #(dispatch [:clear-updating-address])
            :params     {:user-id user-id :address address}}}))
 

src/less/style.less

@@ -607,11 +607,14 @@
     &.error {
         background-color: #e96868;
     }
+    display: flex;
+    flex-direction: column;
 
     color: #fff;
     border-radius: 8px;
     z-index: 100;
-    padding: 1.4em 1em 1.4em;
+    padding: 40px 60px 40px;
+    height: auto;
     i {
         position: absolute;
         margin: 0;
@@ -619,6 +622,11 @@
         top: 1.5em;
         cursor: pointer;
     }
+    p {
+        font-family: "PostGrotesk-Book";
+        font-weight: 500;
+        font-size: 15px;
+    }
 }