test

Author: Parveshdhull

src/status_im2/contexts/shell/animation.cljs

@@ -3,15 +3,14 @@
             [re-frame.core :as re-frame]
             [react-native.reanimated :as reanimated]
             [reagent.core :as reagent]
-            [status-im.async-storage.core :as async-storage]
-            [status-im2.contexts.shell.constants :as shell.constants] ;;TODO remove when not used anymore
-  ))
+            [status-im.async-storage.core :as async-storage]  ;;TODO remove when not used anymore
+            [status-im2.contexts.shell.constants :as shell.constants]))
 
 ;; Atoms
 (def selected-stack-id (atom nil))
 (def screen-height (atom nil))
 (def home-stack-state (atom shell.constants/close-with-animation))
-(def pass-through? (atom false)) ;; TODO - Use dynamic pass-through for transparent bottom tabs
+(def pass-through? (atom true)) ;; TODO - Use dynamic pass-through for transparent bottom tabs
 (def shared-values-atom (atom nil))
 
 ;; Reagent atoms used for lazily loading home screen tabs

src/status_im2/contexts/shell/bottom_tabs.cljs

@@ -1,6 +1,7 @@
 (ns status-im2.contexts.shell.bottom-tabs
   (:require [quo2.components.navigation.bottom-nav-tab :as bottom-nav-tab]
             [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
             [react-native.reanimated :as reanimated]
             [status-im2.contexts.shell.animation :as animation]
             [status-im2.contexts.shell.constants :as shell.constants]
@@ -17,6 +18,24 @@
     :on-press            #(animation/bottom-tab-on-press stack-id)
     :accessibility-label (str (name stack-id) "-tab")}])
 
+(defn tabs [shared-values]
+  [rn/view {:style (styles/bottom-tabs)}
+   [bottom-tab :i/communities :communities-stack shared-values]
+   [bottom-tab :i/messages :chats-stack shared-values]
+   [bottom-tab :i/wallet :wallet-stack shared-values]
+   [bottom-tab :i/browser :browser-stack shared-values]])
+
+(defn bottom-tabs-blur-background [shared-values]
+  [rn/blur-view
+   {:style {:height   120
+            :position :absolute
+            :width    "100%"
+            :bottom   1
+            :background-color colors/neutral-100-opa-70}
+    :blur-amount   10
+    :blur-type     :dark
+    :overlay-color :transparent}])
+
 (defn bottom-tabs
   []
   [:f>
@@ -28,8 +47,5 @@
                            original-style)]
        (animation/load-stack @animation/selected-stack-id)
        [reanimated/view {:style animated-style}
-        [rn/view {:style (styles/bottom-tabs)}
-         [bottom-tab :i/communities :communities-stack shared-values]
-         [bottom-tab :i/messages :chats-stack shared-values]
-         [bottom-tab :i/wallet :wallet-stack shared-values]
-         [bottom-tab :i/browser :browser-stack shared-values]]]))])
+        [bottom-tabs-blur-background shared-values]
+        [tabs shared-values]]))])

src/status_im2/contexts/shell/cards/view.cljs

@@ -25,7 +25,9 @@
                               :size           :small
                               :override-theme :dark
                               :label          (i18n/label :t/kicked)}]
-       (:count :permission) [:<>]) ;; Add components for these cases
+       (:count :permission) [:<>]  ;; Add components for these cases
+
+       nil)
 
      shell.constants/community-channel-card
      [rn/view
@@ -130,7 +132,9 @@
         {:weight :semi-bold
          :size   :heading-2
          :style  {:color colors/white-opa-70}}
-        (string/upper-case (first (:name avatar-params)))]])))
+        (string/upper-case (first (:name avatar-params)))]])
+
+    nil))
 
 (defn subtitle
   [type {:keys [content-type data]}]
@@ -259,4 +263,6 @@
     [wallet-graph data]
 
     shell.constants/communities-discover ;; Home Card
-    [communities-discover data]))
+    [communities-discover data]
+
+    nil))

src/status_im2/contexts/shell/style.cljs

@@ -7,15 +7,15 @@
 ;; Bottom Tabs
 (defn bottom-tabs-container
   [pass-through?]
-  {:background-color    (if pass-through? colors/neutral-100-opa-70 colors/neutral-100)
+  {:background-color    (if pass-through? :transparent colors/neutral-100)
    :flex                1
    :align-items         :center
-   :flex-direction      :column
    :height              (shell.constants/bottom-tabs-container-height)
    :position            :absolute
    :bottom              -1
    :right               0
    :left                0
+   :overflow            :hidden
    :accessibility-label :bottom-tabs-container})
 
 (defn bottom-tabs
@@ -26,6 +26,8 @@
    :flex                1
    :accessibility-label :bottom-tabs})
 
+;; (defn bottom-tabs-blur-overlay
+
 ;; Home Stack
 (defn home-stack
   []

src/status_im2/contexts/shell/view.cljs

@@ -71,22 +71,39 @@
   (let [data (if (seq switcher-cards) switcher-cards empty-cards)]
     [:<>
      [rn/flat-list
-      {:data                 data
-       :render-fn            render-card
-       :key-fn               :id
-       :header               (jump-to-text)
-       :num-columns          2
-       :column-wrapper-style {:margin-horizontal shell-margin
-                              :justify-content   :space-between
-                              :margin-bottom     16}
-       :style                {:top      0
-                              :left     0
-                              :right    0
-                              :bottom   -1
-                              :position :absolute}}]
+      {:data                    data
+       :render-fn               render-card
+       :key-fn                  :id
+       :header                  (jump-to-text)
+       :num-columns             2
+       :column-wrapper-style    {:margin-horizontal shell-margin
+                                 :justify-content   :space-between
+                                 :margin-bottom     16}
+       :style                   {:top      0
+                                 :left     0
+                                 :right    0
+                                 :bottom   -1
+                                 :position :absolute}
+       :content-container-style {:padding-bottom (shell.constants/bottom-tabs-container-height)}}]
      (when-not (seq switcher-cards)
        [placeholder])]))
 
+(defn top-nav-blur-background []
+  [rn/view {:style {:height   (+ 56 (rn/status-bar-height))
+                    :position :absolute
+                    :width    "100%"
+                    :top      0
+                    :overflow :hidden}}
+   [rn/blur-view
+    {:style {:height   100
+             :position :absolute
+             :width    "100%"
+             :top      0
+             :background-color colors/neutral-100-opa-70}
+     :blur-amount   10
+     :blur-type     :dark
+     :overlay-color :transparent}]])
+
 (defn shell
   []
   (let [switcher-cards (rf/sub [:shell/sorted-switcher-cards])
@@ -101,11 +118,12 @@
                  :bottom           -1
                  :position         :absolute
                  :background-color colors/neutral-100}}
+        [jump-to-list switcher-cards shell-margin]
+        [top-nav-blur-background]
         [common.home/top-nav
          {:type  :shell
           :style {:margin-top (:top insets)
-                  :z-index    2}}]
-        [jump-to-list switcher-cards shell-margin]])]))
+                  :z-index    2}}]])]))
 
 (defn shell-stack
   []