From 5257a9c6615bfe3fcd3955fcc982dc6929009dd5 Mon Sep 17 00:00:00 2001 From: Mohsen Date: Wed, 26 Jul 2023 18:28:03 +0300 Subject: [PATCH] [#16377] fix: apply theme props and use markdown text --- .../component_spec.cljs} | 2 +- .../calendar/calendar/days_grid/view.cljs | 27 ++++++------ .../components/calendar/calendar/style.cljs | 6 +-- .../components/calendar/calendar/view.cljs | 15 ++++--- .../calendar/weekdays_header/style.cljs | 6 +-- .../calendar/weekdays_header/view.cljs | 9 ++-- .../calendar/calendar/years_list/style.cljs | 12 ++--- .../calendar/calendar/years_list/view.cljs | 6 +-- .../calendar/calendar_day/style.cljs | 30 ++++++------- .../calendar/calendar_day/view.cljs | 22 +++++++--- .../calendar/calendar_month/style.cljs | 6 +-- .../calendar/calendar_month/view.cljs | 9 +++- .../calendar/calendar_year/style.cljs | 17 ++++--- .../calendar/calendar_year/view.cljs | 14 ++++-- src/quo2/core.cljs | 1 - src/quo2/core_spec.cljs | 2 +- .../quo_preview/calendar/calendar_month.cljs | 44 ------------------- src/status_im2/contexts/quo_preview/main.cljs | 4 -- 18 files changed, 101 insertions(+), 131 deletions(-) rename src/quo2/components/calendar/{__tests__/calendar_component_spec.cljs => calendar/component_spec.cljs} (97%) delete mode 100644 src/status_im2/contexts/quo_preview/calendar/calendar_month.cljs diff --git a/src/quo2/components/calendar/__tests__/calendar_component_spec.cljs b/src/quo2/components/calendar/calendar/component_spec.cljs similarity index 97% rename from src/quo2/components/calendar/__tests__/calendar_component_spec.cljs rename to src/quo2/components/calendar/calendar/component_spec.cljs index aa3cbe10c13..f97d9a190d1 100644 --- a/src/quo2/components/calendar/__tests__/calendar_component_spec.cljs +++ b/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])) diff --git a/src/quo2/components/calendar/calendar/days_grid/view.cljs b/src/quo2/components/calendar/calendar/days_grid/view.cljs index 0633d3ca7ce..40b6a17354a 100644 --- a/src/quo2/components/calendar/calendar/days_grid/view.cljs +++ b/src/quo2/components/calendar/calendar/days_grid/view.cljs @@ -7,7 +7,7 @@ [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) @@ -15,13 +15,14 @@ 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}}))}]])) diff --git a/src/quo2/components/calendar/calendar/style.cljs b/src/quo2/components/calendar/calendar/style.cljs index 1a03864ec59..64378a74240 100644 --- a/src/quo2/components/calendar/calendar/style.cljs +++ b/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}) diff --git a/src/quo2/components/calendar/calendar/view.cljs b/src/quo2/components/calendar/calendar/view.cljs index 8313cde4d91..be71e840f39 100644 --- a/src/quo2/components/calendar/calendar/view.cljs +++ b/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)) diff --git a/src/quo2/components/calendar/calendar/weekdays_header/style.cljs b/src/quo2/components/calendar/calendar/weekdays_header/style.cljs index df3e59a3a0c..624de605236 100644 --- a/src/quo2/components/calendar/calendar/weekdays_header/style.cljs +++ b/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)}) diff --git a/src/quo2/components/calendar/calendar/weekdays_header/view.cljs b/src/quo2/components/calendar/calendar/weekdays_header/view.cljs index e4200c4fcdc..a687749fd6a 100644 --- a/src/quo2/components/calendar/calendar/weekdays_header/view.cljs +++ b/src/quo2/components/calendar/calendar/weekdays_header/view.cljs @@ -3,10 +3,11 @@ [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 @@ -14,8 +15,10 @@ [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)) diff --git a/src/quo2/components/calendar/calendar/years_list/style.cljs b/src/quo2/components/calendar/calendar/years_list/style.cljs index 4626b7f2804..bdd5228a53c 100644 --- a/src/quo2/components/calendar/calendar/years_list/style.cljs +++ b/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)}) diff --git a/src/quo2/components/calendar/calendar/years_list/view.cljs b/src/quo2/components/calendar/calendar/years_list/view.cljs index b770ceadc64..4d33a080bb7 100644 --- a/src/quo2/components/calendar/calendar/years_list/view.cljs +++ b/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}}]])) diff --git a/src/quo2/components/calendar/calendar_day/style.cljs b/src/quo2/components/calendar/calendar_day/style.cljs index ed260c1a883..394daef4273 100644 --- a/src/quo2/components/calendar/calendar_day/style.cljs +++ b/src/quo2/components/calendar/calendar_day/style.cljs @@ -17,15 +17,12 @@ :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 @@ -33,19 +30,20 @@ :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)}) diff --git a/src/quo2/components/calendar/calendar_day/view.cljs b/src/quo2/components/calendar/calendar_day/view.cljs index ee8dc53d2b6..ac7129f81a6 100644 --- a/src/quo2/components/calendar/calendar_day/view.cljs +++ b/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)) diff --git a/src/quo2/components/calendar/calendar_month/style.cljs b/src/quo2/components/calendar/calendar_month/style.cljs index d5e6acf8405..b2dc3f70c19 100644 --- a/src/quo2/components/calendar/calendar_month/style.cljs +++ b/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)}) diff --git a/src/quo2/components/calendar/calendar_month/view.cljs b/src/quo2/components/calendar/calendar_month/view.cljs index 2681637f67f..8a13c35e774 100644 --- a/src/quo2/components/calendar/calendar_month/view.cljs +++ b/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 diff --git a/src/quo2/components/calendar/calendar_year/style.cljs b/src/quo2/components/calendar/calendar_year/style.cljs index 3fd6fd92dba..58ad4a82117 100644 --- a/src/quo2/components/calendar/calendar_year/style.cljs +++ b/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)))) diff --git a/src/quo2/components/calendar/calendar_year/view.cljs b/src/quo2/components/calendar/calendar_year/view.cljs index 1010563291d..c725c84a91d 100644 --- a/src/quo2/components/calendar/calendar_year/view.cljs +++ b/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)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 01d5f659247..d7ed9e9eda2 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -150,7 +150,6 @@ ;;;; CALENDAR (def calendar quo2.components.calendar.calendar.view/calendar) (def calendar-day quo2.components.calendar.calendar-day.view/calendar-day) -(def calendar-month quo2.components.calendar.calendar-month.view/calendar-month) (def calendar-year quo2.components.calendar.calendar-year.view/calendar-year) ;;;; CODE diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 7e27cbc7816..ffea0513cf6 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -5,7 +5,7 @@ [quo2.components.buttons.button.component-spec] [quo2.components.buttons.predictive-keyboard.component-spec] [quo2.components.buttons.slide-button.component-spec] - [quo2.components.calendar.--tests--.calendar-component-spec] + [quo2.components.calendar.calendar.component-spec] [quo2.components.calendar.calendar-day.component-spec] [quo2.components.calendar.calendar-month.component-spec] [quo2.components.calendar.calendar-year.component-spec] diff --git a/src/status_im2/contexts/quo_preview/calendar/calendar_month.cljs b/src/status_im2/contexts/quo_preview/calendar/calendar_month.cljs deleted file mode 100644 index 06a7ee3d576..00000000000 --- a/src/status_im2/contexts/quo_preview/calendar/calendar_month.cljs +++ /dev/null @@ -1,44 +0,0 @@ -(ns status-im2.contexts.quo-preview.calendar.calendar-month - (:require [status-im2.contexts.quo-preview.preview :as preview] - [react-native.core :as rn] - [quo2.foundations.colors :as colors] - [reagent.core :as reagent] - [quo2.core :as quo])) - -(def descriptor - [{:label "Year" - :key :year - :type :text} - {:label "Month" - :key :month - :type :text}]) - -(defn cool-preview - [] - (let [state (reagent/atom {:year "2023" :month "1"}) - on-change-date (fn [new-date] - (reset! state new-date))] - (fn - [] - [rn/touchable-without-feedback - {:on-press rn/dismiss-keyboard!} - [rn/view - [preview/customizer state descriptor] - [rn/view - {:padding-vertical 60 - :padding-horizontal 20} - [quo/calendar-month - (assoc @state - :on-change - on-change-date)]]]]))) - -(defn preview-calendar-month - [] - [rn/view - {:style {:background-color (colors/theme-colors colors/white colors/neutral-95) - :flex 1}} - [rn/flat-list - {:style {:flex 1} - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index c83f396a4fd..75110869df0 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -21,7 +21,6 @@ [status-im2.contexts.quo-preview.buttons.predictive-keyboard :as predictive-keyboard] [status-im2.contexts.quo-preview.calendar.calendar :as calendar] [status-im2.contexts.quo-preview.calendar.calendar-day :as calendar-day] - [status-im2.contexts.quo-preview.calendar.calendar-month :as calendar-month] [status-im2.contexts.quo-preview.calendar.calendar-year :as calendar-year] [status-im2.contexts.quo-preview.browser.browser-input :as browser-input] [status-im2.contexts.quo-preview.code.snippet :as code-snippet] @@ -155,9 +154,6 @@ {:name :calendar-day :options {:topBar {:visible true}} :component calendar-day/preview-calendar-day} - {:name :calendar-month - :options {:topBar {:visible true}} - :component calendar-month/preview-calendar-month} {:name :calendar-year :options {:topBar {:visible true}} :component calendar-year/preview-calendar-year}]