From 9cda6806e3d846aeacc48bcfda58d293c23523e9 Mon Sep 17 00:00:00 2001
From: Julien Eluard <julien.eluard@gmail.com>
Date: Sun, 10 Sep 2017 15:50:36 +0200
Subject: [PATCH] Fixed various wallet UI inconsistencies

---
 src/status_im/components/list/styles.cljs     | 46 ++++++-----
 src/status_im/components/list/views.cljs      | 13 +--
 src/status_im/components/styles.cljs          |  4 +
 src/status_im/components/tabs/styles.cljs     | 26 +++---
 src/status_im/components/tabs/views.cljs      | 25 +++---
 .../components/toolbar_new/styles.cljs        | 20 ++---
 .../components/toolbar_new/view.cljs          | 27 +++----
 src/status_im/ios/platform.cljs               |  2 +-
 src/status_im/ui/screens/main_tabs/views.cljs |  3 +-
 src/status_im/ui/screens/wallet/db.cljs       |  9 ---
 .../ui/screens/wallet/history/styles.cljs     | 26 +++---
 .../ui/screens/wallet/history/views.cljs      | 38 ++++-----
 .../ui/screens/wallet/main/styles.cljs        | 15 ++--
 .../ui/screens/wallet/main/views.cljs         | 79 +++++++++----------
 src/status_im/ui/screens/wallet/subs.cljs     | 20 ++---
 15 files changed, 186 insertions(+), 167 deletions(-)

diff --git a/src/status_im/components/list/styles.cljs b/src/status_im/components/list/styles.cljs
index a5c977f9d7..22431054ef 100644
--- a/src/status_im/components/list/styles.cljs
+++ b/src/status_im/components/list/styles.cljs
@@ -1,22 +1,22 @@
 (ns status-im.components.list.styles
-  (:require [status-im.components.styles :as st]
-            [status-im.utils.platform :as p]))
+  (:require-macros [status-im.utils.styles :refer [defstyle]])
+  (:require [status-im.components.styles :as styles]
+            [status-im.utils.platform :as platform]))
 
 (def item
-  {:flex            1
-   :flex-direction  :row})
+  {:flex-direction :row})
 
 (def item-text-view
-  {:flex            1
-   :flex-direction  :column})
+  {:flex           1
+   :flex-direction :column})
 
 (def primary-text-base
   {:font-size   17
-   :color       st/color-black})
+   :color       styles/color-black})
 
 (def primary-text
   (merge primary-text-base
-         {:padding-top 12}))
+         {:padding-top (if platform/ios? 13 14)}))
 
 (def primary-text-only
   (merge primary-text-base
@@ -24,19 +24,26 @@
 
 (def secondary-text
   {:font-size   16
-   :color       st/color-gray4
+   :color       styles/color-gray4
    :padding-top 4})
 
 (def item-image
-  {:width   40
-   :height  40})
+  {:width  40
+   :height 40})
 
-(def item-image-wrapper
-  {:margin  14})
+(def item-icon
+  {:width  24
+   :height 24})
+
+(def left-item-wrapper
+  {:margin 14})
+
+(def right-item-wrapper
+  {:margin 16})
 
 (def base-separator
   {:height           1
-   :background-color st/color-gray5
+   :background-color styles/color-gray5
    :opacity          0.5
    :margin-top       12
    :margin-bottom    16})
@@ -48,8 +55,11 @@
 
 (def section-separator base-separator)
 
-(def section-header
+(defstyle section-header
   {:font-size       14
-   :margin-vertical 2
-   :margin-top      16
-   :margin-left     16})
\ No newline at end of file
+   :color           styles/color-gray4
+   :margin-left     16
+   :android         {:margin-top    11
+                     :margin-bottom 3}
+   :ios             {:margin-top    10
+                     :margin-bottom 2}})
\ No newline at end of file
diff --git a/src/status_im/components/list/views.cljs b/src/status_im/components/list/views.cljs
index 5277d5a6f1..ed87fe65d0 100644
--- a/src/status_im/components/list/views.cljs
+++ b/src/status_im/components/list/views.cljs
@@ -30,9 +30,11 @@
   ([left-action content] (item left-action content nil))
   ([left-action content right-action]
    [rn/view {:style lst/item}
-    left-action
+    [rn/view {:style lst/left-item-wrapper}
+     left-action]
     content
-    right-action]))
+    [rn/view {:style lst/right-item-wrapper}
+     right-action]]))
 
 (defn touchable-item [handler item]
   [rn/touchable-highlight {:on-press handler}
@@ -40,14 +42,13 @@
 
 (defn item-icon
   [{:keys [icon style icon-opts]}]
-  [rn/view {:style lst/item-image-wrapper}
-   [rn/view {:style style}
-    [vi/icon icon (merge icon-opts {:style lst/item-image})]]])
+  [rn/view {:style style}
+   [vi/icon icon (merge icon-opts {:style lst/item-icon})]])
 
 (defn item-image
   ([source] (item-image source nil))
   ([source style]
-   [rn/view {:style (merge lst/item-image-wrapper style)}
+   [rn/view {:style style}
     [rn/image {:source source
                :style  lst/item-image}]]))
 
diff --git a/src/status_im/components/styles.cljs b/src/status_im/components/styles.cljs
index aec1f80ffc..dee2dae15c 100644
--- a/src/status_im/components/styles.cljs
+++ b/src/status_im/components/styles.cljs
@@ -12,6 +12,8 @@
 (def color-purple "#a187d5")
 (def color-gray-transparent-light "rgba(0, 0, 0, 0.1)")
 (def color-gray-transparent "rgba(0, 0, 0, 0.4)")
+(def color-gray4-transparent "rgba(147, 155, 161, 0.2)")
+(def color-gray10-transparent "rgba(184, 193, 199, 0.5)")
 (def color-gray "#838c93de")
 (def color-gray2 "#8f838c93")
 (def color-gray3 "#00000040")
@@ -46,6 +48,8 @@
 (def color-light-red2 "#f47979")
 (def color-green-1 "#a8f4d4")
 (def color-green-2 "#448469")
+(def color-green-3 "#44d058")
+(def color-green-3-light "rgba(68, 208, 88, 0.2)")
 (def color-cyan "#7adcfb")
 
 (def color-separator "#D6D6D6")
diff --git a/src/status_im/components/tabs/styles.cljs b/src/status_im/components/tabs/styles.cljs
index ba5bf7b8bc..f505d1a151 100644
--- a/src/status_im/components/tabs/styles.cljs
+++ b/src/status_im/components/tabs/styles.cljs
@@ -28,27 +28,29 @@
    :alignItems      :center})
 
 (def tab
-  {:flex           1
-   :height         tab-height
-   :justifyContent :center
-   :alignItems     :center})
+  {:flex                1
+   :height              tab-height
+   :justify-content     :center
+   :align-items         :center
+   :border-bottom-width 2
+   :border-bottom-color styles/color-white})
 
