feat(grfn/bbbg): Add styling for flash messages r/3372

Change-Id: Ic8594217e6acceaad041dda8acf135bf7f3408e9
Reviewed-on: https://cl.tvl.fyi/c/depot/+/4585
Reviewed-by: grfn <grfn@gws.fyi>
Autosubmit: grfn <grfn@gws.fyi>
Tested-by: BuildkiteCI

3 files changed, 29 insertions, 4 deletions

diff --git a/users/grfn/bbbg/src/bbbg/handlers/core.clj b/users/grfn/bbbg/src/bbbg/handlers/core.clj
index 4bb7cf6290..d272064ec5 100644
--- a/users/grfn/bbbg/src/bbbg/handlers/core.clj
+++ b/users/grfn/bbbg/src/bbbg/handlers/core.clj
@@ -57,6 +57,7 @@
       [:body
        [:div.content
         (global-nav)
+        #_(flash/render-flash flash/test-flash)
         (flash/render-flash)
         body]
        [:script {:src "https://cdnjs.cloudflare.com/ajax/libs/tarekraafat-autocomplete.js/10.2.6/autoComplete.js"}]
diff --git a/users/grfn/bbbg/src/bbbg/styles.clj b/users/grfn/bbbg/src/bbbg/styles.clj
index 8e39f5c0e6..2ba8d2e20c 100644
--- a/users/grfn/bbbg/src/bbbg/styles.clj
+++ b/users/grfn/bbbg/src/bbbg/styles.clj
@@ -1,9 +1,10 @@
 ;; -*- eval: (rainbow-mode) -*-
 (ns bbbg.styles
   (:require
+   [garden.color :as color]
    [garden.compiler :refer [compile-css]]
    [garden.def :refer [defstyles]]
-   [garden.selectors :refer [attr= visited hover active & descendant]]))
+   [garden.selectors :refer [& active attr= descendant hover visited]]))
 
 (def black "#342e37")
 
@@ -23,9 +24,9 @@
 
 (def blue "#026fb1")
 
-(def green "#BEEF9E")
+(def green "#87E24B")
 
-(def contextual
+(def contextual-colors
   {:success green
    :info blue
    :warning yellow
@@ -73,9 +74,26 @@
      :cursor :pointer}
     link-conditional-styles]])
 
+(defstyles flash
+  [:.flash-messages
+   {:width "800px"
+    :margin "1rem auto"}]
+
+  [:.flash-message
+   {:padding "1rem 1.5rem"
+    :border "1px solid"
+    :margin-bottom "1rem"}]
+
+  (for [[context color] contextual-colors]
+    [(& (keyword (str ".flash-" (name context))))
+     {:border-color color
+      :background-color (color/lighten color 30)
+      :border-radius "5px"}]))
+
 (defstyles styles
   global-nav
   link-form
+  flash
 
   [:body
    {:color black}]
diff --git a/users/grfn/bbbg/src/bbbg/views/flash.clj b/users/grfn/bbbg/src/bbbg/views/flash.clj
index 7fcebd6455..a44b21d4cb 100644
--- a/users/grfn/bbbg/src/bbbg/views/flash.clj
+++ b/users/grfn/bbbg/src/bbbg/views/flash.clj
@@ -1,7 +1,7 @@
 (ns bbbg.views.flash
   (:require [clojure.spec.alpha :as s]))
 
-(s/def :flash/type #{:success :error :warning})
+(s/def :flash/type #{:success :error :warning :info})
 (s/def :flash/message string?)
 (s/def ::flash (s/keys :req [:flash/type :flash/message]))
 (s/fdef add-flash :args (s/cat :resp map? :flash ::flash) :ret map?)
@@ -31,3 +31,9 @@
         [:li.flash-message
          {:class (str "flash-" (-> message :flash/type name))}
          (:flash/message message)])])))
+
+(def test-flash
+  {:flash/messages
+   (for [type [:success :error :warning :info]]
+     {:flash/type type
+      :flash/message (str "Sample " type " message")})})