Various styling fixes for wallet

[bugfix] transaction details background should be white

[bugfix] button styling in unsigned transactions

[bugfix] make whole item touchable in transactions history and unsigned

[bugfix] correction of icons styling in transactions history

[bugfix] error message should not touch the toolbar in wallet

[bugfix] add asset icon and text are different on ios and android

PR review fixes

src/status_im/components/button/view.cljs

@@ -3,8 +3,13 @@
             [status-im.components.react :as react]
             [status-im.utils.platform :as platform]))
 
-(defn- button [{:keys [on-press style text text-style disabled?]}]
+(defn- button [{:keys [on-press style text text-style disabled? fit-to-text?]}]
-  [react/touchable-highlight (merge {:style button.styles/button-container :underlay-color button.styles/border-color-high} (when (and on-press (not disabled?)) {:on-press on-press}))
+  [react/touchable-highlight (merge {:underlay-color button.styles/border-color-high}
+                                    (when-not fit-to-text?
+                                      {:style button.styles/button-container})
+                                    (when (and on-press
+                                               (not disabled?))
+                                      {:on-press on-press}))
    [react/view {:style (merge (button.styles/button disabled?)
                               style)}
     [react/text {:style   (merge (button.styles/button-text disabled?)
@@ -13,11 +18,17 @@
                  :uppercase? platform/android?}
      text]]])
 
-(defn primary-button [m]
+(defn primary-button [{:keys [style text-style] :as m}]
-  (button (merge {:style button.styles/primary-button :text-style button.styles/primary-button-text} m)))
+  (button (assoc m
+                 :fit-to-text? true
+                 :style        (merge button.styles/primary-button style)
+                 :text-style   (merge button.styles/primary-button-text text-style))))
 
-(defn secondary-button [m]
+(defn secondary-button [{:keys [style text-style] :as m}]
-  (button (merge {:style button.styles/secondary-button :text-style button.styles/secondary-button-text} m)))
+  (button (assoc m
+                 :fit-to-text? true
+                 :style        (merge button.styles/secondary-button style)
+                 :text-style   (merge button.styles/secondary-button-text text-style))))
 
 (defn- position [i v]
   (cond
@@ -31,5 +42,7 @@
    [react/view {:style (merge button.styles/buttons-container style)}
     (doall
      (map-indexed
-        (fn [i m] ^{:key i} [button (merge m {:style (button.styles/button-bar (position i v)) :text-style button-text-style})])
+      (fn [i m] ^{:key i} [button (merge m
+                                         {:style (button.styles/button-bar (position i v))
+                                          :text-style button-text-style})])
       v))]))

src/status_im/ui/screens/wallet/main/styles.cljs

@@ -3,19 +3,25 @@
   (:require [status-im.components.styles :as styles]
             [status-im.utils.platform :as platform]))
 
-(def error-container
+;; Errors
+
+(defstyle error-container
   {:align-self       :center
    :justify-content  :center
-   :border-radius    20
+   :ios              {:border-radius 20
-   :flex-direction   :row
+                      :margin-top    6}
+   :android          {:border-radius    4
+                      :margin-top       18}
    :background-color styles/color-blue5})
 
 (def error-message
   {:color         styles/color-white
-   :padding-top   3
    :padding-right 10
    :font-size     13})
 
+
+;; Toolbar
+
 (def toolbar-title-container
   {:flex-direction :row
    :padding-left   24})
@@ -32,9 +38,8 @@
 (def toolbar-title-icon
   (merge toolbar-icon {:opacity 0.4}))
 
-;;;;;;;;;;;;;;;;;;
+
-;; Main section ;;
+;; Main section
-;;;;;;;;;;;;;;;;;;
 
 (def main-section
   {:background-color styles/color-blue4})
@@ -104,9 +109,7 @@
    :padding-horizontal nil
    :android            {:letter-spacing 0.46}})
 
-;;;;;;;;;;;;;;;;;;;;
+;; Assets section
-;; Assets section ;;
-;;;;;;;;;;;;;;;;;;;;
 
 (def asset-section
   {:flex             1
@@ -127,18 +130,19 @@
   {:font-size 16
    :color     styles/color-black})
 
-(def add-asset-icon
+(defstyle add-asset-icon
   {:flex             1
    :justify-content  :center
    :align-items      :center
    :width            40
    :height           40
    :border-radius    32
-   :background-color styles/color-blue4-transparent})
+   :ios              {:background-color styles/color-blue4-transparent}})
 
-(def add-asset-text
+(defstyle add-asset-text
   {:font-size 16
-   :color     styles/color-blue4})
+   :ios       {:color styles/color-blue4}
+   :android   {:color styles/color-black}})
 
 (def asset-item-currency
   {:font-size   16

src/status_im/ui/screens/wallet/main/views.cljs

@@ -61,7 +61,8 @@
 
 (defn main-section [usd-value change error-message]
   [react/view {:style styles/main-section}
-   (when error-message [wallet.views/error-message-view styles/error-container styles/error-message])
+   (when error-message
+     [wallet.views/error-message-view styles/error-container styles/error-message])
    [react/view {:style styles/total-balance-container}
     [react/view {:style styles/total-balance}
      [react/text {:style styles/total-balance-value} usd-value]

src/status_im/ui/screens/wallet/styles.cljs

@@ -1,7 +1,28 @@
 (ns status-im.ui.screens.wallet.styles
   (:require-macros [status-im.utils.styles :refer [defstyle]])
-  (:require [status-im.components.styles :as st]
+  (:require [status-im.components.styles :as styles]))
-            [status-im.components.styles :as styles]))
+
+;; errors
+
+(defstyle error-container
+  {:flex-direction :row
+   :align-items    :center
+   :ios            {:padding-top    8
+                    :padding-bottom 8}
+   :android        {:padding-top    10
+                    :padding-bottom 10}})
+
+(def error-exclamation
+  {:background-color styles/color-red-2
+   :border-radius    100
+   :width            16
+   :height           16
+   :margin-left      12
+   :margin-right     6
+   :margin-top       2})
+
+
+;; wallet
 
 (def wallet-container
   {:flex 1})
@@ -11,19 +32,6 @@
    :android {:background-color styles/color-blue5
              :elevation        0}})
 
-(def wallet-exclamation-container
-  {:background-color st/color-red-2
-   :justify-content  :center
-   :margin-top       5
-   :margin-left      10
-   :margin-right     7
-   :margin-bottom    5
-   :border-radius    100})
-
-(def wallet-error-exclamation
-  {:width  16
-   :height 16})
-
 (def buttons-container
   {:margin-vertical    15
    :padding-horizontal 12

src/status_im/ui/screens/wallet/transactions/styles.cljs

@@ -83,8 +83,7 @@
   {:background-color :transparent})
 
 (defn transaction-icon-background [color]
-  {:flex             1
+  {:justify-content  :center
-   :justify-content  :center
    :align-items      :center
    :width            40
    :height           40

src/status_im/ui/screens/wallet/transactions/views.cljs

@@ -72,7 +72,7 @@
 (defn action-buttons [m]
   [react/view {:style transactions.styles/action-buttons}
    [button/primary-button {:text (i18n/label :t/transactions-sign)
-
+                           :style {:margin-right 12}
                            :on-press #(re-frame/dispatch [:navigate-to-modal :wallet-transactions-sign-all])}]
    [button/secondary-button {:text (i18n/label :t/delete) :on-press #(on-delete-transaction m)}]])
 
@@ -93,6 +93,8 @@
     (throw (str "Unknown transaction type: " k))))
 
 (defn render-transaction [{:keys [hash to from type value symbol] :as m}]
+  [list/touchable-item #(re-frame/dispatch [:show-transaction-details hash])
+   [react/view
     [list/item
      [list/item-icon (transaction-type->icon (keyword type))]
      [list/item-content
@@ -102,9 +104,8 @@
         (str (i18n/label :t/to) " " to))
       (when (unsigned? type)
         [action-buttons m])]
-   [react/touchable-highlight {:on-press #(re-frame/dispatch [:show-transaction-details hash])}
-    [react/view
      [list/item-icon {:icon :icons/forward
+                      :style {:margin-top 10}
                       :icon-opts transactions.styles/forward}]]]])
 
 ;; TODO(yenda) hook with re-frame
@@ -262,7 +263,7 @@
       toolbar/default-nav-back
       [toolbar/content-title (i18n/label :t/transaction-details)]
       [toolbar/actions (details-action hash url)]]
-     [react/scroll-view
+     [react/scroll-view {:style transactions.styles/main-section}
       [transaction-details-header transaction-details]
       [transaction-details-confirmations confirmations confirmations-progress]
       [react/view {:style transactions.styles/transaction-details-separator}]

src/status_im/ui/screens/wallet/views.cljs

@@ -6,7 +6,7 @@
 
 (defn error-message-view [error-container-style error-message-style]
   [react/view {:style error-container-style}
-   [react/view {:style styles/wallet-exclamation-container}
+   [react/view {:style styles/error-container}
     [vector-icons/icon :icons/exclamation_mark {:color           :white
-                                                :container-style styles/wallet-error-exclamation}]]
+                                                :container-style styles/error-exclamation}]
-   [react/text {:style error-message-style} (i18n/label :t/wallet-error)]])
+    [react/text {:style error-message-style} (i18n/label :t/wallet-error)]]])