[#16377] fix: apply theme props and use markdown text

src/quo2/components/calendar/__tests__/calendar_component_spec.cljs → src/quo2/components/calendar/calendar/component_spec.cljs

@@ -1,4 +1,4 @@
-(ns quo2.components.calendar.--tests--.calendar-component-spec
+(ns quo2.components.calendar.calendar.component-spec
   (:require [quo2.components.calendar.calendar.view :as calendar]
             [test-helpers.component :as h]
             [cljs-time.core :as t]))

src/quo2/components/calendar/calendar/days_grid/view.cljs

@@ -7,21 +7,22 @@
             [quo2.components.calendar.calendar.days-grid.style :as style]))
 
 (defn render-day
-  [{:keys [year month day selection-range on-press]}]
+  [{:keys [year month day selection-range on-press customization-color]}]
   (let [today      (t/now)
         start-date (:start-date selection-range)
         end-date   (:end-date selection-range)
         state      (utils/get-day-state day today year month start-date end-date)
         in-range   (utils/get-in-range-pos day start-date end-date)
         on-press   #(on-press (t/date-time day))]
     [calendar-day/calendar-day
-     {:state    state
-      :in-range in-range
-      :on-press on-press}
+     {:customization-color customization-color
+      :state               state
+      :in-range            in-range
+      :on-press            on-press}
      (str (t/day day))]))
 
-(defn- days-grid-internal
-  [{:keys [year month on-change start-date end-date]}]
+(defn days-grid
+  [{:keys [year month on-change start-date end-date customization-color]}]
   (let [on-day-press (fn [day]
                        (let [new-selection (utils/update-range day start-date end-date)]
                          (on-change new-selection)))]
@@ -34,10 +35,10 @@
        :content-container-style {:margin-horizontal -2}
        :render-fn               (fn [item]
                                   (render-day
-                                   {:year            year
-                                    :month           month
-                                    :day             item
-                                    :on-press        on-day-press
-                                    :selection-range {:start-date start-date :end-date end-date}}))}]]))
-
-(def days-grid (theme/with-theme days-grid-internal))
+                                   {:customization-color customization-color
+                                    :year                year
+                                    :month               month
+                                    :day                 item
+                                    :on-press            on-day-press
+                                    :selection-range     {:start-date start-date
+                                                          :end-date   end-date}}))}]]))

src/quo2/components/calendar/calendar/style.cljs

@@ -4,13 +4,13 @@
     [quo2.foundations.typography :as typography]))
 
 (defn container
-  []
+  [theme]
   {:flex-direction   :row
    :height           270
-   :border-color     (colors/theme-colors colors/neutral-20 colors/neutral-80)
+   :border-color     (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
    :border-radius    12
    :border-width     1
-   :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40)})
+   :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40 theme)})
 
 (def container-main
   {:flex-grow 1})

src/quo2/components/calendar/calendar/view.cljs

@@ -18,9 +18,9 @@
         on-change-month (fn [new-date]
                           (reset! selected-year (number-utils/parse-int (:year new-date)))
                           (reset! selected-month (number-utils/parse-int (:month new-date))))]
-    (fn [{:keys [on-change start-date end-date]}]
+    (fn [{:keys [on-change start-date end-date theme]}]
       [rn/view
-       {:style (style/container)}
+       {:style (style/container theme)}
        [years-list/years-list-view
         {:on-change-year on-change-year
          :year           @selected-year}]
@@ -32,10 +32,11 @@
           :on-change on-change-month}]
         [weekdays-header/weekdays-header]
         [days-grid/days-grid
-         {:year       @selected-year
-          :month      @selected-month
-          :start-date start-date
-          :end-date   end-date
-          :on-change  on-change}]]])))
+         {:year                @selected-year
+          :month               @selected-month
+          :start-date          start-date
+          :end-date            end-date
+          :on-change           on-change
+          :customization-color :blue}]]])))
 
 (def calendar (theme/with-theme calendar-internal))

src/quo2/components/calendar/calendar/weekdays_header/style.cljs

@@ -15,8 +15,6 @@
    :align-items     :center})
 
 (defn text-weekdays
-  []
-  (-> typography/paragraph-2
-      (merge typography/font-medium)
-      (merge {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)})))
+  [theme]
+  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
 

src/quo2/components/calendar/calendar/weekdays_header/view.cljs

@@ -3,19 +3,22 @@
             [quo2.theme :as theme]
             [utils.datetime :as dt]
             [utils.i18n :as i18n]
