From 0ae24070b00167676411f847a5892223d8133c00 Mon Sep 17 00:00:00 2001 From: Icaro Motta Date: Tue, 6 Jun 2023 06:31:43 -0300 Subject: [PATCH] Fixes for Request to Join Community bottom sheet (#16192) Fixes a bunch of UI issues to match what's in Figma https://www.figma.com/file/h9wo4GipgZURbqqr1vShFN/Communities-for-Mobile?type=design&node-id=1733-125697&t=3ssa500fwGvUqiTL-0. Fixes https://github.com/status-im/status-mobile/issues/16117 - Fix typo in the Request to Join Communities' text. - Fix bottom sheet handle colors. They had the incorrect transparency. - Fix incorrect Request to Join bottom sheet top margin. - Remove touchable opacity from disclaimer quo2 component. It should use touchable without feedback. This also fixes the problem on the on onboarding flow since both screens use the same disclaimer component. - Add missing final disclaimer after accept/reject buttons. Related to https://github.com/status-im/status-mobile/issues/16196 --- .../components/selectors/disclaimer/view.cljs | 4 +- .../common/bottom_sheet/styles.cljs | 3 +- .../common/bottom_sheet_screen/style.cljs | 9 +++-- .../actions/community_rules_list/style.cljs | 35 +++++------------ .../actions/community_rules_list/view.cljs | 39 +++++++------------ .../actions/request_to_join/style.cljs | 17 +++++--- .../actions/request_to_join/view.cljs | 37 ++++++++++-------- translations/en.json | 1 + 8 files changed, 65 insertions(+), 80 deletions(-) diff --git a/src/quo2/components/selectors/disclaimer/view.cljs b/src/quo2/components/selectors/disclaimer/view.cljs index 4098eeec18..952244e792 100644 --- a/src/quo2/components/selectors/disclaimer/view.cljs +++ b/src/quo2/components/selectors/disclaimer/view.cljs @@ -6,9 +6,9 @@ (defn view [{:keys [checked? blur? accessibility-label container-style on-change]} label] - [rn/touchable-opacity + [rn/touchable-without-feedback {:on-press on-change - :accessibility-label "disclaimer-touchable-opacity"} + :accessibility-label :disclaimer-touchable-opacity} [rn/view {:style (merge container-style (style/container blur?))} [selectors/checkbox {:accessibility-label accessibility-label diff --git a/src/status_im2/common/bottom_sheet/styles.cljs b/src/status_im2/common/bottom_sheet/styles.cljs index 917415b7fe..3b929da5b8 100644 --- a/src/status_im2/common/bottom_sheet/styles.cljs +++ b/src/status_im2/common/bottom_sheet/styles.cljs @@ -1,5 +1,6 @@ (ns status-im2.common.bottom-sheet.styles (:require [quo2.foundations.colors :as colors] + [quo2.theme :as theme] [status-im.utils.platform :as platform])) (defn handle @@ -7,7 +8,7 @@ {:width 32 :height 4 :background-color (colors/theme-colors colors/neutral-100 colors/white override-theme) - :opacity 0.05 + :opacity (theme/theme-value 0.05 0.1) :border-radius 100 :align-self :center :margin-vertical 8}) diff --git a/src/status_im2/common/bottom_sheet_screen/style.cljs b/src/status_im2/common/bottom_sheet_screen/style.cljs index 8c5d73356b..7d5cb7ae29 100644 --- a/src/status_im2/common/bottom_sheet_screen/style.cljs +++ b/src/status_im2/common/bottom_sheet_screen/style.cljs @@ -1,7 +1,7 @@ (ns status-im2.common.bottom-sheet-screen.style - (:require - [quo2.foundations.colors :as colors] - [react-native.reanimated :as reanimated])) + (:require [quo2.foundations.colors :as colors] + [quo2.theme :as theme] + [react-native.reanimated :as reanimated])) (defn background [opacity] @@ -40,4 +40,5 @@ {:width 32 :height 4 :border-radius 100 - :background-color (colors/theme-colors colors/neutral-100-opa-30 colors/white-opa-30 override-theme)}) + :background-color (colors/theme-colors colors/neutral-100 colors/white override-theme) + :opacity (theme/theme-value 0.05 0.1)}) diff --git a/src/status_im2/contexts/communities/actions/community_rules_list/style.cljs b/src/status_im2/contexts/communities/actions/community_rules_list/style.cljs index 902d598576..70d81425a9 100644 --- a/src/status_im2/contexts/communities/actions/community_rules_list/style.cljs +++ b/src/status_im2/contexts/communities/actions/community_rules_list/style.cljs @@ -1,31 +1,14 @@ -(ns status-im2.contexts.communities.actions.community-rules-list.style - (:require [quo2.foundations.colors :as colors])) +(ns status-im2.contexts.communities.actions.community-rules-list.style) (def community-rule - {:height 18 - :width 18 - :margin-left 1 - :margin-right 9 - :background-color colors/white - :border-color colors/neutral-20 - :border-width 1 - :border-radius 6}) + {:flex-direction :row + :flex 1 + :align-items :flex-start + :margin-top 16}) -(def community-rule-container - {:flex 1 - :margin-top 16}) - -(def inner-community-rule-container - {:flex 1 - :flex-direction :row - :align-items :center}) +(def community-rule-index + {:margin-left 5}) (def community-rule-text - {:margin-left :auto - :margin-right :auto - :margin-top :auto - :margin-bottom :auto}) - -(def community-rule-sub-text - {:margin-left 28 - :margin-top 1}) + {:margin-left 6 + :flex 1}) diff --git a/src/status_im2/contexts/communities/actions/community_rules_list/view.cljs b/src/status_im2/contexts/communities/actions/community_rules_list/view.cljs index bef05f71bc..664dfdea97 100644 --- a/src/status_im2/contexts/communities/actions/community_rules_list/view.cljs +++ b/src/status_im2/contexts/communities/actions/community_rules_list/view.cljs @@ -1,16 +1,15 @@ (ns status-im2.contexts.communities.actions.community-rules-list.view - (:require [react-native.core :as rn] - [status-im2.contexts.communities.actions.community-rules-list.style :as style] - [quo2.core :as quo])) + (:require [quo2.core :as quo] + [react-native.core :as rn] + [status-im2.contexts.communities.actions.community-rules-list.style :as style])) -;; TODO: update with real data (def rules [{:index 1 :title "Be respectful" :content "You must respect all users, regardless of your liking towards them. Treat others the way you want to be treated."} {:index 2 - :title "No Inappropriate Language" + :title "No inappropriate language" :content "The use of profanity should be kept to a minimum. However, any derogatory language towards any user is prohibited."} {:index 3 @@ -30,28 +29,18 @@ (defn community-rule-item [{:keys [title content index]}] - [rn/view - {:style style/community-rule-container} - [rn/view - {:style style/inner-community-rule-container} - [rn/view - {:style style/community-rule} - [quo/text - {:style style/community-rule-text - :accessibility-label :communities-rule-index - :weight :medium - :size :label} - (str index)]] - [quo/text - {:accessibility-label :communities-rule-title - :weight :semi-bold - :size :paragraph-2} - title]] + [rn/view {:style style/community-rule} [quo/text - {:style style/community-rule-sub-text - :accessibility-label :communities-rule-content + {:style style/community-rule-index + :weight :medium + :size :paragraph-2} + (str index ". ")] + [quo/text + {:style style/community-rule-text + :accessibility-label :communities-rule-index + :weight :medium :size :paragraph-2} - content]]) + (str title ": " content)]]) (defn view [rules] diff --git a/src/status_im2/contexts/communities/actions/request_to_join/style.cljs b/src/status_im2/contexts/communities/actions/request_to_join/style.cljs index 260ae371c4..ab4d99f60e 100644 --- a/src/status_im2/contexts/communities/actions/request_to_join/style.cljs +++ b/src/status_im2/contexts/communities/actions/request_to_join/style.cljs @@ -27,8 +27,15 @@ (defn bottom-container [] - {:margin-horizontal 20 - :padding-top 32 - :flex-direction :row - :align-items :center - :justify-content :space-evenly}) + {:padding-top 32 + :flex-direction :row + :align-items :center + :justify-content :space-evenly}) + +(def final-disclaimer-container + {:margin-top 12 + :padding-horizontal 40}) + +(def final-disclaimer-text + {:color colors/neutral-50 + :text-align :center}) diff --git a/src/status_im2/contexts/communities/actions/request_to_join/view.cljs b/src/status_im2/contexts/communities/actions/request_to_join/view.cljs index 6fb852b988..08219c9672 100644 --- a/src/status_im2/contexts/communities/actions/request_to_join/view.cljs +++ b/src/status_im2/contexts/communities/actions/request_to_join/view.cljs @@ -1,17 +1,17 @@ (ns status-im2.contexts.communities.actions.request-to-join.view - (:require [react-native.core :as rn] - [status-im2.contexts.communities.actions.community-rules-list.view :as community-rules] + (:require [quo2.core :as quo] + [react-native.core :as rn] + [react-native.gesture :as gesture] [reagent.core :as reagent] + [status-im2.contexts.communities.actions.community-rules-list.view :as community-rules] [status-im2.contexts.communities.actions.request-to-join.style :as style] - [quo2.core :as quo] [utils.i18n :as i18n] [utils.re-frame :as rf] - [utils.requests :as requests] - [react-native.gesture :as gesture])) + [utils.requests :as requests])) (defn request-to-join-text - [is-open?] - (if is-open? + [open?] + (if open? (i18n/label :t/join-open-community) (i18n/label :t/request-to-join))) @@ -27,20 +27,16 @@ can-request-access? requested-to-join-at]} (rf/sub [:get-screen-params]) pending? (rf/sub [:communities/my-pending-request-to-join id]) - is-open? (not= 3 (:access permissions))] - [rn/view {:flex 1 :margin-top 40} + open? (not= 3 (:access permissions))] + [rn/view {:flex 1} [gesture/scroll-view {:style {:flex 1}} [rn/view style/page-container - [rn/view - {:style style/title-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]]] + (request-to-join-text open?)]] [quo/context-tag {:style {:margin-right :auto @@ -64,7 +60,8 @@ {:accessibility-label :cancel :on-press #(rf/dispatch [:navigate-back]) :type :grey - :style style/cancel-button} (i18n/label :t/cancel)] + :style style/cancel-button} + (i18n/label :t/cancel)] [quo/button {:accessibility-label :join-community-button :on-press (fn [] @@ -79,4 +76,10 @@ (rf/dispatch [:communities/request-to-join id]) (rf/dispatch [:navigate-back])))) :disabled (not @agreed-to-rules?) - :style {:flex 1}} (request-to-join-text is-open?)]]]]])))) + :style {:flex 1}} + (request-to-join-text open?)]] + [rn/view {:style style/final-disclaimer-container} + [quo/text + {:size :paragraph-2 + :style style/final-disclaimer-text} + (i18n/label :t/request-to-join-disclaimer)]]]]])))) diff --git a/translations/en.json b/translations/en.json index d175346665..9ffaab004a 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1203,6 +1203,7 @@ "repeat-puk": "Repeat new 12-digit PUK", "report-bug-email-template": "1. Issue Description\n{{description}}\n\n\n2. Steps to reproduce\n{{steps}}\n\n\n3. Attach screenshots that can demo the problem, please\n", "request-processed-after-node-online": "Your request will be processed once the community owner node is back online.", + "request-to-join-disclaimer": "Joining the community will reveal your public addresses to the owner", "request-to-join": "Request to join", "request-to-join-community": "Request to join Community", "requested-to-join-community": "You requested to join “{{community}}”",