[#17986] fix: resolve review feedbacks

Author: mohsen-ghafouri

src/quo/components/overlay/style.cljs

@@ -9,9 +9,9 @@
    :bottom           0
    :background-color background-color})
 
-(def container-style
+(def container
   {:flex 1})
 
-(def blur-style
+(def blur-container
   {:flex             1
    :background-color :transparent})

src/quo/components/overlay/view.cljs

@@ -9,18 +9,17 @@
   [{:keys [type]} child]
   (let [background-color (case type
                            :shell  colors/neutral-80-opa-80-blur
-                           :drawer colors/neutral-100-opa-70-blur)]
-    [rn/view
-     {:style (style/overlay-background background-color)}
+                           :drawer colors/neutral-100-opa-70-blur
+                           :else   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-style}
-        [rn/view {:style style/blur-style}
+         :style         style/container}
+        [rn/view {:style style/blur-container}
          child]]
-       [rn/view
-        {:style style/container-style}
+       [rn/view {:style style/container}
         child])]))

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

@@ -4,8 +4,7 @@
             [react-native.reanimated :as reanimated]
             [status-im2.contexts.profile.settings.header.style :as style]))
 
-(defonce ^:const scroll-animation-input-range [0 50])
-
+(def scroll-animation-input-range [0 50])
 (def header-extrapolation-option
   {:extrapolateLeft  "clamp"
    :extrapolateRight "clamp"})

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

@@ -5,8 +5,6 @@
             [react-native.svg :as svg]
             [status-im2.contexts.profile.settings.header.style :as style]))
 
-(defonce ^:const scroll-animation-input-range [0 45 50])
-
 (defn left-radius
   [background-color]
   [svg/svg {:width "20" :height "20" :viewBox "0 0 20 20" :fill "none"}
@@ -21,14 +19,13 @@
     {:d    "M20 20V0H0C11 0 20 9 20 20Z"
      :fill background-color}]])
 
-
 (defn f-view
   [{:keys [scroll-y customization-color theme]}]
   (let [background-color  (colors/resolve-color customization-color theme 40)
         opacity-animation (reanimated/interpolate scroll-y
-                                                  scroll-animation-input-range
+                                                  [0 45 50]
                                                   [1 1 0])]
-    [rn/view
+    [:<>
      [rn/view {:style (style/header-middle-shape background-color)}]
      [reanimated/view {:style (style/radius-container opacity-animation)}
       [left-radius background-color]

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

@@ -19,7 +19,7 @@
         full-name                                   (profile.utils/displayed-name profile)
         profile-picture                             (profile.utils/photo profile)
         emoji-string                                (string/join emoji-hash)]
-    [rn/view
+    [:<>
      [header.shape/view
       {:scroll-y            scroll-y
        :customization-color customization-color

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

@@ -25,16 +25,21 @@
   (let [current-y (oops/oget event "nativeEvent.contentOffset.y")]
     (reanimated/set-shared-value scroll-y current-y)))
 
-(def footer
+(defn- f-footer
+  [logout-press]
   [rn/view {:style style/footer-container}
-   [quo/button {:type :danger :icon-left :i/log-out}
+   [quo/button
+    {:on-press  logout-press
+     :type      :danger
+     :icon-left :i/log-out}
     (i18n/label :t/logout)]])
 
 (defn- settings-view
   [theme]
   (let [insets              (safe-area/get-insets)
         customization-color (rf/sub [:profile/customization-color])
-        scroll-y            (reanimated/use-shared-value 0)]
+        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
@@ -52,10 +57,10 @@
       [rn/flat-list
        {:header                          [settings.header/view {:scroll-y scroll-y}]
         :data                            settings.constants/settings-items
-        :key-fn                          str
+        :key-fn                          :title
         :shows-vertical-scroll-indicator false
         :render-fn                       f-settings-item-view
-        :footer                          footer
+        :footer                          [f-footer logout-press]
         :scroll-event-throttle           16
         :on-scroll                       #(scroll-handler % scroll-y)
         :bounces                         false}]]]))