-(defnstyle tab-title [active?]
-  {:ios        {:font-size 11}
-   :android    {:font-size 12}
+(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      (if active? styles/color-blue4 styles/color-gray8)})
+   :color      (if active? styles/color-blue4 styles/color-black)})
 
 (defn tab-icon [active?]
   {:color (if active? styles/color-blue4 styles/color-gray4)})
 
 (def tab-container
-  {:flex           1
-   :height         tab-height
-   :justifyContent :center
-   :alignItems     :center})
+  {:flex                1
+   :height              tab-height
+   :justify-content     :center
+   :align-items         :center})
 
 (def swiper
   {:shows-pagination false})
diff --git a/src/status_im/components/tabs/views.cljs b/src/status_im/components/tabs/views.cljs
index f1c7d906b4..8ae4eb8f9c 100644
--- a/src/status_im/components/tabs/views.cljs
+++ b/src/status_im/components/tabs/views.cljs
@@ -9,9 +9,10 @@
             [status-im.components.tabs.styles :as styles]
             [status-im.utils.platform :as p]))
 
-(defn- tab [{:keys [view-id title icon-active icon-inactive selected-view-id on-press]}]
-  (let [active? (= view-id selected-view-id)]
-    [react/touchable-highlight {:style    styles/tab
+(defn- tab [{:keys [view-id title icon-active icon-inactive style-active selected-view-id on-press]}]
+  (let [active? (= view-id selected-view-id)
+        text-only? (nil? icon-active)]
+    [react/touchable-highlight {:style    (merge styles/tab (if (and active? style-active) style-active))
                                 :disabled active?
                                 :on-press  #(if on-press (on-press view-id) (dispatch [:navigate-to-tab view-id]))}
      [react/view {:style styles/tab-container}
@@ -19,29 +20,29 @@
         [react/view
          [vi/icon icon (styles/tab-icon active?)]])
       [react/view
-       [react/text (merge (if-not icon-active {:uppercase? (get-in p/platform-specific [:uppercase?])})
-                          {:style (styles/tab-title active?)})
+       [react/text (merge (if text-only? {:uppercase? (get-in p/platform-specific [:uppercase?])})
+                          {:style (styles/tab-title active? text-only?)})
         title]]]]))
 
-(defn- create-tab [index data selected-view-id on-press]
+(defn- create-tab [index data selected-view-id on-press style-active]
   (let [data (merge data {:key              index
                           :index            index
+                          :style-active     style-active
                           :selected-view-id selected-view-id
                           :on-press         on-press})]
     [tab data]))
 
 (defview tabs-container [style children]
   (letsubs [tabs-hidden? [:tabs-hidden?]]
-    [react/animated-view {:style         (merge style
-                                                styles/tabs-container-line)
+    [react/animated-view {:style          style
                           :pointer-events (if tabs-hidden? :none :auto)}
      children]))
 
-(defn tabs [{:keys [style tab-list selected-view-id on-press]}]
+(defn tabs [{:keys [style style-tab-active tab-list selected-view-id on-press]}]
   [tabs-container style
    (into
      [react/view styles/tabs-inner-container]
-     (map-indexed #(create-tab %1 %2 selected-view-id on-press) tab-list))])
+     (map-indexed #(create-tab %1 %2 selected-view-id on-press style-tab-active) tab-list))])
 
 ;; Swipable tabs
 
@@ -82,7 +83,7 @@
               (reset! scrolling? false)
               (recur (async/<! scroll-start))))
 
-(defn swipable-tabs [{:keys [style on-view-change]} tab-list prev-view-id view-id]
+(defn swipable-tabs [{:keys [style style-tabs style-tab-active on-view-change]} tab-list prev-view-id view-id]
   (let [swiped?           (r/atom false)
         main-swiper       (r/atom nil)
         scroll-start      (async/chan 10)
@@ -103,6 +104,8 @@
                        [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 styles/swiper
                                              {:index                  (get-tab-index tab-list @view-id)
diff --git a/src/status_im/components/toolbar_new/styles.cljs b/src/status_im/components/toolbar_new/styles.cljs
index 3d521d2e00..6a483b4a23 100644
--- a/src/status_im/components/toolbar_new/styles.cljs
+++ b/src/status_im/components/toolbar_new/styles.cljs
@@ -1,17 +1,17 @@
 (ns status-im.components.toolbar-new.styles
   (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
-  (:require [status-im.components.styles :as st]
+  (:require [status-im.components.styles :as styles]
             [status-im.utils.platform :as p]))
 
-(def toolbar-background1 st/color-white)
+(def toolbar-background1 styles/color-white)
 
 (def toolbar-icon-width 24)
 (def toolbar-icon-height 24)
 (def toolbar-icon-spacing 24)
 
-(defn toolbar-wrapper [background-color]
-  {:backgroundColor (or background-color toolbar-background1)
-   :elevation       2})
+(defn toolbar-wrapper [background-color flat?]
+  {:background-color (or background-color toolbar-background1)
+   :elevation        (if flat? 0 2)})
 
 (defstyle toolbar
   {:flex-direction     :row
@@ -31,7 +31,7 @@
    :ios        {:align-items  :center}})
 
 (defstyle toolbar-title-text
-  {:color          st/text1-color
+  {:color          styles/text1-color
    :letter-spacing -0.2
    :font-size      17
    :ios            {:text-align "center"}})
@@ -72,7 +72,7 @@
    :padding-left        0
    :padding-bottom      0
    :text-align-vertical :center
-   :color               st/color-black
+   :color               styles/color-black
    :ios                 {:padding-left   8
                          :padding-top    2
                          :letter-spacing -0.2}})
@@ -95,10 +95,10 @@
    :android {:margin 16}})
 
 (def item-text
-  {:color     st/color-blue4
+  {:color     styles/color-blue4
    :font-size 17})
 
-(def toolbar-text-action-disabled {:color st/color-gray7})
+(def toolbar-text-action-disabled {:color styles/color-gray7})
 
-(def item-text-white-background {:color st/color-blue4})
+(def item-text-white-background {:color styles/color-blue4})
 
diff --git a/src/status_im/components/toolbar_new/view.cljs b/src/status_im/components/toolbar_new/view.cljs
index feda835077..d3f00fcc29 100644
--- a/src/status_im/components/toolbar_new/view.cljs
+++ b/src/status_im/components/toolbar_new/view.cljs
@@ -90,25 +90,18 @@
   ([title] (toolbar2 nil title))
   ([props title] (toolbar2 props default-nav-back [content-title title]))
   ([props nav-item content-item] (toolbar2 props nav-item content-item [actions [{:image :blank}]]))
-  ([{:keys [background-color
-            hide-border?
-            style
-            border-style]}
+  ([{:keys [background-color style flat?]}
     nav-item
     content-item
     action-items]
-  (let [style (merge (tst/toolbar-wrapper background-color) style)]
-    [rn/view {:style style}
-     [rn/view {:style tst/toolbar}
-      (when nav-item
-        [rn/view {:style (tst/toolbar-nav-actions-container 0)}
-         nav-item])
-      content-item
-      action-items]
-     [sync-state-gradient-view/sync-state-gradient-view]
-     (when-not hide-border?
-       [rn/view {:style (merge tst/toolbar-border-container border-style)}
-        [rn/view {:style tst/toolbar-border}]])])))
+   [rn/view {:style (merge (tst/toolbar-wrapper background-color flat?) style)}
+    [rn/view {:style tst/toolbar}
+     (when nav-item
+       [rn/view {:style (tst/toolbar-nav-actions-container 0)}
+        nav-item])
+     content-item
+     action-items]
+    [sync-state-gradient-view/sync-state-gradient-view]]))
 
 (defn toolbar
   "DEPRECATED
@@ -124,7 +117,7 @@
            border-style
            title-style
            style]}]
-  (let [style (merge (tst/toolbar-wrapper background-color) style)]
+  (let [style (merge (tst/toolbar-wrapper background-color false) style)]
     [rn/view {:style style}
      [rn/view tst/toolbar
       (when-not hide-nav?
diff --git a/src/status_im/ios/platform.cljs b/src/status_im/ios/platform.cljs
index bc941c5eb9..9c4d829ebe 100644
--- a/src/status_im/ios/platform.cljs
+++ b/src/status_im/ios/platform.cljs
@@ -23,7 +23,7 @@
                                          :color     styles/color-transparent}
                            :wallet      {:height    20
                                          :bar-style "light-content"
-                                         :color     styles/color-blue5}}
+                                         :color     styles/color-blue4}}
    :sized-text            {:margin-top        -5
                            :additional-height 5}
    :actions-list-view     {:border-bottom-color styles/color-gray3
diff --git a/src/status_im/ui/screens/main_tabs/views.cljs b/src/status_im/ui/screens/main_tabs/views.cljs
index 681e9b7434..89ac3167b5 100644
--- a/src/status_im/ui/screens/main_tabs/views.cljs
+++ b/src/status_im/ui/screens/main_tabs/views.cljs
@@ -108,6 +108,7 @@
          (doall
            (map-indexed (fn [index {vid :view-id screen :screen}]
                           ^{:key index} [screen (= view-id vid)]) tab-list))]
-        [tabs {:style (styles/tabs-container tabs-hidden?)
+        [tabs {:style            (merge (styles/tabs-container tabs-hidden?)
+                                        styles/tabs-container-line)
                :selected-view-id view-id
                :tab-list         tab-list}]]]]]))
\ No newline at end of file
diff --git a/src/status_im/ui/screens/wallet/db.cljs b/src/status_im/ui/screens/wallet/db.cljs
index 025145ca89..05416c5b88 100644
--- a/src/status_im/ui/screens/wallet/db.cljs
+++ b/src/status_im/ui/screens/wallet/db.cljs
@@ -11,12 +11,3 @@
 
 ;; TODO(oskarth): spec for balance as BigNumber
 ;; TODO(oskarth): Spec for prices as as: {:from ETH, :to USD, :price 290.11, :last-day 304.17}
-
-(def dummy-transaction-data
-  [{:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "0,4908" :symbol "ETH"} :state :pending}
-   {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :pending}
-   {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :outgoing}
-   {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :postponed}
-   {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "0,4908" :symbol "ETH"} :state :pending}
-   {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :pending}
-   {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :outgoing}])
diff --git a/src/status_im/ui/screens/wallet/history/styles.cljs b/src/status_im/ui/screens/wallet/history/styles.cljs
index 030c3d40e4..f08c853c74 100644
--- a/src/status_im/ui/screens/wallet/history/styles.cljs
+++ b/src/status_im/ui/screens/wallet/history/styles.cljs
@@ -15,15 +15,18 @@
    :padding-right 10
    :font-size     13})
 
+(def main-section styles/flex)
 
-(def wallet-transactions-container
-  {:flex             1
-   :background-color styles/color-white})
+(def tabs
+  {:border-bottom-width 1
+   :border-bottom-color styles/color-gray10-transparent})
 
-(def main-section
-  {:flex             1
-   :position         :relative
-   :background-color styles/color-white})
+(def tab-active
+  {:border-bottom-width 2
+   :border-bottom-color styles/color-blue4})
+
+(def forward
+  {:color styles/color-gray7})
 
 (def empty-text
   {:text-align       :center
@@ -78,5 +81,10 @@
   {:background-color :transparent})
 
 (defn transaction-icon-background [color]
-  {:border-radius    32
-   :background-color styles/color-blue4-transparent})
+  {:flex             1
+   :justify-content  :center
+   :align-items      :center
+   :width            40
+   :height           40
+   :border-radius    32
+   :background-color color})
diff --git a/src/status_im/ui/screens/wallet/history/views.cljs b/src/status_im/ui/screens/wallet/history/views.cljs
index 8d7f8ff4ef..fea957304d 100644
--- a/src/status_im/ui/screens/wallet/history/views.cljs
+++ b/src/status_im/ui/screens/wallet/history/views.cljs
@@ -5,6 +5,8 @@
             [status-im.components.checkbox.view :as checkbox]
             [status-im.components.list.views :as list]
             [status-im.components.react :as react]
+            [status-im.components.status-bar :as status-bar]
+            [status-im.components.styles :as styles]
             [status-im.components.tabs.views :as tabs]
             [status-im.components.toolbar-new.view :as toolbar]
             [status-im.i18n :as i18n]
@@ -32,7 +34,7 @@
    :handler   #(utils/show-popup "TODO" "Not implemented") #_(re-frame/dispatch [:navigate-to-modal :wallet-transactions-sign-all])})
 
 (defn toolbar-view [view-id unsigned-transactions]
-  [toolbar/toolbar2 {}
+  [toolbar/toolbar2 {:flat? true}
    toolbar/default-nav-back
    [toolbar/content-title (i18n/label :t/transactions)]
    (case @view-id
@@ -49,17 +51,15 @@
    [button/secondary-button {:text (i18n/label :t/delete) :on-press #(on-delete-transaction m)}]])
 
 (defn- unsigned? [type] (= "unsigned" type))
-(defn- inbound? [type] (= "inbound" type))
 
-(defn- transaction-icon [k color] {:icon k :style (history.styles/transaction-icon-background color)})
+(defn- transaction-icon [k background-color color] {:icon k :icon-opts {:color color} :style (history.styles/transaction-icon-background background-color)})
 
 (defn- transaction-type->icon [s]
   (case s
-    "inbound" (transaction-icon :icons/arrow-left :red)
-    "outbound" (transaction-icon :icons/arrow-right :red)
-    "postponed"  (transaction-icon :icons/arrow-right :red)
-    "unsigned" (transaction-icon :icons/dots-horizontal :red)
-    "pending" (transaction-icon :icons/dots-horizontal :red)
+    "unsigned" (transaction-icon :icons/dots-horizontal styles/color-gray4-transparent styles/color-gray7)
+    "inbound" (transaction-icon :icons/arrow-left styles/color-green-3-light styles/color-green-3)
+    "outbound" (transaction-icon :icons/arrow-right styles/color-blue4-transparent styles/color-blue4)
+    ("postponed" "pending")  (transaction-icon :icons/arrow-right styles/color-gray4-transparent styles/color-gray7)
     (throw (str "Unknown transaction type: " s))))
 
 (defn render-transaction [{:keys [to from type value symbol] :as m}]
@@ -72,7 +72,7 @@
       (str (i18n/label :t/from) " " from))
     (when (unsigned? type)
       [action-buttons m])]
-   [list/item-icon {:icon :icons/forward}]])
+   [list/item-icon {:icon :icons/forward :icon-opts history.styles/forward}]])
 
 ;; TODO(yenda) hook with re-frame
 (defn- empty-text [s] [react/text {:style history.styles/empty-text} s])
@@ -81,7 +81,7 @@
   (letsubs [transactions-history-list [:wallet/transactions-history-list]
             transactions-loading?     [:wallet/transactions-loading?]
             error-message             [:wallet.transactions/error-message?]]
-    [react/scroll-view
+    [react/scroll-view {:style styles/flex}
      (when error-message [wallet.views/error-message-view history.styles/error-container history.styles/error-message])
      [list/section-list {:sections        transactions-history-list
                          :render-fn       render-transaction
@@ -91,7 +91,7 @@
 
 (defview unsigned-list [transactions]
   []
-  [react/scroll-view
+  [react/scroll-view {:style styles/flex}
    [list/flat-list {:data            transactions
                     :render-fn       render-transaction
                     :empty-component (empty-text (i18n/label :t/transactions-unsigned-empty))}]])
@@ -168,12 +168,13 @@
    [react/scroll-view
     [list/section-list {:sections filter-data}]]])
 
-(defn- main-section [view-id tabs ]
-    (let [prev-view-id (reagent/atom @view-id)]
-    [tabs/swipable-tabs {:style          history.styles/main-section
-                         :on-view-change #(do (reset! prev-view-id @view-id)
-                                              (reset! view-id %))}
-
+(defn- main-section [view-id tabs]
+  (let [prev-view-id (reagent/atom @view-id)]
+    [tabs/swipable-tabs {:style            history.styles/main-section
+                         :style-tabs       history.styles/tabs
+                         :style-tab-active history.styles/tab-active
+                         :on-view-change   #(do (reset! prev-view-id @view-id)
+                                                (reset! view-id %))}
       tabs prev-view-id view-id]))
 
 ;; TODO(yenda) must reflect selected wallet
@@ -183,6 +184,7 @@
   (let [tabs         (tab-list unsigned-transactions)
         default-view (get-in tabs [0 :view-id])
         view-id      (reagent/atom default-view)]
-    [react/view {:style history.styles/wallet-transactions-container}
+    [react/view {:style styles/flex}
+     [status-bar/status-bar {:type :modal}]
      [toolbar-view view-id unsigned-transactions]
      [main-section view-id tabs]]))
diff --git a/src/status_im/ui/screens/wallet/main/styles.cljs b/src/status_im/ui/screens/wallet/main/styles.cljs
index a88fadf0e9..5d4d7f7e28 100644
--- a/src/status_im/ui/screens/wallet/main/styles.cljs
+++ b/src/status_im/ui/screens/wallet/main/styles.cljs
@@ -3,8 +3,7 @@
             [status-im.utils.platform :as platform]))
 
 (def wallet-container
-  {:flex             1
-   :background-color styles/color-white})
+  {:flex 1})
 
 (def error-container
   {:align-self       :center
@@ -20,7 +19,7 @@
    :font-size     13})
 
 (def toolbar
-  {:background-color styles/color-blue5
+  {:background-color (if platform/ios? styles/color-blue4 styles/color-blue5)
    :elevation        0})
 
 (def toolbar-title-container
@@ -118,7 +117,8 @@
 ;;;;;;;;;;;;;;;;;;;;
 
 (def asset-section
-  {:background-color styles/color-white
+  {:flex             1
+   :background-color styles/color-white
    :padding-vertical 16})
 
 (def asset-section-title
@@ -136,7 +136,12 @@
    :color     styles/color-black})
 
 (def add-asset-icon
-  {:border-radius    32
+  {:flex             1
+   :justify-content  :center
+   :align-items      :center
+   :width            40
+   :height           40
+   :border-radius    32
    :background-color styles/color-blue4-transparent})
 
 (def add-asset-text
diff --git a/src/status_im/ui/screens/wallet/main/views.cljs b/src/status_im/ui/screens/wallet/main/views.cljs
index fdf0357007..d142542ea4 100644
--- a/src/status_im/ui/screens/wallet/main/views.cljs
+++ b/src/status_im/ui/screens/wallet/main/views.cljs
@@ -2,46 +2,43 @@
   (:require-macros [status-im.utils.views :refer [defview letsubs]])
   (:require [clojure.string :as string]
             [re-frame.core :as rf]
-            [status-im.components.common.common :as common]
             [status-im.components.button.view :as btn]
             [status-im.components.drawer.view :as drawer]
             [status-im.components.list.views :as list]
             [status-im.components.react :as react]
-            [status-im.components.styles :as st]
+            [status-im.components.styles :as styles]
             [status-im.components.icons.vector-icons :as vi]
             [status-im.components.toolbar-new.view :as toolbar]
             [status-im.components.toolbar-new.actions :as act]
             [status-im.i18n :as i18n]
             [status-im.react-native.resources :as resources]
             [status-im.utils.config :as config]
-            [status-im.utils.platform :as platform]
             [status-im.utils.utils :as utils]
-            [status-im.ui.screens.wallet.main.styles :as wallet-styles]
-            [status-im.ui.screens.wallet.views :as wallet.views]
-            [status-im.utils.money :as money]))
+            [status-im.ui.screens.wallet.main.styles :as wallet.styles]
+            [status-im.ui.screens.wallet.views :as wallet.views]))
 
 (defn- show-not-implemented! []
   (utils/show-popup "TODO" "Not implemented yet!"))
 
 (defn toolbar-title []
   [react/touchable-highlight {:on-press #(rf/dispatch [:navigate-to :wallet-list])
-                           :style wallet-styles/toolbar-title-container}
-   [react/view {:style wallet-styles/toolbar-title-inner-container}
-    [react/text {:style wallet-styles/toolbar-title-text
+                           :style wallet.styles/toolbar-title-container}
+   [react/view {:style wallet.styles/toolbar-title-inner-container}
+    [react/text {:style wallet.styles/toolbar-title-text
               :font  :toolbar-title}
      (i18n/label :t/main-wallet)]
     [vi/icon
      :icons/dropdown
-     {:container-style wallet-styles/toolbar-title-icon
+     {:container-style wallet.styles/toolbar-title-icon
       :color :white}]]])
 
 (def transaction-history-action
   {:icon      :icons/transaction-history
-   :icon-opts (merge {:color :white :style {:viewBox "-108 65.9 24 24"}} wallet-styles/toolbar-icon)
+   :icon-opts (merge {:color :white :style {:viewBox "-108 65.9 24 24"}} wallet.styles/toolbar-icon)
    :handler   #(rf/dispatch [:navigate-to-modal :wallet-transactions])})
 
 (defn toolbar-view []
-  [toolbar/toolbar2 {:style wallet-styles/toolbar}
+  [toolbar/toolbar2 {:style wallet.styles/toolbar}
    [toolbar/nav-button (act/hamburger-white drawer/open-drawer!)]
    [toolbar-title]
    [toolbar/actions
@@ -51,27 +48,27 @@
 (defn- change-display [change]
   (let [pos-change? (pos? change)]
     [react/view {:style (if pos-change?
-                          wallet-styles/today-variation-container-positive
-                          wallet-styles/today-variation-container-negative)}
+                          wallet.styles/today-variation-container-positive
+                          wallet.styles/today-variation-container-negative)}
      [react/text {:style (if pos-change?
-                           wallet-styles/today-variation-positive
-                           wallet-styles/today-variation-negative)}
+                           wallet.styles/today-variation-positive
+                           wallet.styles/today-variation-negative)}
       (if change
         (str (when pos-change? "+") change "%")
         "-%")]]))
 
 (defn main-section [usd-value change error-message]
-  [react/view {:style wallet-styles/main-section}
-   (when error-message [wallet.views/error-message-view wallet-styles/error-container wallet-styles/error-message])
-   [react/view {:style wallet-styles/total-balance-container}
-    [react/view {:style wallet-styles/total-balance}
-     [react/text {:style wallet-styles/total-balance-value} usd-value]
-     [react/text {:style wallet-styles/total-balance-currency} "USD"]]
-    [react/view {:style wallet-styles/value-variation}
-     [react/text {:style wallet-styles/value-variation-title}
+  [react/view {:style wallet.styles/main-section}
+   (when error-message [wallet.views/error-message-view wallet.styles/error-container wallet.styles/error-message])
+   [react/view {:style wallet.styles/total-balance-container}
+    [react/view {:style wallet.styles/total-balance}
+     [react/text {:style wallet.styles/total-balance-value} usd-value]
+     [react/text {:style wallet.styles/total-balance-currency} "USD"]]
+    [react/view {:style wallet.styles/value-variation}
+     [react/text {:style wallet.styles/value-variation-title}
       (i18n/label :t/wallet-total-value)]
      [change-display change]]
-    [btn/buttons wallet-styles/buttons
+    [btn/buttons wallet.styles/buttons
      [{:text     (i18n/label :t/wallet-send)
        :on-press show-not-implemented! ;; #(rf/dispatch [:navigate-to :wallet-send-transaction])
        :disabled? (not config/wallet-wip-enabled?)}
@@ -83,7 +80,7 @@
 
 (defn- token->image [id]
   (case id
-    "eth" {:source (:ethereum resources/assets) :style (wallet-styles/asset-border st/color-gray-transparent-light)}))
+    "eth" {:source (:ethereum resources/assets) :style (wallet.styles/asset-border styles/color-gray-transparent-light)}))
 
 (defn render-assets-fn [{:keys [id currency amount]}]
   ;; TODO(jeluard) Navigate to asset details screen
@@ -92,19 +89,19 @@
    [react/view
     [list/item
      [list/item-image {:uri :launch_logo}]
-     [react/view {:style wallet-styles/asset-item-value-container}
-      [react/text {:style wallet-styles/asset-item-value} (str amount)]
-      [react/text {:style      wallet-styles/asset-item-currency
-                :uppercase? true}
+     [react/view {:style wallet.styles/asset-item-value-container}
+      [react/text {:style wallet.styles/asset-item-value} (str amount)]
+      [react/text {:style      wallet.styles/asset-item-currency
+                   :uppercase? true}
        id]]
-     [list/item-icon {:style :icons/forward}]]]]
+     [list/item-icon {:icon :icons/forward}]]]]
   [react/view
    [list/item
     (let [{:keys [source style]} (token->image id)]
       [list/item-image source style])
-    [react/view {:style wallet-styles/asset-item-value-container}
-     [react/text {:style wallet-styles/asset-item-value} (str amount)]
-     [react/text {:style      wallet-styles/asset-item-currency
+    [react/view {:style wallet.styles/asset-item-value-container}
+     [react/text {:style wallet.styles/asset-item-value} (str amount)]
+     [react/text {:style      wallet.styles/asset-item-currency
                :uppercase? true}
       id]]]])
 
@@ -112,15 +109,15 @@
   [list/touchable-item show-not-implemented!
    [react/view
     [list/item
-     [list/item-icon {:icon :icons/add :style wallet-styles/add-asset-icon :icon-opts {:color :blue}}]
-     [react/view {:style wallet-styles/asset-item-value-container}
-      [react/text {:style wallet-styles/add-asset-text}
+     [list/item-icon {:icon :icons/add :style wallet.styles/add-asset-icon :icon-opts {:color :blue}}]
+     [react/view {:style wallet.styles/asset-item-value-container}
+      [react/text {:style wallet.styles/add-asset-text}
        (i18n/label :t/wallet-add-asset)]]]]])
 
 (defn asset-section [eth prices-loading? balance-loading?]
   (let [assets [{:id "eth" :currency :eth :amount eth}]]
-    [react/view {:style wallet-styles/asset-section}
-     [react/text {:style wallet-styles/asset-section-title} (i18n/label :t/wallet-assets)]
+    [react/view {:style wallet.styles/asset-section}
+     [react/text {:style wallet.styles/asset-section-title} (i18n/label :t/wallet-assets)]
      [list/section-list
       {:sections                 [{:key        :assets
                                    :data       assets
@@ -139,8 +136,8 @@
             prices-loading?  [:prices-loading?]
             balance-loading? [:wallet/balance-loading?]
             error-message    [:wallet/error-message?]]
-    [react/view {:style wallet-styles/wallet-container}
+    [react/view {:style wallet.styles/wallet-container}
      [toolbar-view]
-     [react/scroll-view
+     [react/view {:style styles/flex}
       [main-section portfolio-value portfolio-change error-message]
       [asset-section eth-balance prices-loading? balance-loading?]]]))
diff --git a/src/status_im/ui/screens/wallet/subs.cljs b/src/status_im/ui/screens/wallet/subs.cljs
index 982dda8605..5f39a1d294 100644
--- a/src/status_im/ui/screens/wallet/subs.cljs
+++ b/src/status_im/ui/screens/wallet/subs.cljs
@@ -83,15 +83,17 @@
   :<- [:wallet/transactions]
   (fn [transactions]
     (let [{:keys [postponed pending inbound outbound]} (group-by :type transactions)
-          transaction-history-list                     [{:title "Postponed"
-                                                         :key :postponed
-                                                         :data (or postponed [])}
-                                                        {:title "Pending"
-                                                         :key :pending
-                                                         :data (or pending [])}]
+          transaction-history-list                     [(if postponed
+                                                          {:title "Postponed"
+                                                           :key   :postponed
+                                                           :data  postponed})
+                                                        (if pending
+                                                          {:title "Pending"
+                                                           :key   :pending
+                                                           :data  pending})]
           completed-transactions                       (->> (into inbound outbound)
                                                             (group-by #(datetime/date->mini-str-date (:timestamp %)))
                                                             (map (fn [[k v]] {:title k
-                                                                              :key (mini-str-date->keyword k)
-                                                                              :data v})))]
-      (into transaction-history-list (or completed-transactions [])))))
+                                                                              :key   (mini-str-date->keyword k)
+                                                                              :data  v})))]
+      (into (filterv (complement nil?) transaction-history-list) (or completed-transactions [])))))