[#16446] Communities banner animation

src/quo2/components/community/banner/style.cljs

@@ -2,18 +2,21 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (defn community-card
-  [radius]
-  {:shadow-offset    {:width  0
-                      :height 2}
-   :shadow-radius    radius
-   :shadow-opacity   1
-   :shadow-color     colors/shadow
-   :elevation        1
-   :border-radius    radius
-   :justify-content  :space-between
-   :background-color (colors/theme-colors
-                      colors/white
-                      colors/neutral-90)})
+  [theme]
+  {:shadow-offset     {:width 0 :height 2}
+   :shadow-radius     16
+   :shadow-opacity    1
+   :shadow-color      colors/shadow
+   :elevation         1
+   :border-radius     16
+   :justify-content   :space-between
+   :background-color  (colors/theme-colors colors/white colors/neutral-90 theme)
+   :flex-direction    :row
+   :margin-horizontal 20
+   :margin-top        8
+   :margin-bottom     8
+   :height            56
+   :padding-right     12})
 
 (def banner-content
   {:flex           1
@@ -25,13 +28,6 @@
   {:flex               1
    :padding-horizontal 12})
 
-(def banner-card
-  {:flex-direction    :row
-   :margin-horizontal 20
-   :margin-vertical   8
-   :height            56
-   :padding-right     12})
-
 (def discover-illustration
   {:position :absolute
    :top      -4

src/quo2/components/community/banner/view.cljs

@@ -2,14 +2,13 @@
   (:require [quo2.components.community.banner.style :as style]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
+            [quo2.theme :as theme]
             [react-native.core :as rn]))
 
 (defn- card-title-and-description
-  [title description]
-  [rn/view
-   {:style style/banner-content}
-   [rn/view
-    {:style style/banner-title}
+  [title description theme]
+  [rn/view {:style style/banner-content}
+   [rn/view {:style style/banner-title}
     [text/text
      {:accessibility-label :community-name-text
       :ellipsize-mode      :tail
@@ -21,26 +20,21 @@
      {:accessibility-label :community-name-text
       :ellipsize-mode      :tail
       :number-of-lines     1
-      :color               (colors/theme-colors
-                            colors/neutral-50
-                            colors/neutral-40)
+      :color               (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
       :weight              :regular
       :size                :paragraph-2}
      description]]])
 
-(defn view
-  [{:keys [title description on-press accessibility-label banner]}]
+(defn view-internal
+  [{:keys [title description on-press accessibility-label banner style theme]}]
   [rn/touchable-without-feedback
    {:on-press            on-press
     :accessibility-label accessibility-label}
-   [rn/view
-    (merge (style/community-card 16)
-           {:background-color (colors/theme-colors
-                               colors/white
-                               colors/neutral-90)}
-           style/banner-card)
-    [card-title-and-description title description]
+   [rn/view {:style (merge (style/community-card theme) style)}
+    [card-title-and-description title description theme]
     [rn/image
      {:style               style/discover-illustration
       :source              banner
       :accessibility-label :discover-communities-illustration}]]])
+
+(def view (theme/with-theme view-internal))

src/quo2/components/tabs/tabs.cljs

@@ -6,7 +6,7 @@
             [react-native.masked-view :as masked-view]
             [reagent.core :as reagent]
             [utils.collection :as utils.collection]
-            [utils.number :as utils.number]
+            [utils.number]
             [react-native.gesture :as gesture]))
 
 (def default-tab-size 32)

src/status_im2/contexts/chat/composer/effects.cljs

@@ -9,7 +9,7 @@
     [status-im2.contexts.chat.composer.constants :as constants]
     [status-im2.contexts.chat.composer.keyboard :as kb]
     [status-im2.contexts.chat.composer.utils :as utils]
-    [utils.number :as utils.number]
+    [utils.number]
     [utils.re-frame :as rf]))
 
 (defn reenter-screen-effect

src/status_im2/contexts/chat/composer/gesture.cljs

@@ -1,10 +1,11 @@
 (ns status-im2.contexts.chat.composer.gesture
   (:require
+    [oops.core :as oops]
     [react-native.gesture :as gesture]
     [react-native.reanimated :as reanimated]
-    [oops.core :as oops]
     [status-im2.contexts.chat.composer.constants :as constants]
     [status-im2.contexts.chat.composer.utils :as utils]
+    [utils.number]
     [utils.re-frame :as rf]))
 
 (defn set-opacity
@@ -83,7 +84,7 @@
            (let [translation    (oops/oget event "translationY")
                  min-height     (utils/get-min-height lines images link-previews?)
                  new-height     (- (reanimated/get-shared-value saved-height) translation)
-                 bounded-height (utils/bounded-val new-height min-height max-height)]
+                 bounded-height (utils.number/value-in-range new-height min-height max-height)]
              (when keyboard-shown
                (if (>= new-height min-height)
                  (do ; expand sheet

src/status_im2/contexts/chat/composer/handlers.cljs

@@ -10,6 +10,7 @@
     [status-im2.contexts.chat.composer.selection :as selection]
     [status-im2.contexts.chat.composer.utils :as utils]
     [utils.debounce :as debounce]
+    [utils.number]
     [utils.re-frame :as rf]))
 
 (defn focus
@@ -82,7 +83,9 @@
           content-size          (if (or (= lines 1) (empty? @text-value))
                                   constants/input-height
                                   (if (= lines 2) constants/multiline-minimized-height content-size))
-          new-height            (utils/bounded-val content-size constants/input-height max-height)
+          new-height            (utils.number/value-in-range content-size
+                                                             constants/input-height
+                                                             max-height)
           bottom-content-height (utils/calc-bottom-content-height images link-previews?)
           new-height            (min (+ new-height bottom-content-height) max-height)]
       (reset! content-height content-size)

src/status_im2/contexts/chat/composer/utils.cljs

@@ -8,6 +8,7 @@
     [reagent.core :as reagent]
     [status-im2.contexts.chat.composer.constants :as constants]
     [status-im2.contexts.chat.composer.selection :as selection]
+    [utils.number]
     [utils.re-frame :as rf]))
 
 (defn bounded-val
@@ -142,7 +143,7 @@
         base             (+ base (- curr-height constants/input-height))
         base             (+ base (calc-top-content-height reply edit))
         view-height      (- window-height keyboard-height (:top insets))
-        container-height (bounded-val
+        container-height (utils.number/value-in-range
                           (* (/ constants/mentions-max-height 4) size)
                           (/ constants/mentions-max-height 4)
                           constants/mentions-max-height)]
@@ -228,7 +229,7 @@
      :saved-height      (reanimated/use-shared-value
                          initial-height)
      :last-height       (reanimated/use-shared-value
-                         (bounded-val
+                         (utils.number/value-in-range
                           (+ @content-height bottom-content-height)
                           constants/input-height
                           max-height))

src/status_im2/contexts/communities/home/style.cljs

@@ -1,12 +1,14 @@
 (ns status-im2.contexts.communities.home.style
   (:require [quo2.foundations.colors :as colors]
-            [react-native.platform :as platform]))
+            [react-native.platform :as platform]
+            [react-native.safe-area :as safe-area]
+            [react-native.reanimated :as reanimated]))
 
 (def header-height 245)
 
 (def tabs
   {:padding-horizontal 20
-   :padding-top        16
+   :padding-top        8
    :padding-bottom     12})
 
 (def blur
@@ -17,8 +19,8 @@
    :bottom   0})
 
 (defn empty-state-container
-  [top]
-  {:margin-top      (+ header-height top)
+  []
+  {:margin-top      (+ header-height (safe-area/get-top))
    :margin-bottom   44
    :flex            1
    :justify-content :center})
@@ -29,16 +31,46 @@
    :background-color colors/danger-50})
 
 (defn header-spacing
-  [top]
-  {:height (+ header-height top)})
+  []
+  {:height (+ header-height (safe-area/get-top))})
 
-(defn blur-container
-  [top]
-  {:overflow    (if platform/ios? :visible :hidden)
+(defn blur-banner-layer
+  [animated-translation-y]
+  (let [fixed-height (+ (safe-area/get-top) 244)]
+    (reanimated/apply-animations-to-style
+     {:transform [{:translate-y animated-translation-y}]}
+     {:overflow (if platform/ios? :visible :hidden)
+      :z-index  1
+      :position :absolute
+      :top      0
+      :right    0
+      :left     0
+      :height   fixed-height})))
+
+(defn hiding-banner-layer
+  []
+  {:z-index     2
    :position    :absolute
-   :z-index     1
    :top         0
    :right       0
    :left        0
-   :padding-top top})
+   :padding-top (safe-area/get-top)})
+
+(defn tabs-banner-layer
+  [animated-translation-y]
+  (let [top-offset (+ (safe-area/get-top) 192)]
+    (reanimated/apply-animations-to-style
+     {:transform [{:translate-y animated-translation-y}]}
+     {:z-index  3
+      :position :absolute
+      :top      top-offset
+      :right    0
+      :left     0})))
+
+(def animated-card-container {:overflow :hidden})
 
+(defn animated-card
+  [opacity translate-y]
+  (reanimated/apply-animations-to-style {:opacity   opacity
+                                         :transform [{:translate-y translate-y}]}
+                                        {}))