diff --git a/src/quo2/components/selectors/disclaimer/style.cljs b/src/quo2/components/selectors/disclaimer/style.cljs index 1cbc9d691d..2e61358a15 100644 --- a/src/quo2/components/selectors/disclaimer/style.cljs +++ b/src/quo2/components/selectors/disclaimer/style.cljs @@ -3,8 +3,7 @@ (defn container [] - {:flex 1 - :flex-direction :row + {:flex-direction :row :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80-opa-40) :padding 11 :align-self :stretch diff --git a/src/status_im2/common/bottom_sheet/styles.cljs b/src/status_im2/common/bottom_sheet/styles.cljs index ee2fa05b23..177b655eda 100644 --- a/src/status_im2/common/bottom_sheet/styles.cljs +++ b/src/status_im2/common/bottom_sheet/styles.cljs @@ -31,13 +31,13 @@ :overflow :hidden}) (defn content-style - [insets] + [insets bottom-safe-area-spacing?] {:position :absolute :left 0 :right 0 :top 0 :padding-top border-radius - :padding-bottom (:bottom insets)}) + :padding-bottom (if bottom-safe-area-spacing? (:bottom insets) 0)}) (defn selected-background [] diff --git a/src/status_im2/common/bottom_sheet/view.cljs b/src/status_im2/common/bottom_sheet/view.cljs index 0225c11c18..613aaf0204 100644 --- a/src/status_im2/common/bottom_sheet/view.cljs +++ b/src/status_im2/common/bottom_sheet/view.cljs @@ -81,23 +81,25 @@ (defn bottom-sheet [props children] - (let [{on-cancel :on-cancel - disable-drag? :disable-drag? - show-handle? :show-handle? - visible? :visible? - backdrop-dismiss? :backdrop-dismiss? - expandable? :expandable? - selected-item :selected-item - is-initially-expaned? :expanded? - :or {show-handle? true - backdrop-dismiss? true - expandable? false - is-initially-expaned? false}} + (let [{on-cancel :on-cancel + disable-drag? :disable-drag? + show-handle? :show-handle? + visible? :visible? + backdrop-dismiss? :backdrop-dismiss? + expandable? :expandable? + bottom-safe-area-spacing? :bottom-safe-area-spacing? + selected-item :selected-item + is-initially-expanded? :expanded? + :or {show-handle? true + backdrop-dismiss? true + expandable? false + bottom-safe-area-spacing? true + is-initially-expanded? false}} props content-height (reagent/atom nil) show-bottom-sheet? (reagent/atom nil) keyboard-was-shown? (reagent/atom false) - expanded? (reagent/atom is-initially-expaned?) + expanded? (reagent/atom is-initially-expanded?) gesture-running? (reagent/atom false) reset-atoms (fn [] (reset! show-bottom-sheet? nil) @@ -226,7 +228,7 @@ {:behaviour (if platform/ios? :padding :height) :style {:flex 1}} [rn/view - {:style (styles/content-style insets) + {:style (styles/content-style insets bottom-safe-area-spacing?) :on-layout (when-not (and (some? @content-height) (> @content-height 0)) diff --git a/src/status_im2/contexts/communities/menus/request_to_join/style.cljs b/src/status_im2/contexts/communities/menus/request_to_join/style.cljs index ee13f868b9..f06468dd76 100644 --- a/src/status_im2/contexts/communities/menus/request_to_join/style.cljs +++ b/src/status_im2/contexts/communities/menus/request_to_join/style.cljs @@ -36,8 +36,7 @@ :margin-bottom 20}) (def title-container - {:flex 1 - :flex-direction :row + {:flex-direction :row :align-items :center :justify-content :space-between}) @@ -56,10 +55,10 @@ {:flex 1 :margin-right 12}) -(def request-button - {:margin-top 32 - :margin-bottom 16 - :flex 1 +(defn bottom-container + [safe-area-insets] + {:padding-top 32 + :padding-bottom (:bottom safe-area-insets) :flex-direction :row :align-items :center :justify-content :space-evenly}) diff --git a/src/status_im2/contexts/communities/menus/request_to_join/view.cljs b/src/status_im2/contexts/communities/menus/request_to_join/view.cljs index 77805b6a15..7d13bc7247 100644 --- a/src/status_im2/contexts/communities/menus/request_to_join/view.cljs +++ b/src/status_im2/contexts/communities/menus/request_to_join/view.cljs @@ -1,9 +1,10 @@ (ns status-im2.contexts.communities.menus.request-to-join.view - (:require [quo.react-native :as rn] - [quo2.core :as quo] + (:require [react-native.core :as rn] + [react-native.safe-area :as safe-area] [reagent.core :as reagent] - [utils.i18n :as i18n] [status-im2.contexts.communities.menus.request-to-join.style :as style] + [quo2.core :as quo] + [utils.i18n :as i18n] [utils.re-frame :as rf] [utils.requests :as requests])) @@ -73,60 +74,72 @@ :render-fn community-rule-item}]) (defn request-to-join - [{:keys [permissions name id images - can-join? can-request-access? + [{:keys [permissions + name + id + images + can-join? + can-request-access? requested-to-join-at]}] - (let [agreed-to-rules? (reagent/atom false) - is-open? (not= 3 (:access permissions))] - (fn [] - [rn/scroll-view {:style style/page-container} - [rn/view - {:style style/title-container} + (let [agreed-to-rules? (reagent/atom false)] + [safe-area/consumer + (fn [insets] + [:f> + (fn [] + (let [{window-height :height} (rn/use-window-dimensions) + is-open? (not= 3 (:access permissions))] + [rn/scroll-view {:style {:max-height (- window-height (:top insets))}} + [rn/view style/page-container + [rn/view + {:style style/title-container} - [quo/text - {:accessibility-label :communities-join-community - :weight :semi-bold - :size :heading-1} - (request-to-join-text is-open?)] - [rn/view - {:style style/request-icon} - [quo/icon :i/info]]] - [quo/context-tag - {:style - {:margin-right :auto - :margin-top 8}} - (:thumbnail images) name] - [quo/text - {:style {:margin-top 24} - :accessibility-label :communities-rules-title - :weight :semi-bold - :size :paragraph-1} - (i18n/label :t/community-rules)] - [community-rules-list community-rules] + [quo/text + {:accessibility-label :communities-join-community + :weight :semi-bold + :size :heading-1} + (request-to-join-text is-open?)] + [rn/view + {:style style/request-icon} + [quo/icon :i/info]]] + [quo/context-tag + {:style + {:margin-right :auto + :margin-top 8}} + (:thumbnail images) name] + [quo/text + {:style {:margin-top 24} + :accessibility-label :communities-rules-title + :weight :semi-bold + :size :paragraph-1} + (i18n/label :t/community-rules)] - [quo/disclaimer - {:accessibility-label :rules-disclaimer-checkbox - :container-style {:margin-top 20} - :on-change #(swap! agreed-to-rules? not)} - (i18n/label :t/accept-community-rules)] - [rn/view - {:style style/request-button} - [quo/button - {:accessibility-label :cancel - :on-press #(rf/dispatch [:bottom-sheet/hide]) - :type :grey - :style style/cancel-button} (i18n/label :t/cancel)] - [quo/button - {:accessibility-label :join-community-button - :on-press (fn [] - (if can-join? - (do - (rf/dispatch [:communities/join id]) - (rf/dispatch [:bottom-sheet/hide])) - (do (and can-request-access? - (not (pos? requested-to-join-at)) - (requests/can-request-access-again? requested-to-join-at)) - (rf/dispatch [:communities/request-to-join id]) - (rf/dispatch [:bottom-sheet/hide])))) - :disabled (not @agreed-to-rules?) - :style {:flex 1}} (request-to-join-text is-open?)]]]))) + [community-rules-list community-rules] + + [quo/disclaimer + {:accessibility-label :rules-disclaimer-checkbox + :container-style {:margin-top 20} + :on-change #(swap! agreed-to-rules? not)} + (i18n/label :t/accept-community-rules)] + + [rn/view {:style (style/bottom-container insets)} + [quo/button + {:accessibility-label :cancel + :on-press #(rf/dispatch [:bottom-sheet/hide]) + :type :grey + :style style/cancel-button} (i18n/label :t/cancel)] + + [quo/button + {:accessibility-label :join-community-button + :on-press (fn [] + (if can-join? + (do + (rf/dispatch [:communities/join id]) + (rf/dispatch [:bottom-sheet/hide])) + (do (and can-request-access? + (not (pos? requested-to-join-at)) + (requests/can-request-access-again? + requested-to-join-at)) + (rf/dispatch [:communities/request-to-join id]) + (rf/dispatch [:bottom-sheet/hide])))) + :disabled (not @agreed-to-rules?) + :style {:flex 1}} (request-to-join-text is-open?)]]]]))])])) diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs index 151f7fdc60..81478083e7 100644 --- a/src/status_im2/contexts/communities/overview/view.cljs +++ b/src/status_im2/contexts/communities/overview/view.cljs @@ -119,9 +119,10 @@ [quo/button {:on-press #(rf/dispatch [:bottom-sheet/show-sheet - {:content (fn [] [join-menu/request-to-join - community]) - :content-height 300}]) + {:content (fn [] [join-menu/request-to-join + community]) + :bottom-safe-area-spacing? false + :content-height 300}]) :accessibility-label :show-request-to-join-screen-button :override-background-color community-color :style style/join-button