feat(grfn/bbbg): Add checks edit form styling r/3416

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

3 files changed, 38 insertions, 9 deletions

diff --git a/users/grfn/bbbg/src/bbbg/handlers/attendee_checks.clj b/users/grfn/bbbg/src/bbbg/handlers/attendee_checks.clj
index f04b94ba3037..af56002bd1c0 100644
--- a/users/grfn/bbbg/src/bbbg/handlers/attendee_checks.clj
+++ b/users/grfn/bbbg/src/bbbg/handlers/attendee_checks.clj
@@ -12,15 +12,16 @@
 
 (defn- edit-attendee-checks-page [{:keys [existing-check]
                                    attendee-id ::attendee/id}]
-  [:div
+  [:div.page
    (when existing-check
      [:p
       "Already checked on "
       (-> existing-check ::attendee-check/checked-at format-date)
       " by "
       (::user/username existing-check)])
-   [:form {:method :post
-           :action (str "/attendees/" attendee-id "/checks")}
+   [:form.attendee-checks-form
+    {:method :post
+     :action (str "/attendees/" attendee-id "/checks")}
     [:div.form-group
      [:label
       "Last Dose"
diff --git a/users/grfn/bbbg/src/bbbg/handlers/attendees.clj b/users/grfn/bbbg/src/bbbg/handlers/attendees.clj
index f874273ee7e6..2410dd74e281 100644
--- a/users/grfn/bbbg/src/bbbg/handlers/attendees.clj
+++ b/users/grfn/bbbg/src/bbbg/handlers/attendees.clj
@@ -49,12 +49,15 @@
         [:td (:events-attended attendee)]
         [:td (:no-shows attendee)]
         (if-let [last-check (:last-check attendee)]
-          [:td (str (-> last-check
+          [:td (str "✔️ "(-> last-check
                         ::attendee-check/checked-at
                         format-date)
                     ", by "
                     (get-in last-check [:user ::user/username]))]
-          [:td "Not Checked"
+          [:td
+           [:span {:title "Not Checked"}
+            "❌"]
+           " "
            [:a {:href (str "/attendees/" id "/checks/edit")}
             "Edit"]])
         (if (= edit-notes id)
diff --git a/users/grfn/bbbg/src/bbbg/styles.clj b/users/grfn/bbbg/src/bbbg/styles.clj
index 09f5eb31113a..1c495faa285e 100644
--- a/users/grfn/bbbg/src/bbbg/styles.clj
+++ b/users/grfn/bbbg/src/bbbg/styles.clj
@@ -99,8 +99,7 @@
   [:.search-form
    {:display :flex
     :flex-direction :row
-    :width "100%"
-    :padding "0 1rem"}
+    :width "100%"}
 
    [:>*+*
     {:margin-left "0.75rem"}]
@@ -163,7 +162,24 @@
      :color :white
      :box-shadow :none}
     [(& :a)
-     {:text-decoration :none}]]])
+     {:text-decoration :none}]]]
+
+  [:label
+   {:font-weight 600
+    :width "100%"}
+
+   [:input
+    {:font-weight "initial"
+     :margin-top "0.3rem"}]]
+
+  [:.form-group
+   {:display :flex
+    :margin-bottom "0.8rem"
+    :flex-direction :column}
+
+   [(attr= "type" "submit")
+    {:text-align :right
+     :align-self :flex-end}]])
 
 (defstyles tables
   [:table
@@ -261,6 +277,12 @@
   [:.hidden
    {:display :none}])
 
+(defstyles attendees
+  [:.attendee-checks-form
+   {:max-width "340px"
+    :margin-left "auto"
+    :margin-right "auto"}])
+
 (defstyles styles
   forms
   tables
@@ -270,6 +292,7 @@
   flash
   home-page
   signup-page
+  attendees
 
   [:body
    {:color black}]
@@ -281,7 +304,9 @@
     :width "100%"}]
 
   [:.page
-   {:margin-top "1rem"}
+   {:margin-top "1rem"
+    :margin-left "1rem"
+    :margin-right "1rem"}
 
    (not-mobile
     {:width content-width