diff --git a/src/quo2/components/dividers/divider_line/style.cljs b/src/quo2/components/dividers/divider_line/style.cljs index 34a5d4de0bf7..07e868ef8525 100644 --- a/src/quo2/components/dividers/divider_line/style.cljs +++ b/src/quo2/components/dividers/divider_line/style.cljs @@ -2,10 +2,10 @@ (:require [quo2.foundations.colors :as colors])) (defn divider-line - [blur? theme] + [{:keys [blur? padding-top padding-bottom theme]}] {:border-color (if blur? (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme) (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)) - :padding-top 12 - :padding-bottom 8 + :padding-top (when padding-top padding-top) + :padding-bottom (when padding-bottom padding-bottom) :border-bottom-width 1}) diff --git a/src/quo2/components/dividers/divider_line/view.cljs b/src/quo2/components/dividers/divider_line/view.cljs index b28b4590b548..30173a4998a6 100644 --- a/src/quo2/components/dividers/divider_line/view.cljs +++ b/src/quo2/components/dividers/divider_line/view.cljs @@ -5,7 +5,7 @@ [quo2.components.dividers.divider-line.style :as style])) (defn- view-internal - [{:keys [blur? theme]}] - [rn/view {:style (style/divider-line blur? theme)}]) + [props] + [rn/view {:style (style/divider-line props)}]) (def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/components/tabs/tabs/view.cljs b/src/quo2/components/tabs/tabs/view.cljs index 1f75930dea25..4445626e9874 100644 --- a/src/quo2/components/tabs/tabs/view.cljs +++ b/src/quo2/components/tabs/tabs/view.cljs @@ -70,8 +70,7 @@ on-change scroll-on-press? size - style - ]}] + style]}] [rn/view {:style (style/tab {:size size :default-tab-size default-tab-size @@ -160,36 +159,36 @@ :size) (when scroll-on-press? {:initial-scroll-index (utils.collection/first-index #(= @active-tab-id (:id %)) data)}) - {:ref #(reset! flat-list-ref %) - :style style + {:ref #(reset! flat-list-ref %) + :style style ;; The padding-top workaround is needed because on Android ;; {:overflow :visible} doesn't work on components inheriting ;; from ScrollView (e.g. FlatList). There are open issues, here's ;; just one about this topic: ;; https://github.com/facebook/react-native/issues/31218 :content-container-style - (assoc container-style :padding-top (dec unread-count-offset)) - :horizontal true - :scroll-event-throttle 64 + (assoc container-style :padding-top (dec unread-count-offset)) + :horizontal true + :scroll-event-throttle 64 :shows-horizontal-scroll-indicator false - :data data - :key-fn (comp str :id) - :on-scroll-to-index-failed identity - :on-scroll (partial on-scroll-handler - {:fade-end-percentage fade-end-percentage - :fade-end? fade-end? - :fading fading - :on-scroll on-scroll}) - :render-fn tab-view - :render-data {:active-tab-id active-tab-id - :blur? blur? - :customization-color customization-color - :flat-list-ref flat-list-ref - :number-of-items (count data) - :on-change on-change - :scroll-on-press? scroll-on-press? - :size size - :style style}})]]] + :data data + :key-fn (comp str :id) + :on-scroll-to-index-failed identity + :on-scroll (partial on-scroll-handler + {:fade-end-percentage fade-end-percentage + :fade-end? fade-end? + :fading fading + :on-scroll on-scroll}) + :render-fn tab-view + :render-data {:active-tab-id active-tab-id + :blur? blur? + :customization-color customization-color + :flat-list-ref flat-list-ref + :number-of-items (count data) + :on-change on-change + :scroll-on-press? scroll-on-press? + :size size + :style style}})]]] [rn/view (merge style {:flex-direction :row}) (map-indexed (fn [index item] ^{:key (:id item)} @@ -200,6 +199,5 @@ :number-of-items (count data) :on-change on-change :size size - :style style} - ]) + :style style}]) data)])))) diff --git a/src/status_im2/contexts/wallet/send/select_address/style.cljs b/src/status_im2/contexts/wallet/send/select_address/style.cljs index ee121cf606ba..1aae414d7524 100644 --- a/src/status_im2/contexts/wallet/send/select_address/style.cljs +++ b/src/status_im2/contexts/wallet/send/select_address/style.cljs @@ -1,5 +1,4 @@ -(ns status-im2.contexts.wallet.send.select-address.style - (:require [quo2.foundations.colors :as colors])) +(ns status-im2.contexts.wallet.send.select-address.style) (defn container [margin-top] @@ -10,11 +9,6 @@ {:margin-horizontal 20 :margin-vertical 12}) -(defn divider - [theme] - {:border-top-width 1 - :border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)}) - (def tabs {:padding-top 20 :padding-bottom 12}) diff --git a/src/status_im2/contexts/wallet/send/select_address/view.cljs b/src/status_im2/contexts/wallet/send/select_address/view.cljs index 4ee60b195f51..3795161fe6e9 100644 --- a/src/status_im2/contexts/wallet/send/select_address/view.cljs +++ b/src/status_im2/contexts/wallet/send/select_address/view.cljs @@ -10,77 +10,82 @@ [reagent.core :as reagent])) (def tabs-data - [{:id :recent :label (i18n/label :t/recent) :accessibility-label :recent-tab} - {:id :saved :label (i18n/label :t/saved) :accessibility-label :saved-tab} - {:id :contacts :label (i18n/label :t/contacts) :accessibility-label :contacts-tab} - {:id :my-accounts :label (i18n/label :t/my-accounts) :accessibility-label :my-accounts-tab}]) + [{:id :tab/recent :label (i18n/label :t/recent) :accessibility-label :recent-tab} + {:id :tab/saved :label (i18n/label :t/saved) :accessibility-label :saved-tab} + {:id :tab/contacts :label (i18n/label :t/contacts) :accessibility-label :contacts-tab} + {:id :tab/my-accounts :label (i18n/label :t/my-accounts) :accessibility-label :my-accounts-tab}]) (defn- tab-view [selected-tab] (case selected-tab - :recent [quo/empty-state - {:title (i18n/label :t/no-recent-transactions) - :description (i18n/label :t/make-one-it-is-easy-we-promise) - :placeholder? true - :container-style style/empty-container-style}] - :saved [quo/empty-state - {:title (i18n/label :t/no-saved-addresses) - :description (i18n/label :t/you-like-to-type-43-characters) - :placeholder? true - :container-style style/empty-container-style}] - :contacts [quo/empty-state - {:title (i18n/label :t/no-contacts) - :description (i18n/label :t/no-contacts-description) - :placeholder? true - :container-style style/empty-container-style}] - :my-accounts [quo/empty-state - {:title (i18n/label :t/no-other-accounts) - :description (i18n/label :t/here-is-a-cat-in-a-box-instead) - :placeholder? true - :container-style style/empty-container-style}])) + :tab/recent [quo/empty-state + {:title (i18n/label :t/no-recent-transactions) + :description (i18n/label :t/make-one-it-is-easy-we-promise) + :placeholder? true + :container-style style/empty-container-style}] + :tab/saved [quo/empty-state + {:title (i18n/label :t/no-saved-addresses) + :description (i18n/label :t/you-like-to-type-43-characters) + :placeholder? true + :container-style style/empty-container-style}] + :tab/contacts [quo/empty-state + {:title (i18n/label :t/no-contacts) + :description (i18n/label :t/no-contacts-description) + :placeholder? true + :container-style style/empty-container-style}] + :tab/my-accounts [quo/empty-state + {:title (i18n/label :t/no-other-accounts) + :description (i18n/label :t/here-is-a-cat-in-a-box-instead) + :placeholder? true + :container-style style/empty-container-style}])) + +(defn- address-input + [] + (let [timer (atom nil) + valid-ens? (reagent/atom false) + input-value (atom "")] + [quo/address-input + {:on-scan #(js/alert "Not implemented yet") + :ens-regex constants/regx-ens + :on-detect-ens + (fn [_] + (reset! valid-ens? false) + (when @timer (js/clearTimeout @timer)) + (reset! timer (js/setTimeout #(reset! valid-ens? true) 2000))) + :on-change-text #(reset! input-value %) + :valid-ens? @valid-ens?}])) (defn- view-internal [] - (let [margin-top (safe-area/get-top) - timer (atom nil) - valid-ens? (reagent/atom false) - input-value (atom "") - selected-tab (reagent/atom (:id (first tabs-data)))] - (fn [{:keys [theme]}] + (let [margin-top (safe-area/get-top) + selected-tab (reagent/atom (:id (first tabs-data))) + on-close #(rf/dispatch [:navigate-back]) + on-change-tab #(reset! selected-tab %)] + (fn [] [rn/scroll-view {:content-container-style (style/container margin-top) :keyboard-should-persist-taps :never :scroll-enabled false} [quo/page-nav {:icon-name :i/close - :on-press #(rf/dispatch [:navigate-back]) + :on-press on-close :accessibility-label :top-bar :right-side :account-switcher}] [quo/text-combinations {:title (i18n/label :t/send-to) :container-style style/title-container :title-accessibility-label :title-label}] - [quo/address-input - {:on-scan #(js/alert "Not implemented yet") - :ens-regex constants/regx-ens - :on-detect-ens (fn [_] - (reset! valid-ens? false) - (when @timer - (js/clearTimeout @timer)) - (reset! timer (js/setTimeout #(reset! valid-ens? true) - 2000))) - :on-change-text #(reset! input-value %) - :valid-ens? @valid-ens?}] - [rn/view {:style (style/divider theme)}] + [address-input] + [quo/divider-line] [quo/tabs {:style style/tabs - :content-style style/tabs-content + :container-style style/tabs-content :size 32 :default-active @selected-tab :data tabs-data :scrollable? true :scroll-on-press? true - :on-change #(reset! selected-tab %)}] + :on-change on-change-tab}] [tab-view @selected-tab]]))) (def view (quo.theme/with-theme view-internal))