Fix join communities design review bugs

* fix: join communities design review bugs

* updated design fixes
This commit is contained in:
John Ngei 2023-09-05 15:53:59 +03:00 committed by GitHub
parent 741e40094b
commit 7d1098b5b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 84 additions and 107 deletions

View File

@ -67,7 +67,9 @@
:top (- (+ picture-radius picture-border-width))
:left (- (/ picture-radius 2) picture-border-width)}))
(def display-picture
(defn display-picture
[theme]
{:border-radius picture-diameter
:width picture-diameter
:height picture-diameter})
:height picture-diameter
:background-color (colors/theme-colors colors/white colors/neutral-95 theme)})

View File

@ -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])]])))

View File

@ -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)]])

View File

@ -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

View File

@ -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,13 +18,10 @@
(defn request-to-join
[]
(let [agreed-to-rules? (reagent/atom false)]
(fn []
(let [{:keys [permissions
name
(let [{:keys [name
id
images]} (rf/sub [:get-screen-params])
open? (not= 3 (:access permissions))]
images]} (rf/sub [:get-screen-params])]
[rn/view {:flex 1}
[gesture/scroll-view {:style {:flex 1}}
[rn/view style/page-container
@ -39,8 +29,8 @@
[quo/text
{:accessibility-label :communities-join-community
:weight :semi-bold
:size :heading-1}
(request-to-join-text open?)]]
:size :heading-2}
(i18n/label :t/request-to-join)]]
[rn/view {:style {:margin-right :auto :margin-top 8}}
[quo/context-tag
{:type :community
@ -54,12 +44,6 @@
: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
@ -70,11 +54,10 @@
[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?)]]
(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)]]]]]))))
(i18n/label :t/request-to-join-disclaimer)]]]]])))

View File

@ -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])]
(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]])))
[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))

View File

@ -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
:weight :regular
: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)])]))
(i18n/label :t/community-admins-will-review-your-request)])]))
(defn status-tag
[pending? joined]

View File

@ -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}

View File

@ -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",