diff --git a/src/status_im/components/styles.cljs b/src/status_im/components/styles.cljs index a1fcd685f3..f4395eb31a 100644 --- a/src/status_im/components/styles.cljs +++ b/src/status_im/components/styles.cljs @@ -25,6 +25,7 @@ (def color-gray7 "#9fa3b4") (def color-gray8 "#6E777E") (def color-gray9 "#E9EBEC") +(def color-gray10 "#9BA3A8") (def color-dark "#49545d") (def color-steel "#838b91") (def color-white "white") diff --git a/src/status_im/components/tabs/styles.cljs b/src/status_im/components/tabs/styles.cljs index a3569c6a66..41256bed7e 100644 --- a/src/status_im/components/tabs/styles.cljs +++ b/src/status_im/components/tabs/styles.cljs @@ -35,11 +35,13 @@ :border-bottom-width 2 :border-bottom-color styles/color-white}) +(def tab-title-wrapper + {:min-width 60 + :margin-top 3}) + (defnstyle tab-title [active? text-only?] {:ios {:font-size (if text-only? 15 11)} :android {:font-size (if text-only? 14 12)} - :margin-top 3 - :min-width 60 :text-align :center :color (cond active? styles/color-blue4 diff --git a/src/status_im/components/tabs/views.cljs b/src/status_im/components/tabs/views.cljs index 2d064dea65..062b98e150 100644 --- a/src/status_im/components/tabs/views.cljs +++ b/src/status_im/components/tabs/views.cljs @@ -9,20 +9,25 @@ [status-im.components.tabs.styles :as tabs.styles] [status-im.utils.platform :as platform])) -(defn- tab [{:keys [view-id title icon-active icon-inactive style-active selected-view-id on-press]}] +(defn- tab [{:keys [view-id title title-fn icon-active icon-inactive style-active selected-view-id on-press] + :or {title-fn react/text}}] (let [active? (= view-id selected-view-id) text-only? (nil? icon-active)] - [react/touchable-highlight {:style (merge tabs.styles/tab (if (and active? style-active) style-active)) + [react/touchable-highlight {:style (merge tabs.styles/tab + (when (and active? style-active) + style-active)) :disabled active? - :on-press #(if on-press (on-press view-id) (dispatch [:navigate-to-tab view-id]))} + :on-press #(if on-press + (on-press view-id) + (dispatch [:navigate-to-tab view-id]))} [react/view {:style tabs.styles/tab-container} (when-let [icon (if active? icon-active icon-inactive)] [react/view [vi/icon icon (tabs.styles/tab-icon active?)]]) - [react/view - [react/text (merge (if text-only? {:uppercase? (get-in platform/platform-specific [:uppercase?])}) - {:style (tabs.styles/tab-title active? text-only?)}) - title]]]])) + [react/view {:style tabs.styles/tab-title-wrapper} + (title-fn {:uppercase? (and text-only? (get-in platform/platform-specific [:uppercase?])) + :style (tabs.styles/tab-title active? text-only?)} + title)]]])) (defn- create-tab [index data selected-view-id on-press style-active] (let [data (merge data {:key index @@ -90,28 +95,29 @@ scroll-ended (async/chan 10)] (r/create-class {:component-did-mount - #(start-scrolling-loop scroll-start scroll-ended) + #(start-scrolling-loop scroll-start scroll-ended) :component-will-update - (fn [] - (if @swiped? - (reset! swiped? false) - (when @main-swiper - (let [to (scroll-to tab-list @prev-view-id @view-id)] - (async/put! scroll-start [@main-swiper to]))))) + (fn [] + (if @swiped? + (reset! swiped? false) + (when @main-swiper + (let [to (scroll-to tab-list @prev-view-id @view-id)] + (async/put! scroll-start [@main-swiper to]))))) :display-name "swipable-tabs" :reagent-render - (fn [] - [react/view {:style style} - [tabs {:selected-view-id @view-id - :tab-list tab-list - :style style-tabs - :style-tab-active style-tab-active - :on-press on-view-change}] - [react/swiper (merge tabs.styles/swiper - {:index (get-tab-index tab-list @view-id) - :ref #(reset! main-swiper %) - :loop false - :on-momentum-scroll-end (on-scroll-end on-view-change tab-list swiped? scroll-ended view-id)}) - (doall - (map-indexed (fn [index {screen :screen}] - (with-meta screen {:key index})) tab-list))]])}))) \ No newline at end of file + (fn [] + [react/view {:style style} + [tabs {:selected-view-id @view-id + :tab-list tab-list + :style style-tabs + :style-tab-active style-tab-active + :on-press on-view-change}] + [react/swiper (merge tabs.styles/swiper + {:index (get-tab-index tab-list @view-id) + :ref #(reset! main-swiper %) + :loop false + :on-momentum-scroll-end (on-scroll-end on-view-change tab-list swiped? scroll-ended view-id)}) + (doall + (map-indexed (fn [index {screen :screen}] + (with-meta screen {:key index})) + tab-list))]])}))) diff --git a/src/status_im/ui/screens/wallet/transactions/views.cljs b/src/status_im/ui/screens/wallet/transactions/views.cljs index 4a65d787d9..11d05e5d8c 100644 --- a/src/status_im/ui/screens/wallet/transactions/views.cljs +++ b/src/status_im/ui/screens/wallet/transactions/views.cljs @@ -120,17 +120,25 @@ :render-fn render-transaction :empty-component (empty-text (i18n/label :t/transactions-unsigned-empty))}]])) -(defn- unsigned-transactions-title [unsigned-transactions-count] - (str (i18n/label :t/transactions-unsigned) - (if (pos? unsigned-transactions-count) (str " " unsigned-transactions-count)))) +(defn unsigned-transactions-title [{:keys [uppercase? style]} title] + (let [unsigned-transactions-count (re-frame/subscribe [:wallet.transactions/unsigned-transactions-count])] + [react/view {:flex-direction :row} + [react/text {:style style + :uppercase? uppercase?} + (i18n/label :t/transactions-unsigned)] + (when (pos? @unsigned-transactions-count) + [react/text {:style (merge + style + {:color styles/color-gray10})} + (str " " @unsigned-transactions-count)])])) (defn- tab-list [unsigned-transactions-count] [{:view-id :wallet-transactions-history :title (i18n/label :t/transactions-history) :screen [history-list]} - {:view-id :wallet-transactions-unsigned - :title (unsigned-transactions-title unsigned-transactions-count) - :screen [unsigned-list]}]) + {:view-id :wallet-transactions-unsigned + :title-fn unsigned-transactions-title + :screen [unsigned-list]}]) ;; Filter history