From e64ff76e0b8617475f759e282bdf669d409d81b8 Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Mon, 3 Jul 2023 12:26:33 +0100 Subject: [PATCH] update theming for profile-input, empty state and predictive keyboard components (#16423) * chore: remove override-prop from empty-state component * chore: remove override-prop from profile-input and title-input components * chore: remove override-prop from predictive-keyboard component --- .../buttons/predictive_keyboard/view.cljs | 25 +++++++------ .../empty_state/empty_state/view.cljs | 26 +++++++------- .../components/inputs/profile_input/view.cljs | 2 -- .../components/inputs/title_input/style.cljs | 36 +++++++++---------- .../components/inputs/title_input/view.cljs | 20 ++++++----- .../onboarding/create_profile/view.cljs | 3 +- src/status_im2/navigation/screens.cljs | 3 +- 7 files changed, 59 insertions(+), 56 deletions(-) diff --git a/src/quo2/components/buttons/predictive_keyboard/view.cljs b/src/quo2/components/buttons/predictive_keyboard/view.cljs index def13e6efb..a0b9540782 100644 --- a/src/quo2/components/buttons/predictive_keyboard/view.cljs +++ b/src/quo2/components/buttons/predictive_keyboard/view.cljs @@ -2,6 +2,7 @@ (:require [react-native.core :as rn] [quo2.components.buttons.predictive-keyboard.style :as style] [quo2.components.info.info-message :as info-message] + [quo2.theme :as theme] [react-native.linear-gradient :as linear-gradient] [quo2.foundations.colors :as colors] [quo2.components.buttons.button :as button])) @@ -12,32 +13,33 @@ :blur [colors/white-opa-5 colors/white-opa-0]}) (defn- word-component - [word _ _ {:keys [blur? on-press]}] + [word _ _ {:keys [on-press]}] [button/button - (merge {:type :blur-bg - :size 32 - :on-press #(on-press word)} - (when blur? {:override-theme :dark})) + {:type :blur-bg + :size 32 + :on-press #(on-press word)} + word]) (defn- separator [] [rn/view {:style {:width 8}}]) -(defn view +(defn- view-internal "Options - `type` `:words`/`:error`/`:info`/`:empty`. - `blur?` Boolean to enable blur background support. - `text` error/info text. - `words` List of words to display in the keyboard. - - `on-press` Callback called when a word is pressed `(fn [word])`." - [{:keys [type blur? text words on-press]}] + - `on-press` Callback called when a word is pressed `(fn [word])` + - `theme` :light or :dark, received from with-theme HOC." + [{:keys [type blur? text words on-press theme]}] [linear-gradient/linear-gradient {:style {:flex-direction :row} :accessibility-label :predictive-keyboard :colors (if blur? (gradients :blur) - (colors/theme-colors (gradients :light) (gradients :dark)))} + (colors/theme-colors (gradients :light) (gradients :dark) theme))} [rn/view {:style (style/wrapper type)} (case type :words @@ -46,8 +48,7 @@ :data words :content-container-style style/word-list :render-fn word-component - :render-data {:blur? blur? - :on-press on-press} + :render-data {:on-press on-press} :shows-horizontal-scroll-indicator false :separator [separator] :horizontal true @@ -70,3 +71,5 @@ :icon-color colors/white-opa-70})) text] nil)]]) + +(def view (theme/with-theme view-internal)) diff --git a/src/quo2/components/empty_state/empty_state/view.cljs b/src/quo2/components/empty_state/empty_state/view.cljs index 8d77d701ad..5c04db18d6 100644 --- a/src/quo2/components/empty_state/empty_state/view.cljs +++ b/src/quo2/components/empty_state/empty_state/view.cljs @@ -3,9 +3,10 @@ [quo2.components.empty-state.empty-state.styles :as styles] [quo2.components.markdown.text :as text] [react-native.core :as rn] - [react-native.fast-image :as fast-image])) + [react-native.fast-image :as fast-image] + [quo2.theme :as theme])) -(defn empty-state +(defn- empty-state-internal [{:keys [customization-color image title description blur?] upper-button :upper-button lower-button :lower-button @@ -32,19 +33,18 @@ upper-button-on-press :on-press} upper-button] [rn/view {:style styles/button-container} [button/button - (cond-> {:type :primary - :size 32 - :override-background-color (styles/upper-button-color customization-color) - :on-press upper-button-on-press} - blur? (assoc :override-theme :dark)) + {:type :primary + :size 32 + :override-background-color (styles/upper-button-color customization-color) + :on-press upper-button-on-press} upper-button-text] - (when-let [{lower-button-text :text lower-button-on-press :on-press} lower-button] [button/button - (cond-> {:style {:margin-top 12} - :size 32 - :type :blur-bg - :on-press lower-button-on-press} - blur? (assoc :override-theme :dark)) + {:style {:margin-top 12} + :size 32 + :type :blur-bg + :on-press lower-button-on-press} lower-button-text])])]) + +(def empty-state (theme/with-theme empty-state-internal)) diff --git a/src/quo2/components/inputs/profile_input/view.cljs b/src/quo2/components/inputs/profile_input/view.cljs index 5ccef27a65..33fbabeae3 100644 --- a/src/quo2/components/inputs/profile_input/view.cljs +++ b/src/quo2/components/inputs/profile_input/view.cljs @@ -37,7 +37,6 @@ [buttons/button {:accessibility-label :select-profile-picture-button :type :grey - :override-theme :dark :override-background-color (colors/alpha colors/white 0.05) :on-press on-press :icon-size 20 @@ -50,6 +49,5 @@ [title-input/title-input (merge title-input-props {:blur? true - :override-theme :dark :placeholder placeholder :customization-color customization-color})]]]) diff --git a/src/quo2/components/inputs/title_input/style.cljs b/src/quo2/components/inputs/title_input/style.cljs index 67efae4371..92b9d8608a 100644 --- a/src/quo2/components/inputs/title_input/style.cljs +++ b/src/quo2/components/inputs/title_input/style.cljs @@ -3,50 +3,50 @@ [react-native.platform :as platform])) (defn get-focused-placeholder-color - [blur? override-theme] + [blur? theme] (if blur? - (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme) - (colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme)) + (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme) + (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)) ) (defn get-placeholder-color - [blur? override-theme] + [blur? theme] (if blur? - (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 override-theme) - (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme))) + (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 theme) + (colors/theme-colors colors/neutral-40 colors/neutral-50 theme))) (defn- get-disabled-color - [blur? override-theme] + [blur? theme] (if blur? (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30) - (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme))) + (colors/theme-colors colors/neutral-40 colors/neutral-50 theme))) (defn- get-char-count-color - [blur? override-theme] + [blur? theme] (if blur? (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40) - (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme))) + (colors/theme-colors colors/neutral-40 colors/neutral-50 theme))) (defn get-selection-color - [customization-color blur? override-theme] + [customization-color blur? theme] (colors/alpha (if blur? - (colors/theme-colors colors/neutral-100 colors/white override-theme) + (colors/theme-colors colors/neutral-100 colors/white theme) (colors/custom-color customization-color - (if (or (= :dark override-theme) colors/dark?) 60 50))) + (if (or (= :dark theme) colors/dark?) 60 50))) (if platform/ios? 1 0.2))) (def text-input-container {:flex 1}) (defn title-text - [disabled? blur? override-theme] + [disabled? blur? theme] {:text-align-vertical :bottom :color (if disabled? - (get-disabled-color blur? override-theme) - (colors/theme-colors colors/neutral-100 colors/white override-theme))}) + (get-disabled-color blur? theme) + (colors/theme-colors colors/neutral-100 colors/white theme))}) (defn char-count - [blur? override-theme] - {:color (get-char-count-color blur? override-theme)}) + [blur? theme] + {:color (get-char-count-color blur? theme)}) (def container {:flex-direction :row diff --git a/src/quo2/components/inputs/title_input/view.cljs b/src/quo2/components/inputs/title_input/view.cljs index 1c022730c3..ff11611ee3 100644 --- a/src/quo2/components/inputs/title_input/view.cljs +++ b/src/quo2/components/inputs/title_input/view.cljs @@ -12,14 +12,14 @@ (str 0 value) value)) -(defn title-input +(defn- title-input-internal [{:keys [blur? on-change-text auto-focus placeholder max-length default-value - override-theme] + theme] :or {max-length 0 auto-focus false default-value ""}}] @@ -38,10 +38,10 @@ (text/text-style {:size :heading-2 :weight :semi-bold - :style (style/title-text disabled? blur? override-theme)}) + :style (style/title-text disabled? blur? theme)}) :default-value default-value :accessibility-label :profile-title-input - :keyboard-appearance (theme/theme-value :light :dark override-theme) + :keyboard-appearance (theme/theme-value :light :dark theme) :on-focus #(swap! focused? (constantly true)) :on-blur #(swap! focused? (constantly false)) :auto-focus auto-focus @@ -50,22 +50,24 @@ :editable (not disabled?) :max-length max-length :placeholder placeholder - :selection-color (style/get-selection-color customization-color blur? override-theme) + :selection-color (style/get-selection-color customization-color blur? theme) :placeholder-text-color (if @focused? - (style/get-focused-placeholder-color blur? override-theme) - (style/get-placeholder-color blur? override-theme))}]] + (style/get-focused-placeholder-color blur? theme) + (style/get-placeholder-color blur? theme))}]] [rn/view {:style style/counter-container} [text/text [text/text - {:style (style/char-count blur? override-theme) + {:style (style/char-count blur? theme) :size :paragraph-2} (pad-0 (str (count @value)))] [text/text - {:style (style/char-count blur? override-theme) + {:style (style/char-count blur? theme) :size :paragraph-2} (str "/" (pad-0 (str max-length)))]]]]))) + +(def title-input (theme/with-theme title-input-internal)) diff --git a/src/status_im2/contexts/onboarding/create_profile/view.cljs b/src/status_im2/contexts/onboarding/create_profile/view.cljs index 18d45ed245..f63d59bde6 100644 --- a/src/status_im2/contexts/onboarding/create_profile/view.cljs +++ b/src/status_im2/contexts/onboarding/create_profile/view.cljs @@ -120,8 +120,7 @@ (rf/dispatch [:dismiss-keyboard]) (rf/dispatch [:show-bottom-sheet - {:override-theme :dark - :content + {:content (fn [] [method-menu/view on-change-profile-pic])}])) :image-picker-props {:profile-picture (when @profile-pic {:uri @profile-pic}) diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index c51e603022..b781d82257 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -145,7 +145,8 @@ :component generating-keys/generating-keys} {:name :enter-seed-phrase - :options {:layout options/onboarding-layout} + :options {:theme :dark + :layout options/onboarding-layout} :component enter-seed-phrase/enter-seed-phrase} {:name :enable-notifications