+            [quo2.components.markdown.text :as text]
             [quo2.components.calendar.calendar.weekdays-header.style :as style]))
 
 (defn- weekdays-header-internal
-  []
+  [theme]
   [rn/view
    {:style style/container-weekday-row}
    (doall
     (for [name dt/weekday-names]
       [rn/view
        {:style style/container-weekday
         :key   name}
-       [rn/text
-        {:style (style/text-weekdays)}
+       [text/text
+        {:weight :medium
+         :size   :paragraph-2
+         :style  (style/text-weekdays theme)}
         (str (i18n/label name))]]))])
 
 (def weekdays-header (theme/with-theme weekdays-header-internal))

src/quo2/components/calendar/calendar/years_list/style.cljs

@@ -3,12 +3,12 @@
     [quo2.foundations.colors :as colors]))
 
 (defn gradient-start-color
-  []
-  (colors/theme-colors colors/white colors/neutral-90))
+  [theme]
+  (colors/theme-colors colors/white colors/neutral-90 theme))
 
 (defn gradient-end-color
-  []
-  (colors/theme-colors colors/white-opa-0 colors/neutral-100-opa-0))
+  [theme]
+  (colors/theme-colors colors/white-opa-0 colors/neutral-100-opa-0 theme))
 
 (def gradient-view
   {:position               :absolute
@@ -19,7 +19,7 @@
    :right                  0})
 
 (defn container-years
-  []
+  [theme]
   {:border-width              1
    :overflow                  :hidden
    :padding-left              8
@@ -31,5 +31,5 @@
    :border-style              :dashed
    :border-top-left-radius    12
    :border-bottom-left-radius 12
-   :border-color              (colors/theme-colors colors/neutral-20 colors/neutral-80)})
+   :border-color              (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)})
 

src/quo2/components/calendar/calendar/years_list/view.cljs

@@ -30,10 +30,10 @@
   [rn/view {:style {:height 32}}])
 
 (defn years-list-view-internal
-  [{:keys [on-change-year year]}]
+  [{:keys [on-change-year year theme]}]
   (let [selected-year (reagent/atom year)]
     [rn/view
-     {:style (style/container-years)}
+     {:style (style/container-years theme)}
      [rn/flat-list
       {:data                            (utils/generate-years (utils/current-year))
        :key-fn                          str
@@ -47,7 +47,7 @@
                                                        @selected-year
                                                        #(on-year-press on-change-year item)))}]
      [linear-gradient/linear-gradient
-      {:colors [(style/gradient-start-color) (style/gradient-end-color)]
+      {:colors [(style/gradient-start-color theme) (style/gradient-end-color theme)]
        :style  style/gradient-view
        :start  {:x 0 :y 0}
        :end    {:x 0 :y 1}}]]))

src/quo2/components/calendar/calendar_day/style.cljs

@@ -17,35 +17,33 @@
    :width           32})
 
 (defn text-base
-  []
-  (-> typography/paragraph-2
-      (merge typography/font-medium)
-      (merge
-       {:color      (colors/theme-colors colors/neutral-100 colors/white)
-        :text-align :center})))
+  [theme]
+  {:color      (colors/theme-colors colors/neutral-100 colors/white theme)
+   :text-align :center})
 
 (defn in-range-background
-  [{:keys [in-range]}]
+  [{:keys [in-range theme]}]
   (cond-> {:position :absolute
            :top      0
            :right    0
            :left     0
            :bottom   0}
     (= in-range :start)
     (assoc :background-color
-           (colors/theme-colors colors/neutral-5 colors/neutral-80)
+           (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)
            :left 20)
 
     (= in-range :middle)
-    (assoc :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80))
+    (assoc :background-color
+           (colors/theme-colors colors/neutral-5 colors/neutral-80 theme))
 
     (= in-range :end)
     (assoc :background-color
-           (colors/theme-colors colors/neutral-5 colors/neutral-80)
+           (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)
            :right 20)))
 
 (defn container
-  [{:keys [state]}]
+  [{:keys [state theme customization-color]}]
   (cond-> container-base
     (= state :default)
     (assoc :background-color colors/neutral-100-opa-0)
@@ -54,20 +52,20 @@
     (assoc :opacity 0.3)
 
     (= state :selected)
-    (assoc :background-color (get-in colors/customization [:blue 50]))))
+    (assoc :background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme))))
 
 (defn text
-  [{:keys [state]}]
-  (cond-> (text-base)
+  [{:keys [state theme]}]
+  (cond-> (text-base theme)
     (= state :selected) (assoc :color colors/white)))
 
 (defn indicator
-  [{:keys [state]}]
+  [{:keys [state theme customization-color]}]
   {:width            4
    :position         :absolute
    :bottom           3
    :height           2
    :border-radius    8
    :background-color (if (= state :today)
-                       (get-in colors/customization [:blue 50])
+                       (colors/custom-color-by-theme customization-color 50 60 nil nil theme)
                        colors/neutral-100-opa-0)})

src/quo2/components/calendar/calendar_day/view.cljs

@@ -1,22 +1,32 @@
 (ns quo2.components.calendar.calendar-day.view
   (:require [react-native.core :as rn]
             [quo2.theme :as theme]
+            [quo2.components.markdown.text :as text]
             [quo2.components.calendar.calendar-day.style :as style]))
 
 (defn- calendar-day-internal
-  [{:keys [state in-range on-press] :or {state :default}} day]
+  [{:keys [state in-range on-press customization-color theme]
+    :or   {state :default}}
+   day]
   [rn/view
    {:style style/wrapper}
-   [rn/view {:style (style/in-range-background {:in-range in-range})}]
+   [rn/view {:style (style/in-range-background {:in-range in-range :theme theme})}]
    [rn/touchable-opacity
     {:on-press on-press
      :style    (style/container
-                {:state state})
+                {:state               state
+                 :theme               theme
+                 :customization-color customization-color})
      :disabled (= state :disabled)}
-    [rn/text
-     {:style (style/text {:state state})}
+    [text/text
+     {:weight :medium
+      :size   :paragraph-2
+      :style  (style/text {:state state :theme theme})}
      day]
     [rn/view
-     {:style (style/indicator {:state state})}]]])
+     {:style (style/indicator
+              {:state               state
+               :theme               theme
+               :customization-color customization-color})}]]])
 
 (def calendar-day (theme/with-theme calendar-day-internal))

