Clean floating-container

status-im · Nov 6, 2023 · d0890af · d0890af
1 parent 9d3f17e
commit d0890af
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 51 deletions.
diff --git a/src/status_im2/common/floating_button_page/floating_container/style.cljs b/src/status_im2/common/floating_button_page/floating_container/style.cljs
@@ -1,35 +1,7 @@
 (ns status-im2.common.floating-button-page.floating-container.style
-  (:require [quo.foundations.colors :as colors]
-            [react-native.platform :as platform]
-            [react-native.reanimated :as reanimated]
+  (:require [react-native.reanimated :as reanimated]
             [react-native.safe-area :as safe-area]))
 
-(defn container
-  [blur?]
-  (cond-> {:width      "100%"
-           :align-self :flex-end}
-    blur?             (assoc :overflow :hidden)
-    (not blur?)       (assoc :padding-vertical   12
-                             :padding-horizontal 20)
-    platform/android? (assoc :padding-horizontal 20
-                             :padding-vertical   12
-                             :margin-left        20)))
-
-(defn inner-blur-container
-  [theme]
-  (let [bg-color-key (if platform/android? :overlay-color :background-color)]
-    (cond-> {bg-color-key (colors/theme-colors colors/white-70-blur
-                                               colors/neutral-80-opa-1-blur
-                                               theme)}
-      platform/ios? (assoc :width              "100%"
-                           :padding-horizontal 20
-                           :padding-vertical   12))))
-
-(def content-paddings
-  {:padding-vertical   0 ;12
-   :padding-horizontal 0 ;20
-   })
-
 (defn get-margin-bottom
   [{:keys [blur? keyboard-will-show?]}]
   (if (or blur? keyboard-will-show?)
@@ -41,3 +13,15 @@
   (reanimated/apply-animations-to-style
    {:margin-bottom margin-bottom-shared-value}
    {:margin-top :auto}))
+
+(defn content-container [blur?]
+  (if blur?
+    {:overflow :hidden}
+    {:overflow           :hidden
+     :padding-vertical   12
+     :padding-horizontal 20}))
+
+(def blur-inner-container
+  {:background-color   :transparent
+   :padding-vertical   12
+   :padding-horizontal 20})
diff --git a/src/status_im2/common/floating_button_page/floating_container/view.cljs b/src/status_im2/common/floating_button_page/floating_container/view.cljs
@@ -7,33 +7,27 @@
 
 (def ^:private duration 100)
 
+(defn- blur-container [child theme]
+  [blur/view {:blur-amount 12
+              :blur-radius 12
+              :blur-type   (quo.theme/theme-value :light :dark theme)}
+   [rn/view {:style style/blur-inner-container}
+    child]])
+
 (defn- content-container
-  [{:keys [blur? theme] :as props} children]
-  (let [styles (if blur?
-                 {:overflow :hidden}
-                 {:overflow           :hidden
-                  :padding-vertical   12
-                  :padding-horizontal 20})]
-    [rn/view {:style styles}
-     (if blur?
-       [blur/view {:blur-amount 12
-                   :blur-radius 12
-                   :blur-type   (quo.theme/theme-value :light :dark theme)
-                   ;:style       (style/inner-blur-container theme)
-                   }
-        [rn/view {:style {:background-color   :transparent
-                          :padding-vertical   12
-                          :padding-horizontal 20}}
-         children]]
-       children)]))
+  [{:keys [blur? theme]} child]
+  [rn/view {:style (style/content-container blur?)}
+   (if blur?
+     [blur-container child theme]
+     child)])
 
 (defn f-view
   " -               blur? : blurred container that is activated when this component is on top of the page content.
     -           on-layout : will trigger to dynamically get the height of the container to screen using it.
     - keyboard-will-show? : keyboard is visible on the current page."
   [{:keys [on-layout keyboard-will-show? blur?]
     :as   props}
-   children]
+   child]
   (let [theme         (quo.theme/use-theme-value)
         margin-bottom (reanimated/use-shared-value (style/get-margin-bottom props))]
     (rn/use-effect
@@ -42,9 +36,8 @@
 
     [reanimated/view {:style     (style/animate-margin-bottom margin-bottom)
                       :on-layout on-layout}
-     [content-container {:theme theme
-                         :blur? blur?}
-      children]]))
+     [content-container {:theme theme :blur? blur?}
+      child]]))
 
 (defn view
   [props children]