chore: use with theme for step component (#16399)
This commit is contained in:
parent
2d860c363a
commit
4c0a8d9f6d
|
@ -9,23 +9,23 @@
|
|||
:height 20})
|
||||
|
||||
(defn neutral-border-color
|
||||
[in-blur-view? override-theme]
|
||||
[in-blur-view? theme]
|
||||
(if in-blur-view?
|
||||
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-10 override-theme)
|
||||
(colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme)))
|
||||
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-10 theme)
|
||||
(colors/theme-colors colors/neutral-20 colors/neutral-80 theme)))
|
||||
|
||||
(def active-background-color (colors/custom-color :blue 50 10))
|
||||
(def complete-background-color (colors/custom-color :blue 50))
|
||||
|
||||
(defn container
|
||||
[size type in-blur-view? override-theme]
|
||||
[size type in-blur-view? theme]
|
||||
(cond-> container-base
|
||||
(#{1 2} size) (assoc :width 20)
|
||||
(= size 3) (assoc :width 28)
|
||||
|
||||
(= type :neutral)
|
||||
(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)
|
||||
(assoc :background-color active-background-color)
|
||||
|
@ -35,7 +35,7 @@
|
|||
|
||||
(defn text-color
|
||||
([type] (text-color type nil))
|
||||
([type override-theme]
|
||||
([type theme]
|
||||
(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)))
|
||||
|
|
|
@ -2,11 +2,12 @@
|
|||
(:require
|
||||
[quo2.components.counter.step.style :as style]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
[utils.number]))
|
||||
|
||||
(defn step
|
||||
[{:keys [type accessibility-label override-theme in-blur-view?]} value]
|
||||
(defn themed-step
|
||||
[{:keys [type accessibility-label theme in-blur-view?]} value]
|
||||
(let [type (or type :neutral)
|
||||
value (utils.number/parse-int value)
|
||||
label (str value)
|
||||
|
@ -14,8 +15,10 @@
|
|||
[rn/view
|
||||
{:accessible true
|
||||
: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
|
||||
{:weight :medium
|
||||
: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))
|
||||
|
|
|
@ -138,7 +138,7 @@
|
|||
[quo/text {:size :paragraph-2} (i18n/label :t/forgot-your-password-info-description)]
|
||||
|
||||
[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
|
||||
{:style style/forget-password-step-content}
|
||||
[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)]]]
|
||||
|
||||
[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
|
||||
{:style style/forget-password-step-content}
|
||||
[quo/text {:size :paragraph-2 :weight :semi-bold}
|
||||
|
@ -155,7 +155,7 @@
|
|||
(i18n/label :t/forgot-your-password-info-reinstall-app-description)]]]
|
||||
|
||||
[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
|
||||
{:style style/forget-password-step-content}
|
||||
[rn/view
|
||||
|
@ -167,7 +167,7 @@
|
|||
(i18n/label :t/forgot-your-password-info-signup-with-key-description)]]]
|
||||
|
||||
[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
|
||||
{:style style/forget-password-step-content}
|
||||
[quo/text {:size :paragraph-2 :weight :semi-bold}
|
||||
|
|
Loading…
Reference in New Issue