Fixed various wallet UI inconsistencies

src/status_im/components/list/styles.cljs

@@ -1,42 +1,49 @@
 (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
          {:padding-vertical 22}))
 
 (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})
+   :color           styles/color-gray4
+   :margin-left     16
+   :android         {:margin-top    11
+                     :margin-bottom 3}
+   :ios             {:margin-top    10
+                     :margin-bottom 2}})

src/status_im/components/list/views.cljs

@@ -30,24 +30,25 @@
   ([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}
    item])
 
 (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}]]))
 

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

src/status_im/components/tabs/styles.cljs

@@ -28,27 +28,29 @@
    :alignItems      :center})
 
 (def tab
-  {:flex           1
-   :height         tab-height
-   :justifyContent :center
-   :alignItems     :center})
-
-(defnstyle tab-title [active?]
-  {:ios        {:font-size 11}
-   :android    {:font-size 12}
+  {: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? 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})

src/status_im/components/tabs/views.cljs

@@ -9,39 +9,40 @@
             [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}
       (when-let [icon (if active? icon-active icon-inactive)]
         [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)

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

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?

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

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

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