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

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
This commit is contained in:
Icaro Motta 2023-06-06 06:31:43 -03:00 committed by GitHub
parent a4f8833547
commit 0ae24070b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 65 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/quo2/components/selectors/disclaimer/view.cljs
View File

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

3
src/status_im2/common/bottom_sheet/styles.cljs
View File

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

7
src/status_im2/common/bottom_sheet_screen/style.cljs
View File

@ -1,6 +1,6 @@
(ns status-im2.common.bottom-sheet-screen.style
(:require
[quo2.foundations.colors :as colors]
(:require [quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[react-native.reanimated :as reanimated]))
(defn background
@ -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)})

33
src/status_im2/contexts/communities/actions/community_rules_list/style.cljs
View File

@ -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})
(def community-rule-container
{:flex 1
{:flex-direction :row
:flex 1
:align-items :flex-start
: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})

33
src/status_im2/contexts/communities/actions/community_rules_list/view.cljs
View File

@ -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}
[rn/view {:style style/community-rule}
[quo/text
{: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 :label}
(str index)]]
[quo/text
{:accessibility-label :communities-rule-title
:weight :semi-bold
:size :paragraph-2}
title]]
[quo/text
{:style style/community-rule-sub-text
:accessibility-label :communities-rule-content
:size :paragraph-2}
content]])
(str title ": " content)]])
(defn view
[rules]

11
src/status_im2/contexts/communities/actions/request_to_join/style.cljs
View File

@ -27,8 +27,15 @@
(defn bottom-container
[]
{:margin-horizontal 20
:padding-top 32
{: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})

37
src/status_im2/contexts/communities/actions/request_to_join/view.cljs
View File

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

1
translations/en.json
View File

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