Update style namespaces (#14941)

Update certain `style.cljs` files to more strictly follow our guidelines. Except for animations and theme colors, *style* functions should be pure.

It turns out `style` namespaces are well behaved and are almost perfectly following guidelines 🚀 

The motivation for the PR came from this thread https://github.com/status-im/status-mobile/pull/14925#discussion_r1090485454

doc/new-guidelines.md

@@ -38,32 +38,29 @@ Pay special attention to:
 
 ### Component styles
 
-Prefer to define styles in separate files named `style.cljs`, usually colocated
+Prefer to define styles in a separate file named `style.cljs`, colocated with
-with the source file using it. For a real example, see
+the source file. For a real example, see
-[src/status_im/ui2/screens/chat/messages/style.cljs](../src/status_im/ui2/screens/chat/messages/style.cljs).
+[src/quo2/components/record_audio/record_audio/style.cljs](../src/quo2/components/record_audio/record_audio/style.cljs).
 
 ```clojure
 ;; bad
-(defn animated-checkbox-view [{:keys [size]}]
+(defn checkbox-view
-  [animated/view
+  [{:keys [size]}]
+  [rn/view
    {:style {:width           size
             :height          size
             :border-radius   4
             :justify-content :center
             :align-items     :center}}
-   [animated/view
+   [rn/view (do-something)]])
-    (do-something)]])
 
 ;; good
-(defn animated-checkbox-view [{:keys [size]}]
+(defn checkbox-view
-  [animated/view
+  [{:keys [size]}]
-   {:style (style/animated-checkbox-style size)}
+  [rn/view {:style (style/checkbox size)}
-   [animated/view
+   [rn/view (do-something)]])
-    (do-something)]])
 ```
 
-
-
 ### Don't use percents to define width/height
 
 We shouldn't use percentage:

src/status_im2/contexts/add_new_contact/style.cljs

@@ -1,6 +1,5 @@
 (ns status-im2.contexts.add-new-contact.style
   (:require [quo2.foundations.colors :as colors]
-            [status-im.react-native.resources :as resources]
             [react-native.platform :as platform]
             [quo2.foundations.typography :as typography]))
 
@@ -13,10 +12,8 @@
   {:style {:flex           1
            :flex-direction :row}})
 
-(defn image
+(def image
-  [file]
+  {:flex 1})
-  {:source (resources/get-image file)
-   :style  {:flex 1}})
 
 (defn container-outer
   []

src/status_im2/contexts/add_new_contact/views.cljs

@@ -1,10 +1,11 @@
 (ns status-im2.contexts.add-new-contact.views
-  (:require [status-im2.contexts.add-new-contact.style :as style]
+  (:require [quo2.core :as quo]
-            [utils.i18n :as i18n]
-            [utils.debounce :as debounce]
-            [utils.re-frame :as rf]
             [react-native.core :as rn]
-            [quo2.core :as quo]))
+            [status-im.react-native.resources :as resources]
+            [status-im2.contexts.add-new-contact.style :as style]
+            [utils.debounce :as debounce]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
 
 (defn new-contact
   []
@@ -14,7 +15,9 @@
                                                     (= error :uncompressed-key))]
     [rn/keyboard-avoiding-view (style/container-kbd)
      [rn/view style/container-image
-      [rn/image (style/image :add-new-contact)]
+      [rn/image
+       {:source (resources/get-image :add-new-contact)
+        :style  style/image}]
       [quo/button
        (merge (style/button-close)
               {:on-press

src/status_im2/contexts/shell/home_stack.cljs

@@ -48,7 +48,7 @@
      [:f>
       (fn []
         (let [shared-values             @animation/shared-values-atom
-              home-stack-original-style (styles/home-stack)
+              home-stack-original-style (styles/home-stack @animation/screen-height)
               home-stack-animated-style (reanimated/apply-animations-to-style
                                          {:top            (:home-stack-top shared-values)
                                           :left           (:home-stack-left shared-values)

src/status_im2/contexts/shell/style.cljs

@@ -1,7 +1,6 @@
 (ns status-im2.contexts.shell.style
   (:require [quo2.foundations.colors :as colors]
             [react-native.platform :as platform]
-            [status-im2.contexts.shell.animation :as animation]
             [status-im2.contexts.shell.constants :as shell.constants]))
 
 ;; Bottom Tabs
@@ -36,9 +35,9 @@
 
 ;; Home Stack
 (defn home-stack
-  []
+  [screen-height]
   (let [{:keys [width height]} (shell.constants/dimensions)
-        height                 (or @animation/screen-height height)]
+        height                 (or screen-height height)]
     {:border-bottom-left-radius  20
      :border-bottom-right-radius 20
      :background-color           (colors/theme-colors colors/neutral-5 colors/neutral-95)