src/quo2/components/calendar/calendar_month/style.cljs

@@ -12,7 +12,5 @@
    :justify-content    :space-between})
 
 (defn text
-  []
-  (-> typography/paragraph-1
-      (merge typography/font-semi-bold)
-      (merge {:color (colors/theme-colors colors/neutral-100 colors/white)})))
+  [theme]
+  {:color (colors/theme-colors colors/neutral-100 colors/white theme)})

src/quo2/components/calendar/calendar_month/view.cljs

@@ -4,10 +4,11 @@
             [quo2.components.calendar.calendar-month.style :as style]
             [quo2.components.buttons.button.view :as button]
             [utils.number :as number-utils]
+            [quo2.components.markdown.text :as text]
             [quo2.components.calendar.calendar-month.utils :as utils]))
 
 (defn- calendar-month-internal
-  [{:keys [year month on-change]}]
+  [{:keys [year month on-change theme]}]
   (let [year  (number-utils/parse-int year)
         month (number-utils/parse-int month)]
     [rn/view
@@ -19,7 +20,11 @@
        :size                24
        :on-press            #(on-change (utils/previous-month year month))}
       :i/chevron-left]
-     [rn/text {:style (style/text)} (utils/format-month-year year month)]
+     [text/text
+      {:weight :semi-bold
+       :size   :paragraph-1
+       :style  (style/text theme)}
+      (utils/format-month-year year month)]
      [button/button
       {:icon                true
        :accessibility-label :next-month-button

src/quo2/components/calendar/calendar_year/style.cljs

@@ -11,18 +11,17 @@
    :width           48})
 
 (defn text-base
-  []
-  (-> typography/paragraph-2
-      (merge typography/font-medium)
-      (merge {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)})))
+  [theme]
+  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
 
 (defn container
-  [{:keys [selected? disabled?]}]
+  [{:keys [selected? disabled? theme]}]
   (cond-> container-base
     disabled? (assoc :opacity 0.3)
-    selected? (assoc :background-color (colors/theme-colors colors/neutral-10 colors/neutral-70))))
+    selected? (assoc :background-color
+                     (colors/theme-colors colors/neutral-10 colors/neutral-70 theme))))
 
 (defn text
-  [{:keys [selected?]}]
-  (cond-> (text-base)
-    selected? (assoc :color (colors/theme-colors colors/neutral-100 colors/white))))
+  [{:keys [selected? theme]}]
+  (cond-> (text-base theme)
+    selected? (assoc :color (colors/theme-colors colors/neutral-100 colors/white theme))))

src/quo2/components/calendar/calendar_year/view.cljs

@@ -1,18 +1,24 @@
 (ns quo2.components.calendar.calendar-year.view
   (:require [react-native.core :as rn]
             [quo2.theme :as theme]
+            [quo2.components.markdown.text :as text]
             [quo2.components.calendar.calendar-year.style :as style]))
 
 (defn- calendar-year-internal
-  [{:keys [selected? disabled? on-press]} year]
+  [{:keys [selected? disabled? on-press theme]} year]
   [rn/touchable-opacity
    {:on-press on-press
     :style    (style/container
                {:selected? selected?
-                :disabled? disabled?})
+                :disabled? disabled?
+                :theme     theme})
     :disabled disabled?}
-   [rn/text
-    {:style (style/text {:selected? selected?})}
+   [text/text
+    {:weight :medium
+     :size   :paragraph-2
+     :style  (style/text
+              {:selected? selected?
+               :theme     theme})}
     year]])
 
 (def calendar-year (theme/with-theme calendar-year-internal))