diff --git a/src/quo/components/drawers/drawer_top/view.cljs b/src/quo/components/drawers/drawer_top/view.cljs index b1d37e62fd..de4903d0f0 100644 --- a/src/quo/components/drawers/drawer_top/view.cljs +++ b/src/quo/components/drawers/drawer_top/view.cljs @@ -81,7 +81,8 @@ (let [tag-type (or context-tag-type :account)] [rn/view {:accessibility-label :context-tag-wrapper - :style {:flex-wrap :wrap}} + :style {:flex-wrap :wrap + :margin-top 4}} [context-tag/view {:type tag-type :account-name account-name diff --git a/src/quo/components/settings/page_setting/component_spec.cljs b/src/quo/components/settings/page_setting/component_spec.cljs new file mode 100644 index 0000000000..dcb36abd95 --- /dev/null +++ b/src/quo/components/settings/page_setting/component_spec.cljs @@ -0,0 +1,11 @@ +(ns quo.components.settings.page-setting.component-spec + (:require + [quo.core :as quo] + [test-helpers.component :as h])) + +(h/describe + "renders basic text" + (h/test "title is visible" + (h/render [quo/page-setting + {:setting-text "sample text"}]) + (h/is-truthy (h/get-by-text "sample text")))) diff --git a/src/quo/components/settings/page_setting/style.cljs b/src/quo/components/settings/page_setting/style.cljs new file mode 100644 index 0000000000..49ee62300f --- /dev/null +++ b/src/quo/components/settings/page_setting/style.cljs @@ -0,0 +1,14 @@ +(ns quo.components.settings.page-setting.style + (:require + [quo.foundations.colors :as colors])) + +(defn container + [theme] + {:flex-direction :row + :justify-content :space-between + :background-color (colors/theme-colors colors/neutral-2_5 colors/neutral-90 theme) + :padding-vertical 13 + :padding-horizontal 12 + :border-width 1 + :border-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme) + :border-radius 16}) diff --git a/src/quo/components/settings/page_setting/view.cljs b/src/quo/components/settings/page_setting/view.cljs new file mode 100644 index 0000000000..779b70a775 --- /dev/null +++ b/src/quo/components/settings/page_setting/view.cljs @@ -0,0 +1,24 @@ +(ns quo.components.settings.page-setting.view + (:require + [quo.components.markdown.text :as text] + [quo.components.selectors.selectors.view :as selectors] + [quo.components.settings.page-setting.style :as style] + [quo.theme] + [react-native.core :as rn])) + +(defn page-setting + [{:keys [setting-text customization-color checked? container-style on-change disabled?]}] + (let [theme (quo.theme/use-theme-value)] + [rn/view + {:style (merge (style/container theme) + container-style)} + [text/text + {:weight :medium + :number-of-lines 1} setting-text] + [selectors/view + {:type :checkbox + :checked? checked? + :customization-color customization-color + :accessibility-label :user-list-toggle-check + :disabled? disabled? + :on-change (when on-change on-change)}]])) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index 633fcbe688..7b1490fbb9 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -128,6 +128,7 @@ quo.components.settings.accounts.view quo.components.settings.category.view quo.components.settings.data-item.view + quo.components.settings.page-setting.view quo.components.settings.privacy-option.view quo.components.settings.reorder-item.view quo.components.settings.section-label.view @@ -377,6 +378,7 @@ (def account quo.components.settings.accounts.view/account) (def category quo.components.settings.category.view/category) (def data-item quo.components.settings.data-item.view/view) +(def page-setting quo.components.settings.page-setting.view/page-setting) (def privacy-option quo.components.settings.privacy-option.view/view) (def reorder-item quo.components.settings.reorder-item.view/reorder-item) (def section-label quo.components.settings.section-label.view/view) diff --git a/src/status_im/contexts/communities/actions/addresses_for_permissions/view.cljs b/src/status_im/contexts/communities/actions/addresses_for_permissions/view.cljs index e34c942e93..e76ceaeee2 100644 --- a/src/status_im/contexts/communities/actions/addresses_for_permissions/view.cljs +++ b/src/status_im/contexts/communities/actions/addresses_for_permissions/view.cljs @@ -288,17 +288,13 @@ id color flag-share-all-addresses] - :header [quo/category - {:list-type :settings - :data [{:title - (i18n/label - :t/share-all-current-and-future-addresses) - :action :selector - :action-props - {:on-change toggle-flag-share-all-addresses - :customization-color color - :checked? flag-share-all-addresses}}] - :container-style {:padding-bottom 16 :padding-horizontal 0}}] + :header [quo/page-setting + {:checked? flag-share-all-addresses + :customization-color color + :on-change toggle-flag-share-all-addresses + :setting-text (i18n/label + :t/share-all-current-and-future-addresses) + :container-style {:margin-bottom 16}}] :content-container-style {:padding-horizontal 20} :key-fn :address :data wallet-accounts}] diff --git a/src/status_im/contexts/communities/actions/airdrop_addresses/view.cljs b/src/status_im/contexts/communities/actions/airdrop_addresses/view.cljs index 4973f1b075..93a9dd765a 100644 --- a/src/status_im/contexts/communities/actions/airdrop_addresses/view.cljs +++ b/src/status_im/contexts/communities/actions/airdrop_addresses/view.cljs @@ -69,6 +69,7 @@ :title (i18n/label :t/airdrop-addresses) :community-name name :button-icon :i/info + :button-type :grey :on-button-press not-implemented/alert :community-logo logo :customization-color color}]) diff --git a/src/status_im/contexts/preview/quo/main.cljs b/src/status_im/contexts/preview/quo/main.cljs index 492c4fed7c..2d3456942b 100644 --- a/src/status_im/contexts/preview/quo/main.cljs +++ b/src/status_im/contexts/preview/quo/main.cljs @@ -150,6 +150,7 @@ [status-im.contexts.preview.quo.settings.accounts :as accounts] [status-im.contexts.preview.quo.settings.category :as category] [status-im.contexts.preview.quo.settings.data-item :as data-item] + [status-im.contexts.preview.quo.settings.page-setting :as page-setting] [status-im.contexts.preview.quo.settings.privacy-option :as privacy-option] [status-im.contexts.preview.quo.settings.reorder-item :as reorder-item] [status-im.contexts.preview.quo.settings.section-label :as section-label] @@ -447,6 +448,8 @@ :component react/preview-react}] :settings [{:name :privacy-option :component privacy-option/view} + {:name :page-setting + :component page-setting/view} {:name :accounts :component accounts/view} {:name :settings-item diff --git a/src/status_im/contexts/preview/quo/settings/page_setting.cljs b/src/status_im/contexts/preview/quo/settings/page_setting.cljs new file mode 100644 index 0000000000..76fd19ad23 --- /dev/null +++ b/src/status_im/contexts/preview/quo/settings/page_setting.cljs @@ -0,0 +1,19 @@ +(ns status-im.contexts.preview.quo.settings.page-setting + (:require + [quo.core :as quo] + [reagent.core :as reagent] + [status-im.contexts.preview.quo.preview :as preview])) + +(def descriptor + [(preview/customization-color-option {:feng-shui? true}) + {:key :setting-text :type :text}]) + +(defn view + [] + (let [state (reagent/atom {:setting-text "Sample text" + :customization-color :blue})] + (fn [] + [preview/preview-container + {:state state + :descriptor descriptor} + [quo/page-setting @state]])))