From ab44dce27b0fb58dda507c10c2d39a2c1168082d Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Fri, 9 Jun 2023 17:03:00 +0400 Subject: [PATCH] fix: bottom sheet padding (#16216) * fix: bottom sheet padding --- .../bottom_sheet/{styles.cljs => style.cljs} | 4 ++-- src/status_im2/common/bottom_sheet/view.cljs | 18 +++++++++--------- .../drawers/nickname_drawer/style.cljs | 5 +++-- .../contacts/drawers/nickname_drawer/view.cljs | 6 ++++-- src/status_im2/navigation/view.cljs | 7 +------ 5 files changed, 19 insertions(+), 21 deletions(-) rename src/status_im2/common/bottom_sheet/{styles.cljs => style.cljs} (93%) diff --git a/src/status_im2/common/bottom_sheet/styles.cljs b/src/status_im2/common/bottom_sheet/style.cljs similarity index 93% rename from src/status_im2/common/bottom_sheet/styles.cljs rename to src/status_im2/common/bottom_sheet/style.cljs index 04a1520913..a9868326d4 100644 --- a/src/status_im2/common/bottom_sheet/styles.cljs +++ b/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))}) diff --git a/src/status_im2/common/bottom_sheet/view.cljs b/src/status_im2/common/bottom_sheet/view.cljs index 3947a44791..83aac5d2e7 100644 --- a/src/status_im2/common/bottom_sheet/view.cljs +++ b/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]]]])))) diff --git a/src/status_im2/contexts/contacts/drawers/nickname_drawer/style.cljs b/src/status_im2/contexts/contacts/drawers/nickname_drawer/style.cljs index 52d1912aa6..be8d1d18b6 100644 --- a/src/status_im2/contexts/contacts/drawers/nickname_drawer/style.cljs +++ b/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 [] diff --git a/src/status_im2/contexts/contacts/drawers/nickname_drawer/view.cljs b/src/status_im2/contexts/contacts/drawers/nickname_drawer/view.cljs index cbdd060b1e..7356b3e0f7 100644 --- a/src/status_im2/contexts/contacts/drawers/nickname_drawer/view.cljs +++ b/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 diff --git a/src/status_im2/navigation/view.cljs b/src/status_im2/navigation/view.cljs index dc73cf5104..7f77df6015 100644 --- a/src/status_im2/navigation/view.cljs +++ b/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]