chore: use with theme for step component (#16399)
This commit is contained in:
parent
2d860c363a
commit
4c0a8d9f6d
|
@ -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)))
|
||||||
|
|
|
@ -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))
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Reference in New Issue