status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/status_im2/common/scroll_page/style.cljs
View File

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

8
src/status_im2/common/scroll_page/view.cljs
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])]])))

4
src/status_im2/contexts/communities/actions/community_rules_list/view.cljs
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)]])

2
src/status_im2/contexts/communities/actions/generic_menu/view.cljs
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

103
src/status_im2/contexts/communities/actions/request_to_join/view.cljs
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,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)]]]]])))

30
src/status_im2/contexts/communities/discover/view.cljs
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])]
[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))

30
src/status_im2/contexts/communities/overview/view.cljs
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
: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]

2
src/status_im2/navigation/screens.cljs
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}

2
translations/en.json
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",