Update navigation bar to support dark mode (#16762)

* Dark mode top bar

* Fixes

* Style fix

src/status_im2/contexts/chat/messages/navigation/style.cljs

@@ -16,23 +16,24 @@
     :background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)}
    position))
 
-(def background-view
+(defn background-view
+  [theme]
   {:position         :absolute
    :top              0
    :left             0
    :right            0
    :height           navigation-bar-height
-   :background-color (colors/theme-colors colors/white-opa-70 :transparent)
+   :background-color (colors/theme-colors colors/white-opa-70 colors/neutral-100-opa-70 theme)
    :display          :flex
    :flex-direction   :row
    :overflow         :hidden})
 
 (defn animated-background-view
-  [enabled? animation]
+  [enabled? animation theme]
   (reanimated/apply-animations-to-style
    (when enabled?
      {:opacity animation})
-   background-view))
+   (background-view theme)))
 
 (def blur-view
   {:position       :absolute

src/status_im2/contexts/chat/messages/navigation/view.cljs

@@ -1,6 +1,7 @@
 (ns status-im2.contexts.chat.messages.navigation.view
   (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
+            [quo2.theme :as theme]
             [re-frame.db]
             [react-native.blur :as blur]
             [react-native.core :as rn]
@@ -14,7 +15,7 @@
             [utils.i18n :as i18n]
             [status-im2.common.home.actions.view :as actions]))
 
-(defn f-navigation-view
+(defn f-view
   [{:keys [scroll-y]}]
   (let [{:keys [group-chat chat-id chat-name emoji
                 chat-type]
@@ -55,7 +56,7 @@
                                                           :extrapolateRight "clamp"})]
     [rn/view {:style style/navigation-view}
      [reanimated/view
-      {:style (style/animated-background-view all-loaded? opacity-animation)}]
+      {:style (style/animated-background-view all-loaded? opacity-animation nil)}]
 
      [reanimated/view {:style (style/animated-blur-view all-loaded? opacity-animation)}
       [blur/view
@@ -114,3 +115,9 @@
        :opacity-animation banner-opacity-animation
        :all-loaded?       all-loaded?
        :top-offset        style/navigation-bar-height}]]))
+
+(defn- internal-navigation-view
+  [params]
+  [:f> f-view params])
+
+(def navigation-view (theme/with-theme internal-navigation-view))

src/status_im2/contexts/chat/messages/view.cljs

@@ -17,9 +17,7 @@
      {:cover-bg-color :turquoise
       :chat           chat
       :header-comp    (fn [{:keys [scroll-y]}]
-                        [:f>
-                         messages.navigation/f-navigation-view
-                         {:scroll-y scroll-y}])
+                        [messages.navigation/navigation-view {:scroll-y scroll-y}])
       :footer-comp    (fn [{:keys [insets]}]
                         (if-not able-to-send-message?
                           [contact-requests.bottom-drawer/view chat-id contact-request-state