[#17986] fix: address feedbacks

src/quo/components/overlay/style.cljs

@@ -1,13 +1,18 @@
-(ns quo.components.overlay.style)
+(ns quo.components.overlay.style
+  (:require [quo.foundations.colors :as colors]))
 
 (defn overlay-background
-  [background-color]
-  {:position         :absolute
-   :top              0
-   :left             0
-   :right            0
-   :bottom           0
-   :background-color background-color})
+  [type]
+  (let [background-color (case type
+                           :shell  colors/neutral-80-opa-80-blur
+                           :drawer colors/neutral-100-opa-70-blur
+                           nil)]
+    {:position         :absolute
+     :top              0
+     :left             0
+     :right            0
+     :bottom           0
+     :background-color background-color}))
 
 (def container
   {:flex 1})

src/quo/components/overlay/view.cljs

@@ -1,25 +1,20 @@
 (ns quo.components.overlay.view
   (:require
     [quo.components.overlay.style :as style]
-    [quo.foundations.colors :as colors]
     [react-native.blur :as blur]
     [react-native.core :as rn]))
 
 (defn view
-  [{:keys [type]} child]
-  (let [background-color (case type
-                           :shell  colors/neutral-80-opa-80-blur
-                           :drawer colors/neutral-100-opa-70-blur
-                           nil)]
-    [rn/view {:style (style/overlay-background background-color)}
-     (if (= type :shell)
-       [blur/view
-        {:blur-amount   20
-         :blur-radius   25
-         :blur-type     :transparent
-         :overlay-color :transparent
-         :style         style/container}
-        [rn/view {:style style/blur-container}
-         child]]
-       [rn/view {:style style/container}
-        child])]))
+  [{:keys [type]} & children]
+  [rn/view {:style (style/overlay-background type)}
+   (if (= type :shell)
+     [blur/view
+      {:blur-amount   20
+       :blur-radius   25
+       :blur-type     :transparent
+       :overlay-color :transparent
+       :style         style/container}
+      [rn/view {:style style/blur-container}
+       children]]
+     [rn/view {:style style/container}
+      children])])

src/status_im2/contexts/profile/settings/header/view.cljs

@@ -1,6 +1,7 @@
 (ns status-im2.contexts.profile.settings.header.view
   (:require [clojure.string :as string]
             [quo.core :as quo]
+            [quo.theme :as quo.theme]
             [react-native.core :as rn]
             [status-im2.common.not-implemented :as not-implemented]
             [status-im2.contexts.profile.settings.header.avatar :as header.avatar]
@@ -45,6 +46,4 @@
        :emoji-hash      emoji-string
        :title           full-name}]]))
 
-(defn view
-  [params]
-  [:f> f-view params])
+(def view (quo.theme/with-theme f-view))

src/status_im2/contexts/profile/settings/view.cljs

@@ -13,7 +13,7 @@
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
-(defn- f-settings-item-view
+(defn- settings-item-view
   [data]
   [quo/category
    {:list-type :settings
@@ -25,7 +25,7 @@
   (let [current-y (oops/oget event "nativeEvent.contentOffset.y")]
     (reanimated/set-shared-value scroll-y current-y)))
 
-(defn- f-footer
+(defn- footer
   [logout-press]
   [rn/view {:style style/footer-container}
    [quo/button
@@ -41,29 +41,28 @@
         scroll-y            (reanimated/use-shared-value 0)
         logout-press        #(rf/dispatch [:multiaccounts.logout.ui/logout-pressed])]
     [quo/overlay {:type :shell}
-     [rn/view {:style {:flex 1}}
-      [rn/view
-       {:style (style/navigation-wrapper {:customization-color customization-color
-                                          :inset               (:top insets)
-                                          :theme               theme})}
-       [quo/page-nav
-        {:background :blur
-         :icon-name  :i/close
-         :on-press   #(rf/dispatch [:navigate-back])
-         :right-side [{:icon-name :i/multi-profile :on-press #(rf/dispatch [:open-modal :sign-in])}
-                      {:icon-name :i/qr-code :on-press not-implemented/alert}
-                      {:icon-name :i/share
-                       :on-press  #(debounce/dispatch-and-chill [:open-modal :share-shell] 1000)}]}]]
-      [rn/flat-list
-       {:header                          [settings.header/view {:scroll-y scroll-y}]
-        :data                            settings.items/items
-        :key-fn                          :title
-        :shows-vertical-scroll-indicator false
-        :render-fn                       f-settings-item-view
-        :footer                          [f-footer logout-press]
-        :scroll-event-throttle           16
-        :on-scroll                       #(scroll-handler % scroll-y)
-        :bounces                         false}]]]))
+     [rn/view
+      {:style (style/navigation-wrapper {:customization-color customization-color
+                                         :inset               (:top insets)
+                                         :theme               theme})}
+      [quo/page-nav
+       {:background :blur
+        :icon-name  :i/close
+        :on-press   #(rf/dispatch [:navigate-back])
+        :right-side [{:icon-name :i/multi-profile :on-press #(rf/dispatch [:open-modal :sign-in])}
+                     {:icon-name :i/qr-code :on-press not-implemented/alert}
+                     {:icon-name :i/share
+                      :on-press  #(debounce/dispatch-and-chill [:open-modal :share-shell] 1000)}]}]]
+     [rn/flat-list
+      {:header                          [settings.header/view {:scroll-y scroll-y}]
+       :data                            settings.items/items
+       :key-fn                          :title
+       :shows-vertical-scroll-indicator false
+       :render-fn                       settings-item-view
+       :footer                          [footer logout-press]
+       :scroll-event-throttle           16
+       :on-scroll                       #(scroll-handler % scroll-y)
+       :bounces                         false}]]))
 
 (defn- internal-view
   [props]