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

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
+   {:type     :blur-bg
-           :size     32
+    :size     32
-           :on-press #(on-press word)}
+    :on-press #(on-press word)}
-          (when blur? {:override-theme :dark}))
+
    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])`."
+   - `on-press` Callback called when a word is pressed `(fn [word])`
-  [{:keys [type blur? text words on-press]}]
+   - `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?
+        :render-data                       {:on-press on-press}
-                                            :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))

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
+       {:type                      :primary
-                :size                      32
+        :size                      32
-                :override-background-color (styles/upper-button-color customization-color)
+        :override-background-color (styles/upper-button-color customization-color)
-                :on-press                  upper-button-on-press}
+        :on-press                  upper-button-on-press}
-         blur? (assoc :override-theme :dark))
        upper-button-text]
-
       (when-let [{lower-button-text     :text
                   lower-button-on-press :on-press} lower-button]
         [button/button
-         (cond-> {:style    {:margin-top 12}
+         {:style    {:margin-top 12}
-                  :size     32
+          :size     32
-                  :type     :blur-bg
+          :type     :blur-bg
-                  :on-press lower-button-on-press}
+          :on-press lower-button-on-press}
-           blur? (assoc :override-theme :dark))
          lower-button-text])])])
+
+(def empty-state (theme/with-theme empty-state-internal))

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})]]])

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-80-opa-20 colors/white-opa-20 theme)
-    (colors/theme-colors colors/neutral-30 colors/neutral-60 override-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-80-opa-40 colors/white-opa-30 theme)
-    (colors/theme-colors colors/neutral-40 colors/neutral-50 override-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)
+                          (get-disabled-color blur? theme)
-                          (colors/theme-colors colors/neutral-100 colors/white override-theme))})
+                          (colors/theme-colors colors/neutral-100 colors/white theme))})
 
 (defn char-count
-  [blur? override-theme]
+  [blur? theme]
-  {:color (get-char-count-color blur? override-theme)})
+  {:color (get-char-count-color blur? theme)})
 
 (def container
   {:flex-direction  :row

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-focused-placeholder-color blur? theme)
-                                    (style/get-placeholder-color blur? override-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))

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})

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