fix: bottom sheet padding (#16216)

* fix: bottom sheet padding

src/status_im2/common/bottom_sheet/style.cljs

@@ -1,4 +1,4 @@
-(ns status-im2.common.bottom-sheet.styles
+(ns status-im2.common.bottom-sheet.style
   (:require [quo2.foundations.colors :as colors]
             [quo2.theme :as theme]
             [status-im.utils.platform :as platform]))
@@ -25,7 +25,7 @@
    :border-top-right-radius 20
    :overflow                (when shell? :hidden)
    :flex                    1
-   :padding-bottom          (or padding-bottom-override (max 20 bottom))
+   :padding-bottom          (or padding-bottom-override (+ bottom 8))
    :background-color        (if shell?
                               :transparent
                               (colors/theme-colors colors/white colors/neutral-90 override-theme))})

src/status_im2/common/bottom_sheet/view.cljs

@@ -3,7 +3,7 @@
             [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
             [react-native.reanimated :as reanimated]
-            [status-im2.common.bottom-sheet.styles :as styles]
+            [status-im2.common.bottom-sheet.style :as style]
             [react-native.gesture :as gesture]
             [oops.core :as oops]
             [react-native.hooks :as hooks]
@@ -80,20 +80,20 @@
           [reanimated/view
            {:style     (reanimated/apply-animations-to-style
                         {:transform [{:translateY translate-y}]}
-                        (styles/sheet insets
-                                      window-height
-                                      override-theme
-                                      padding-bottom-override
-                                      shell?))
+                        (style/sheet insets
+                                     window-height
+                                     override-theme
+                                     padding-bottom-override
+                                     shell?))
             :on-layout #(reset! sheet-height (oops/oget % "nativeEvent" "layout" "height"))}
-           (when shell? [blur/ios-view {:style styles/shell-bg}])
+           (when shell? [blur/ios-view {:style style/shell-bg}])
 
            (when selected-item
              [rn/view
-              [rn/view {:style (styles/selected-item override-theme window-height @sheet-height insets)}
+              [rn/view {:style (style/selected-item override-theme window-height @sheet-height insets)}
                [selected-item]]])
 
            ;; handle
-           [rn/view {:style (styles/handle override-theme)}]
+           [rn/view {:style (style/handle override-theme)}]
            ;; content
            [content]]]]))))

src/status_im2/contexts/contacts/drawers/nickname_drawer/style.cljs

@@ -19,9 +19,10 @@
    :justify-content :space-between
    :margin-top      20})
 
-(def nickname-container
+(defn nickname-container
+  [insets]
   {:margin-horizontal 20
-   :margin-bottom     (when platform/ios? 20)})
+   :margin-bottom     (when platform/ios? (max (:bottom insets) 20))})
 
 (defn nickname-description
   []

src/status_im2/contexts/contacts/drawers/nickname_drawer/view.cljs

@@ -4,6 +4,7 @@
             [quo2.components.icon :as icons]
             [quo2.core :as quo]
             [react-native.core :as rn]
+            [react-native.safe-area :as safe-area]
             [reagent.core :as reagent]
             [status-im2.contexts.contacts.drawers.nickname-drawer.style :as style]
             [utils.i18n :as i18n]
@@ -28,11 +29,12 @@
   (let [{:keys [primary-name nickname public-key]} contact
         entered-nickname                           (reagent/atom (or nickname ""))
         photo-path                                 (when-not (empty? (:images contact))
-                                                     (rf/sub [:chats/photo-path public-key]))]
+                                                     (rf/sub [:chats/photo-path public-key]))
+        insets                                     (safe-area/get-insets)]
     (fn [{:keys [title description accessibility-label
                  close-button-text]}]
       [rn/view
-       {:style               style/nickname-container
+       {:style               (style/nickname-container insets)
         :accessibility-label accessibility-label}
        [quo/text
         {:weight :semi-bold

src/status_im2/navigation/view.cljs

@@ -69,17 +69,12 @@
         (when js/goog.DEBUG
           [reloader/reload-view])]))))
 
-; Designs require bottom inset to be bigger than safe area, otherwise it is too close to the bottom
-(defn bottom-sheet-insets
-  []
-  (assoc (safe-area/get-insets) :bottom 55))
-
 (def bottom-sheet
   (reagent/reactify-component
    (fn []
      (let [{:keys [sheets hide?]} (rf/sub [:bottom-sheet])
            sheet                  (last sheets)
-           insets                 (bottom-sheet-insets)]
+           insets                 (safe-area/get-insets)]
        ^{:key (str "sheet" @reloader/cnt)}
        [:<>
         [inactive]