From 7d1098b5b3d62fcedf2c3fb585f78f9da97345db Mon Sep 17 00:00:00 2001 From: John Ngei Date: Tue, 5 Sep 2023 15:53:59 +0300 Subject: [PATCH] Fix join communities design review bugs * fix: join communities design review bugs * updated design fixes --- src/status_im2/common/scroll_page/style.cljs | 10 +- src/status_im2/common/scroll_page/view.cljs | 8 +- .../actions/community_rules_list/view.cljs | 4 +- .../actions/generic_menu/view.cljs | 2 +- .../actions/request_to_join/view.cljs | 103 ++++++++---------- .../contexts/communities/discover/view.cljs | 30 +++-- .../contexts/communities/overview/view.cljs | 30 ++--- src/status_im2/navigation/screens.cljs | 2 +- translations/en.json | 2 +- 9 files changed, 84 insertions(+), 107 deletions(-) diff --git a/src/status_im2/common/scroll_page/style.cljs b/src/status_im2/common/scroll_page/style.cljs index ca6e6debd3..21a9d42c91 100644 --- a/src/status_im2/common/scroll_page/style.cljs +++ b/src/status_im2/common/scroll_page/style.cljs @@ -67,7 +67,9 @@ :top (- (+ picture-radius picture-border-width)) :left (- (/ picture-radius 2) picture-border-width)})) -(def display-picture - {:border-radius picture-diameter - :width picture-diameter - :height picture-diameter}) +(defn display-picture + [theme] + {:border-radius picture-diameter + :width picture-diameter + :height picture-diameter + :background-color (colors/theme-colors colors/white colors/neutral-95 theme)}) diff --git a/src/status_im2/common/scroll_page/view.cljs b/src/status_im2/common/scroll_page/view.cljs index 35a9538a3b..b5342815d4 100644 --- a/src/status_im2/common/scroll_page/view.cljs +++ b/src/status_im2/common/scroll_page/view.cljs @@ -83,7 +83,7 @@ (defn f-display-picture - [scroll-height cover] + [scroll-height cover theme] (let [input-range [0 150] y (reanimated/use-shared-value scroll-height) animation (reanimated/interpolate y @@ -99,12 +99,12 @@ {:style (style/display-picture-container animation)} [rn/image {:source cover - :style style/display-picture}]])) + :style (style/display-picture theme)}]])) (defn scroll-page [_ _ _] (let [scroll-height (reagent/atom negative-scroll-position-0)] - (fn [{:keys [name cover-image logo page-nav-right-section-buttons on-scroll + (fn [{:keys [name theme cover-image logo page-nav-right-section-buttons on-scroll collapsed? height top-nav title-colum background-color navigate-back?]} sticky-header @@ -138,5 +138,5 @@ {:style (style/children-container {:border-radius (diff-with-max-min @scroll-height 16 0) :background-color background-color})} (when (and (not collapsed?) cover-image) - [:f> f-display-picture @scroll-height logo]) + [:f> f-display-picture @scroll-height logo theme]) children])]]))) 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 3421073f06..764733deef 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 @@ -32,13 +32,13 @@ [rn/view {:style style/community-rule} [quo/text {:style style/community-rule-index - :weight :medium + :weight :regular :size :paragraph-2} (str index ". ")] [quo/text {:style style/community-rule-text :accessibility-label :communities-rule-index - :weight :medium + :weight :regular :size :paragraph-2} (str title ": " content)]]) diff --git a/src/status_im2/contexts/communities/actions/generic_menu/view.cljs b/src/status_im2/contexts/communities/actions/generic_menu/view.cljs index 717d218f88..7b1aa74be9 100644 --- a/src/status_im2/contexts/communities/actions/generic_menu/view.cljs +++ b/src/status_im2/contexts/communities/actions/generic_menu/view.cljs @@ -12,7 +12,7 @@ [quo/text {:accessibility-label :communities-join-community :weight :semi-bold - :size :heading-1} + :size :heading-2} title]] [rn/view {:style style/community-tag} [quo/context-tag 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 e3fc183080..926d01c13b 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 @@ -2,19 +2,12 @@ (:require [quo2.core :as quo] [react-native.core :as rn] [react-native.gesture :as gesture] - [reagent.core :as reagent] [status-im2.common.password-authentication.view :as password-authentication] [status-im2.contexts.communities.actions.community-rules-list.view :as community-rules] [status-im2.contexts.communities.actions.request-to-join.style :as style] [utils.i18n :as i18n] [utils.re-frame :as rf])) -(defn request-to-join-text - [open?] - (if open? - (i18n/label :t/join-open-community) - (i18n/label :t/request-to-join))) - (defn join-community-and-navigate-back [id] (rf/dispatch [:password-authentication/show @@ -25,56 +18,46 @@ (defn request-to-join [] - (let [agreed-to-rules? (reagent/atom false)] - (fn [] - (let [{:keys [permissions - name - id - images]} (rf/sub [:get-screen-params]) - 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} - [quo/text - {:accessibility-label :communities-join-community - :weight :semi-bold - :size :heading-1} - (request-to-join-text open?)]] - [rn/view {:style {:margin-right :auto :margin-top 8}} - [quo/context-tag - {:type :community - :size 24 - :community-logo (:thumbnail images) - :community-name 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/view community-rules/standard-rules] - [quo/disclaimer - {:accessibility-label :rules-disclaimer-checkbox - :container-style {:margin-top 20} - :on-change #(swap! agreed-to-rules? not) - :checked? @agreed-to-rules?} - (i18n/label :t/accept-community-rules)] - [rn/view {:style (style/bottom-container)} - [quo/button - {:accessibility-label :cancel - :on-press #(rf/dispatch [:navigate-back]) - :type :grey - :container-style style/cancel-button} - (i18n/label :t/cancel)] - [quo/button - {:accessibility-label :join-community-button - :on-press #(join-community-and-navigate-back id) - :disabled? (not @agreed-to-rules?) - :container-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)]]]]])))) + (fn [] + (let [{:keys [name + id + images]} (rf/sub [:get-screen-params])] + [rn/view {:flex 1} + [gesture/scroll-view {:style {:flex 1}} + [rn/view style/page-container + [rn/view {:style style/title-container} + [quo/text + {:accessibility-label :communities-join-community + :weight :semi-bold + :size :heading-2} + (i18n/label :t/request-to-join)]] + [rn/view {:style {:margin-right :auto :margin-top 8}} + [quo/context-tag + {:type :community + :size 24 + :community-logo (:thumbnail images) + :community-name 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/view community-rules/standard-rules] + [rn/view {:style (style/bottom-container)} + [quo/button + {:accessibility-label :cancel + :on-press #(rf/dispatch [:navigate-back]) + :type :grey + :container-style style/cancel-button} + (i18n/label :t/cancel)] + [quo/button + {:accessibility-label :join-community-button + :on-press #(join-community-and-navigate-back id) + :container-style {:flex 1}} + (i18n/label :t/request-to-join)]] + [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/src/status_im2/contexts/communities/discover/view.cljs b/src/status_im2/contexts/communities/discover/view.cljs index 859f5dae33..951effa104 100644 --- a/src/status_im2/contexts/communities/discover/view.cljs +++ b/src/status_im2/contexts/communities/discover/view.cljs @@ -2,6 +2,7 @@ (:require [utils.i18n :as i18n] [oops.core :as oops] [quo2.core :as quo] + [quo2.theme :as quo.theme] [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] @@ -198,7 +199,7 @@ [discover-communities-segments selected-tab true]]))) (defn discover-screen-content - [featured-communities] + [featured-communities theme] (let [view-type (reagent/atom :card-view) selected-tab (reagent/atom :all) scroll-height (reagent/atom 0) @@ -206,6 +207,7 @@ (fn [] [scroll-page/scroll-page {:name (i18n/label :t/discover-communities) + :theme theme :on-scroll #(reset! scroll-height %) :background-color (colors/theme-colors colors/white @@ -223,14 +225,18 @@ featured-communities @view-type]]))) -(defn discover - [] - (rf/dispatch [:fetch-contract-communities]) - (fn [] - (let [featured-communities (rf/sub - [:communities/featured-contract-communities])] - [rn/view - {:style (style/discover-screen-container (colors/theme-colors - colors/white - colors/neutral-95))} - [discover-screen-content featured-communities]]))) +(defn f-view-internal + [{:keys [theme]}] + (let [featured-communities (rf/sub [:communities/featured-contract-communities])] + [rn/view + {:style (style/discover-screen-container (colors/theme-colors + colors/white + colors/neutral-95))} + [discover-screen-content featured-communities theme]])) + + +(defn- internal-discover-view + [params] + [:f> f-view-internal params]) + +(def view (quo.theme/with-theme internal-discover-view)) diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs index 6b0f0d5c27..d2ec65898d 100644 --- a/src/status_im2/contexts/communities/overview/view.cljs +++ b/src/status_im2/contexts/communities/overview/view.cljs @@ -99,12 +99,6 @@ (map #(channel-chat-item community-id community-color %)) chats))]))]) -(defn request-to-join-text - [is-open?] - (if is-open? - (i18n/label :t/join-open-community) - (i18n/label :t/request-to-join-community))) - (defn get-access-type [access] (case access @@ -173,13 +167,11 @@ (i18n/label :t/join-open-community)]]))) (defn join-community - [{:keys [joined can-join? color permissions token-permissions] :as community} + [{:keys [joined color permissions token-permissions] :as community} pending?] (let [access-type (get-access-type (:access permissions)) unknown-access? (= access-type :unknown-access) - invite-only? (= access-type :invite-only) - is-open? (= access-type :open) - node-offline? (and can-join? (not joined) pending?)] + invite-only? (= access-type :invite-only)] [:<> (when-not (or joined pending? invite-only? unknown-access?) (if (seq token-permissions) @@ -189,20 +181,14 @@ :accessibility-label :show-request-to-join-screen-button :customization-color color :icon-left :i/communities} - (request-to-join-text is-open?)])) + (i18n/label :t/request-to-join-community)])) - (when (and (not (or joined pending? token-permissions)) (not (or is-open? node-offline?))) + (when (not (or joined pending? token-permissions)) [quo/text - {:size :paragraph-2 - :style style/review-notice} - (i18n/label :t/community-admins-will-review-your-request)]) - - (when node-offline? - [quo/information-box - {:type :informative - :icon :i/info - :style {:margin-top 12}} - (i18n/label :t/request-processed-after-node-online)])])) + {:size :paragraph-2 + :weight :regular + :style style/review-notice} + (i18n/label :t/community-admins-will-review-your-request)])])) (defn status-tag [pending? joined] diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index 2924a14456..6dcb88f7cb 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -102,7 +102,7 @@ :component find-sync-code/view} {:name :discover-communities - :component communities.discover/discover} + :component communities.discover/view} {:name :community-overview :component communities.overview/overview} diff --git a/translations/en.json b/translations/en.json index 52790b23b9..3f9763323c 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1209,7 +1209,7 @@ "request-processed-after-node-online": "Community control node is offline. Request will be processed once it's 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", + "request-to-join-community": "Request to join community", "requested-to-join-community": "You requested to join “{{community}}”", "request-transaction": "Request transaction", "required-field": "Required field",