chore: update use of theme in page-nav component (#16424)

src/quo2/components/navigation/page_nav.cljs

@@ -5,7 +5,8 @@
             [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]))
+            [react-native.core :as rn]
+            [quo2.theme :as theme]))
 
 (def ^:private centrify-style
   {:display         :flex
@@ -30,7 +31,7 @@
            {:no-color true})))
 
 (defn left-section-view
-  [{:keys [on-press icon accessibility-label type icon-background-color icon-override-theme]
+  [{:keys [on-press icon accessibility-label type icon-background-color]
     :or   {type :grey}}
    put-middle-section-on-left?]
   [rn/view {:style (when put-middle-section-on-left? {:margin-right 5})}
@@ -40,7 +41,6 @@
      :type                      type
      :size                      32
      :accessibility-label       accessibility-label
-     :override-theme            icon-override-theme
      :override-background-color icon-background-color}
     icon]])
 
@@ -87,10 +87,10 @@
 
 (defn- mid-section-view
   [{:keys [horizontal-description? one-icon-align-left? type left-align?
-           main-text right-icon main-text-icon-color left-icon on-press avatar]
+           main-text right-icon main-text-icon-color left-icon on-press avatar theme]
     :as   props}]
-  (let [text-color           (if (colors/dark?) colors/neutral-5 colors/neutral-95)
+  (let [text-color           (colors/theme-colors colors/neutral-95 colors/neutral-5 theme)
-        text-secondary-color (if (colors/dark?) colors/neutral-40 colors/neutral-50)
+        text-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
         component-instance   [mid-section-comp (assoc props :text-secondary-color text-secondary-color)]]
     [rn/touchable-opacity {:on-press on-press}
      [rn/view
@@ -152,7 +152,7 @@
                   :justify-content :flex-end)}
    (let [last-icon-index (-> right-section-buttons count dec)]
      (map-indexed (fn [index
-                       {:keys [icon on-press type style icon-override-theme icon-background-color
+                       {:keys [icon on-press type style icon-background-color
                                accessibility-label label]
                         :or   {type :grey}}]
                     ^{:key index}
@@ -168,12 +168,11 @@
                        :type                      type
                        :before                    (when label icon)
                        :size                      32
-                       :override-theme            icon-override-theme
                        :override-background-color icon-background-color}
                       (if label label icon)]])
                   right-section-buttons))])
 
-(defn page-nav
+(defn- page-nav-internal
   "[page-nav opts]
    opts
    { :one-icon-align-left?    true/false
@@ -198,25 +197,26 @@
      {:type                  button-type
       :on-press              event
       :icon                  icon
-      :icon-override-theme   :light/:dark
      }
      :right-section-buttons vector of
       {:type                  button-type
        :on-press              event
        :icon                  icon
-       :icon-override-theme   :light/:dark
       }
+      :theme :light or :dark
    }
   "
   [{:keys [container-style one-icon-align-left? horizontal-description?
            align-mid? page-nav-color page-nav-background-uri
            mid-section
            left-section
-           right-section-buttons]}]
+           right-section-buttons
+           theme]}]
   (let [put-middle-section-on-left? (or align-mid?
                                         (> (count right-section-buttons) 1))
         mid-section-props
         {:type                    (:type mid-section)
+         :theme                   theme
          :horizontal-description? horizontal-description?
          :description-img         (:description-img mid-section)
          :main-text               (:main-text mid-section)
@@ -258,3 +258,5 @@
           (not put-middle-section-on-left?)
           [mid-section-view mid-section-props]))]
      [right-section-view right-section-buttons]]))
+
+(def page-nav (theme/with-theme page-nav-internal))

src/quo2/core.cljs

@@ -107,8 +107,8 @@
 (def group-avatar-tag quo2.components.tags.context-tag.view/group-avatar-tag)
 (def audio-tag quo2.components.tags.context-tag.view/audio-tag)
 (def community-tag quo2.components.tags.context-tag.view/community-tag)
-(def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
+
-(def page-nav quo2.components.navigation.page-nav/page-nav)
+
 (def disclaimer quo2.components.selectors.disclaimer.view/view)
 (def checkbox quo2.components.selectors.selectors.view/checkbox)
 (def filter quo2.components.selectors.filter.view/view)
@@ -190,6 +190,10 @@
 (def preview-list quo2.components.list-items.preview-list/preview-list)
 (def user-list quo2.components.list-items.user-list/user-list)
 
+;;;; NAVIGATION
+(def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
+(def page-nav quo2.components.navigation.page-nav/page-nav)
+
 ;;;; NOTIFICATIONS
 (def activity-log quo2.components.notifications.activity-log.view/view)
 (def info-count quo2.components.notifications.info-count/info-count)

src/status_im2/contexts/syncing/setup_syncing/view.cljs

@@ -23,15 +23,13 @@
    [quo/page-nav
     {:align-mid?            true
      :mid-section           {:type :text-only :main-text ""}
-     :left-section          {:type                :grey
+     :left-section          {:type     :grey
-                             :icon                :i/close
+                             :icon     :i/close
-                             :icon-override-theme :dark
+                             :on-press #(rf/dispatch [:navigate-back])}
-                             :on-press            #(rf/dispatch [:navigate-back])}
+     :right-section-buttons [{:type     :grey
-     :right-section-buttons [{:type                :grey
+                              :label    (i18n/label :t/how-to-pair)
-                              :label               (i18n/label :t/how-to-pair)
+                              :icon     :i/info
-                              :icon                :i/info
+                              :on-press #(rf/dispatch [:open-modal :how-to-pair])}]}]])
-                              :icon-override-theme :dark
-                              :on-press            #(rf/dispatch [:open-modal :how-to-pair])}]}]])
 
 (defn f-use-interval
   [clock cleanup-clock delay]

src/status_im2/contexts/syncing/syncing_devices_list/view.cljs

@@ -13,10 +13,9 @@
    [quo/page-nav
     {:align-mid?   true
      :mid-section  {:type :text-only :main-text ""}
-     :left-section {:type                :grey
+     :left-section {:type     :grey
-                    :icon                :i/arrow-left
+                    :icon     :i/arrow-left
-                    :icon-override-theme :dark
+                    :on-press #(rf/dispatch [:navigate-back])}}]])
-                    :on-press            #(rf/dispatch [:navigate-back])}}]])
 
 (defn view
   []

src/status_im2/navigation/screens.cljs

@@ -165,7 +165,7 @@
                  :hardwareBackButton {:dismissModalOnPress false
                                       :popStackOnPress     false}}}
     {:name      :scan-sync-code-page
-     :options   {:theme :dark}
+     :options   options/dark-screen
      :component scan-sync-code-page/view}
 
     {:name      :sign-in