Communities - Address for airdrops/permissions screen issues (#19296)

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

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"))))

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

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

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)

src/status_im/contexts/communities/actions/addresses_for_permissions/view.cljs

@@ -288,17 +288,13 @@
                                  id
                                  color
                                  flag-share-all-addresses]
-       :header                  [quo/category
+       :header                  [quo/page-setting
-                                 {:list-type       :settings
+                                 {:checked?            flag-share-all-addresses
-                                  :data            [{:title
+                                  :customization-color color
-                                                     (i18n/label
+                                  :on-change           toggle-flag-share-all-addresses
-                                                      :t/share-all-current-and-future-addresses)
+                                  :setting-text        (i18n/label
-                                                     :action :selector
+                                                        :t/share-all-current-and-future-addresses)
-                                                     :action-props
+                                  :container-style     {:margin-bottom 16}}]
-                                                     {:on-change toggle-flag-share-all-addresses
-                                                      :customization-color color
-                                                      :checked? flag-share-all-addresses}}]
-                                  :container-style {:padding-bottom 16 :padding-horizontal 0}}]
        :content-container-style {:padding-horizontal 20}
        :key-fn                  :address
        :data                    wallet-accounts}]

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

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

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