chore: use with theme for step component (#16399)

This commit is contained in:
Jamie Caprani 2023-06-30 17:02:46 +01:00 committed by GitHub
parent 2d860c363a
commit 4c0a8d9f6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 15 deletions

View File

@ -9,23 +9,23 @@
:height 20}) :height 20})
(defn neutral-border-color (defn neutral-border-color
[in-blur-view? override-theme] [in-blur-view? theme]
(if in-blur-view? (if in-blur-view?
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-10 override-theme) (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-10 theme)
(colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme))) (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)))
(def active-background-color (colors/custom-color :blue 50 10)) (def active-background-color (colors/custom-color :blue 50 10))
(def complete-background-color (colors/custom-color :blue 50)) (def complete-background-color (colors/custom-color :blue 50))
(defn container (defn container
[size type in-blur-view? override-theme] [size type in-blur-view? theme]
(cond-> container-base (cond-> container-base
(#{1 2} size) (assoc :width 20) (#{1 2} size) (assoc :width 20)
(= size 3) (assoc :width 28) (= size 3) (assoc :width 28)
(= type :neutral) (= type :neutral)
(assoc :border-width 1 (assoc :border-width 1
:border-color (neutral-border-color in-blur-view? override-theme)) :border-color (neutral-border-color in-blur-view? theme))
(= type :active) (= type :active)
(assoc :background-color active-background-color) (assoc :background-color active-background-color)
@ -35,7 +35,7 @@
(defn text-color (defn text-color
([type] (text-color type nil)) ([type] (text-color type nil))
([type override-theme] ([type theme]
(case type (case type
(:neutral :active) (colors/theme-colors colors/neutral-100-opa-100 colors/white override-theme) (:neutral :active) (colors/theme-colors colors/neutral-100-opa-100 colors/white theme)
:complete colors/white))) :complete colors/white)))

View File

@ -2,11 +2,12 @@
(:require (:require
[quo2.components.counter.step.style :as style] [quo2.components.counter.step.style :as style]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.theme :as theme]
[react-native.core :as rn] [react-native.core :as rn]
[utils.number])) [utils.number]))
(defn step (defn themed-step
[{:keys [type accessibility-label override-theme in-blur-view?]} value] [{:keys [type accessibility-label theme in-blur-view?]} value]
(let [type (or type :neutral) (let [type (or type :neutral)
value (utils.number/parse-int value) value (utils.number/parse-int value)
label (str value) label (str value)
@ -14,8 +15,10 @@
[rn/view [rn/view
{:accessible true {:accessible true
:accessibility-label (or accessibility-label :step-counter) :accessibility-label (or accessibility-label :step-counter)
:style (style/container size type in-blur-view? override-theme)} :style (style/container size type in-blur-view? theme)}
[text/text [text/text
{:weight :medium {:weight :medium
:size :label :size :label
:style {:color (style/text-color type override-theme)}} label]])) :style {:color (style/text-color type theme)}} label]]))
(def step (theme/with-theme themed-step))

View File

@ -138,7 +138,7 @@
[quo/text {:size :paragraph-2} (i18n/label :t/forgot-your-password-info-description)] [quo/text {:size :paragraph-2} (i18n/label :t/forgot-your-password-info-description)]
[rn/view {:style style/forget-password-step-container} [rn/view {:style style/forget-password-step-container}
[quo/step {:in-blur-view? true :override-theme :dark} 1] [quo/step {:in-blur-view? true} 1]
[rn/view [rn/view
{:style style/forget-password-step-content} {:style style/forget-password-step-content}
[quo/text {:size :paragraph-2 :weight :semi-bold} [quo/text {:size :paragraph-2 :weight :semi-bold}
@ -146,7 +146,7 @@
[quo/text {:size :paragraph-2} (i18n/label :t/forgot-your-password-info-remove-app-description)]]] [quo/text {:size :paragraph-2} (i18n/label :t/forgot-your-password-info-remove-app-description)]]]
[rn/view {:style style/forget-password-step-container} [rn/view {:style style/forget-password-step-container}
[quo/step {:in-blur-view? true :override-theme :dark} 2] [quo/step {:in-blur-view? true} 2]
[rn/view [rn/view
{:style style/forget-password-step-content} {:style style/forget-password-step-content}
[quo/text {:size :paragraph-2 :weight :semi-bold} [quo/text {:size :paragraph-2 :weight :semi-bold}
@ -155,7 +155,7 @@
(i18n/label :t/forgot-your-password-info-reinstall-app-description)]]] (i18n/label :t/forgot-your-password-info-reinstall-app-description)]]]
[rn/view {:style style/forget-password-step-container} [rn/view {:style style/forget-password-step-container}
[quo/step {:in-blur-view? true :override-theme :dark} 3] [quo/step {:in-blur-view? true} 3]
[rn/view [rn/view
{:style style/forget-password-step-content} {:style style/forget-password-step-content}
[rn/view [rn/view
@ -167,7 +167,7 @@
(i18n/label :t/forgot-your-password-info-signup-with-key-description)]]] (i18n/label :t/forgot-your-password-info-signup-with-key-description)]]]
[rn/view {:style style/forget-password-step-container} [rn/view {:style style/forget-password-step-container}
[quo/step {:in-blur-view? true :override-theme :dark} 4] [quo/step {:in-blur-view? true} 4]
[rn/view [rn/view
{:style style/forget-password-step-content} {:style style/forget-password-step-content}
[quo/text {:size :paragraph-2 :weight :semi-bold} [quo/text {:size :paragraph-2 :weight :semi-bold}