From 15a9443e3668fc164b1a61095e6a5f22ae48f6f0 Mon Sep 17 00:00:00 2001 From: Griffin Smith Date: Fri, 24 Dec 2021 14:26:26 -0500 Subject: [PATCH] feat(grfn/bbbg): Add styling for flash messages Change-Id: Ic8594217e6acceaad041dda8acf135bf7f3408e9 Reviewed-on: https://cl.tvl.fyi/c/depot/+/4585 Reviewed-by: grfn Autosubmit: grfn Tested-by: BuildkiteCI --- users/grfn/bbbg/src/bbbg/handlers/core.clj | 1 + users/grfn/bbbg/src/bbbg/styles.clj | 24 +++++++++++++++++++--- users/grfn/bbbg/src/bbbg/views/flash.clj | 8 +++++++- 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 4bb7cf629..d272064ec 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 8e39f5c0e..2ba8d2e20 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 7fcebd645..a44b21d4c 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")})})