From 52f7fc59ee93d437c1365851c4c2000643222dac Mon Sep 17 00:00:00 2001 From: Alexander Date: Fri, 1 Dec 2023 10:03:08 +0100 Subject: [PATCH] Updated `data-item`, monospaced & aligned address (#18008) * Upd * Fix --- .../settings/data_item/component_spec.cljs | 52 +++++++++---------- .../components/settings/data_item/style.cljs | 4 +- .../components/settings/data_item/view.cljs | 22 ++++---- .../quo_preview/settings/data_item.cljs | 6 +-- .../confirm_address/view.cljs | 7 +++ .../contexts/wallet/collectible/view.cljs | 14 ++--- .../sheets/network_preferences/view.cljs | 2 +- .../contexts/wallet/edit_account/view.cljs | 2 +- 8 files changed, 58 insertions(+), 51 deletions(-) diff --git a/src/quo/components/settings/data_item/component_spec.cljs b/src/quo/components/settings/data_item/component_spec.cljs index e9cd8ea931..d74ed50bb4 100644 --- a/src/quo/components/settings/data_item/component_spec.cljs +++ b/src/quo/components/settings/data_item/component_spec.cljs @@ -10,14 +10,14 @@ (h/render [quo/data-item {:on-press (h/mock-fn) :blur? false - :description :account :icon-right? false :card? true :label :none :status :default :size :default :title "Label" - :subtitle "Description" + :subtitle "Subtitle" + :subtitle-type :account :icon :i/placeholder :emoji "🎮" :customization-color :yellow}]) @@ -27,14 +27,14 @@ (h/render [quo/data-item {:on-press (h/mock-fn) :blur? false - :description :account :icon-right? false :card? false :label :none :status :default :size :default :title "Label" - :subtitle "Description" + :subtitle "Subtitle" + :subtitle-type :account :icon :i/placeholder :emoji "🎮" :customization-color :yellow}]) @@ -45,14 +45,14 @@ (h/render [quo/data-item {:on-press (h/mock-fn) :blur? false - :description :account :icon-right? false :card? true :label :none :status :default :size :small :title "Label" - :subtitle "Description" + :subtitle "Subtitle" + :subtitle-type :account :icon :i/placeholder :emoji "🎮" :customization-color :yellow}]) @@ -63,14 +63,14 @@ (h/render [quo/data-item {:on-press (h/mock-fn) :blur? false - :description :account :icon-right? false :card? true :label :none :status :default :size :default :title "Label" - :subtitle "Description" + :subtitle "Subtitle" + :subtitle-type :account :icon :i/placeholder :emoji "🎮" :customization-color :yellow}]) @@ -81,31 +81,31 @@ (h/render [quo/data-item {:on-press (h/mock-fn) :blur? false - :description :account :icon-right? false :card? true :label :none :status :default :size :default :title "Label" - :subtitle "Description" + :subtitle "Subtitle" + :subtitle-type :account :icon :i/placeholder :emoji "🎮" :customization-color :yellow}]) - (h/is-truthy (h/get-by-text "Description"))) + (h/is-truthy (h/get-by-text "Subtitle"))) (h/test "right icon is not visible when icon-right? is false" (h/render [quo/data-item {:on-press (h/mock-fn) :blur? false - :description :account :icon-right? false :card? true :label :none :status :default :size :default :title "Label" - :subtitle "Description" + :subtitle "Subtitle" + :subtitle-type :account :icon :i/placeholder :emoji "🎮" :customization-color :yellow}]) @@ -115,7 +115,6 @@ (h/render [quo/data-item {:on-press (h/mock-fn) :blur? false - :description :account :icon-right? true :right-icon :i/chevron-right :card? true @@ -123,17 +122,17 @@ :status :default :size :default :title "Label" - :subtitle "Description" + :subtitle "Subtitle" + :subtitle-type :account :icon :i/placeholder :emoji "🎮" :customization-color :yellow}]) (h/is-truthy (h/query-by-label-text :icon-right))) - (h/test "description icon is visible when description is icon" + (h/test "icon is visible when subtitle type is icon" (h/render [quo/data-item {:on-press (h/mock-fn) :blur? false - :description :icon :icon-right? true :right-icon :i/chevron-right :card? true @@ -141,17 +140,17 @@ :status :default :size :default :title "Label" - :subtitle "Description" + :subtitle "Subtitle" + :subtitle-type :icon :icon :i/placeholder :emoji "🎮" :customization-color :yellow}]) - (h/is-truthy (h/query-by-label-text :description-icon))) + (h/is-truthy (h/query-by-label-text :subtitle-type-icon))) - (h/test "description image is visible when description is network" + (h/test "image is visible when subtitle type is network" (h/render [quo/data-item {:on-press (h/mock-fn) :blur? false - :description :network :icon-right? true :right-icon :i/chevron-right :card? true @@ -159,18 +158,18 @@ :status :default :size :default :title "Label" - :subtitle "Description" + :subtitle "Subtitle" + :subtitle-type :network :icon :i/placeholder :emoji "🎮" :customization-color :yellow :network-image (quo.resources/get-network :ethereum)}]) - (h/is-truthy (h/query-by-label-text :description-image))) + (h/is-truthy (h/query-by-label-text :subtitle-type-image))) - (h/test "description emoji is visible when description is account" + (h/test "emoji is visible when subtitle type is account" (h/render [quo/data-item {:on-press (h/mock-fn) :blur? false - :description :account :icon-right? true :right-icon :i/chevron-right :card? true @@ -178,7 +177,8 @@ :status :default :size :default :title "Label" - :subtitle "Description" + :subtitle "Subtitle" + :subtitle-type :account :icon :i/placeholder :emoji "🎮" :customization-color :yellow}]) diff --git a/src/quo/components/settings/data_item/style.cljs b/src/quo/components/settings/data_item/style.cljs index a78c2261cc..f05877e690 100644 --- a/src/quo/components/settings/data_item/style.cljs +++ b/src/quo/components/settings/data_item/style.cljs @@ -37,8 +37,8 @@ :align-items :center}) (defn subtitle-icon-container - [description] - {:margin-right (when (not= :default description) 4) + [subtitle-type] + {:margin-right (when (not= :default subtitle-type) 4) :justify-content :center}) (defn title diff --git a/src/quo/components/settings/data_item/view.cljs b/src/quo/components/settings/data_item/view.cljs index fec1c6f4e1..98da9fc25d 100644 --- a/src/quo/components/settings/data_item/view.cljs +++ b/src/quo/components/settings/data_item/view.cljs @@ -16,14 +16,15 @@ [rn/view {:style (style/loading-container size blur? theme)}]) (defn- left-subtitle - [{:keys [theme size description icon icon-color blur? subtitle customization-color emoji - network-image]}] + [{:keys [theme size subtitle-type icon icon-color blur? subtitle customization-color emoji + network-image] + :or {subtitle-type :default}}] [rn/view {:style style/subtitle-container} (when (not= :small size) - [rn/view {:style (style/subtitle-icon-container description)} - (case description + [rn/view {:style (style/subtitle-icon-container subtitle-type)} + (case subtitle-type :icon [icons/icon icon - {:accessibility-label :description-icon + {:accessibility-label :subtitle-type-icon :size 16 :color icon-color}] :account [account-avatar/view @@ -32,7 +33,7 @@ :emoji emoji :type :default}] :network [rn/image - {:accessibility-label :description-image + {:accessibility-label :subtitle-type-image :source network-image :style style/image}] nil)]) @@ -58,10 +59,9 @@ (i18n/label :t/days)])]) (defn- left-side - "The description can either be given as a string `description` or a component `custom-subtitle`" - [{:keys [theme title status size blur? description custom-subtitle icon subtitle label icon-color - customization-color network-image - emoji] + "The description can either be given as a string `subtitle-type` or a component `custom-subtitle`" + [{:keys [theme title status size blur? custom-subtitle icon subtitle subtitle-type label icon-color + customization-color network-image emoji] :as props}] [rn/view {:style style/left-side} [left-title @@ -79,7 +79,7 @@ [left-subtitle {:theme theme :size size - :description description + :subtitle-type subtitle-type :icon icon :icon-color icon-color :blur? blur? diff --git a/src/status_im2/contexts/quo_preview/settings/data_item.cljs b/src/status_im2/contexts/quo_preview/settings/data_item.cljs index 37b5b0d661..1df25f498f 100644 --- a/src/status_im2/contexts/quo_preview/settings/data_item.cljs +++ b/src/status_im2/contexts/quo_preview/settings/data_item.cljs @@ -16,7 +16,7 @@ {:key :graph} {:key :preview}]} {:type :select - :key :description + :key :subtitle-type :options [{:key :default} {:key :icon} {:key :network} @@ -39,14 +39,14 @@ [] (let [state (reagent/atom {:on-press #(js/alert (str "pressed")) :blur? false - :description :account + :subtitle-type :account :icon-right? false :card? true :label :none :status :default :size :default :title "Label" - :subtitle "Description" + :subtitle "Subtitle" :icon :i/placeholder :right-icon :i/chevron-right :emoji "🎮" diff --git a/src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/view.cljs b/src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/view.cljs index 26260c9074..1efd47c967 100644 --- a/src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/view.cljs +++ b/src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/view.cljs @@ -54,5 +54,12 @@ :subtitle address :status :default :size :default + :subtitle-type :default + :custom-subtitle (fn [] [quo/text + {:size :paragraph-2 + ;; TODO: monospace font + ;; https://github.com/status-im/status-mobile/issues/17009 + :weight :monospace} + address]) :container-style style/data-item :on-press #(js/alert "To be implemented")}]]]))) diff --git a/src/status_im2/contexts/wallet/collectible/view.cljs b/src/status_im2/contexts/wallet/collectible/view.cljs index 99d5c729bf..afaf95e0ee 100644 --- a/src/status_im2/contexts/wallet/collectible/view.cljs +++ b/src/status_im2/contexts/wallet/collectible/view.cljs @@ -68,12 +68,12 @@ [rn/flat-list {:render-fn (fn [{:keys [trait-type value]}] [quo/data-item - {:description :default - :card? true + {:card? true :status :default :size :default :title trait-type :subtitle value + :subtitle-type :default :container-style style/traits-item}]) :data traits :key :collectibles-list @@ -91,24 +91,24 @@ {:style style/info-container} [rn/view {:style style/account} [quo/data-item - {:description :account - :card? true + {:card? true :status :default :size :default :title (i18n/label :t/account-title) :subtitle "Collectibles vault" + :subtitle-type :account :emoji "🎮" :customization-color :yellow}]] [rn/view {:style style/network} [quo/data-item - {:description :network - :card? true + {:card? true :status :default :size :default :title (i18n/label :t/network) :network-image (quo.resources/get-network network-keyword) - :subtitle network-name}]]])) + :subtitle network-name + :subtitle-type :network}]]])) (defn view [] diff --git a/src/status_im2/contexts/wallet/common/sheets/network_preferences/view.cljs b/src/status_im2/contexts/wallet/common/sheets/network_preferences/view.cljs index fb00e80b2a..7fd2c793ec 100644 --- a/src/status_im2/contexts/wallet/common/sheets/network_preferences/view.cljs +++ b/src/status_im2/contexts/wallet/common/sheets/network_preferences/view.cljs @@ -44,12 +44,12 @@ [quo/data-item {:status :default :size :default - :description :default :label :none :blur? false :card? true :title (i18n/label :t/address) :subtitle address + :subtitle-type :default :container-style (merge style/data-item {:background-color (colors/theme-colors colors/neutral-2_5 colors/neutral-90 diff --git a/src/status_im2/contexts/wallet/edit_account/view.cljs b/src/status_im2/contexts/wallet/edit_account/view.cljs index 36a8979585..71c3defd00 100644 --- a/src/status_im2/contexts/wallet/edit_account/view.cljs +++ b/src/status_im2/contexts/wallet/edit_account/view.cljs @@ -79,7 +79,7 @@ [quo/data-item {:status :default :size :default - :description :default + :subtitle-type :default :label :none :blur? false :icon-right? true