From ba98b6a3b5e40fb028b18db3f871c582e14ca13e Mon Sep 17 00:00:00 2001
From: Julien Eluard <julien.eluard@gmail.com>
Date: Fri, 13 Oct 2017 11:14:18 +0200
Subject: [PATCH] [BUG #2087] [BUG #2088] Fixed style issues when amount is too
 long

---
 src/status_im/components/list/styles.cljs        |  6 +++++-
 src/status_im/components/list/views.cljs         |  8 +++++---
 .../ui/screens/wallet/components/styles.cljs     |  8 +++++++-
 .../ui/screens/wallet/components/views.cljs      | 16 ++++++++++------
 src/status_im/ui/screens/wallet/main/styles.cljs |  3 ++-
 src/status_im/ui/screens/wallet/main/views.cljs  | 10 +++++++---
 6 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/status_im/components/list/styles.cljs b/src/status_im/components/list/styles.cljs
index 64eb412451..943e03f8c8 100644
--- a/src/status_im/components/list/styles.cljs
+++ b/src/status_im/components/list/styles.cljs
@@ -38,8 +38,12 @@
 (def left-item-wrapper
   {:margin 14})
 
+(def content-item-wrapper
+  {:flex         1
+   :margin-right 16})
+
 (def right-item-wrapper
-  {:margin 16})
+  {:margin-right 16})
 
 (def base-separator
   {:height           1
diff --git a/src/status_im/components/list/views.cljs b/src/status_im/components/list/views.cljs
index 69ad2319c7..b440c8491e 100644
--- a/src/status_im/components/list/views.cljs
+++ b/src/status_im/components/list/views.cljs
@@ -32,9 +32,11 @@
    [rn/view {:style lst/item}
     [rn/view {:style lst/left-item-wrapper}
      left-action]
-    content
-    [rn/view {:style lst/right-item-wrapper}
-     right-action]]))
+    [rn/view {:style lst/content-item-wrapper}
+     content]
+    (when right-action
+      [rn/view {:style lst/right-item-wrapper}
+       right-action])]))
 
 (defn touchable-item [handler item]
   [rn/touchable-highlight {:on-press handler}
diff --git a/src/status_im/ui/screens/wallet/components/styles.cljs b/src/status_im/ui/screens/wallet/components/styles.cljs
index 0eee2e796d..86a4f3ba15 100644
--- a/src/status_im/ui/screens/wallet/components/styles.cljs
+++ b/src/status_im/ui/screens/wallet/components/styles.cljs
@@ -105,13 +105,19 @@
    :font-size      15
    :letter-spacing -0.2})
 
+(def wallet-value-container
+  {:flex           1
+   :flex-direction :row})
+
 (def wallet-value
   {:padding-left   6
-   :flex-shrink    1
    :color          styles/color-white-transparent-5
    :font-size      15
    :letter-spacing -0.2})
 
+(def wallet-value-amount
+  {:flex -1})
+
 (def separator
   {:height            1
    :margin-horizontal 15
diff --git a/src/status_im/ui/screens/wallet/components/views.cljs b/src/status_im/ui/screens/wallet/components/views.cljs
index 50d77396b2..0aedd31609 100644
--- a/src/status_im/ui/screens/wallet/components/views.cljs
+++ b/src/status_im/ui/screens/wallet/components/views.cljs
@@ -107,12 +107,16 @@
      [react/view (merge styles/wallet-container
                         style)
       [react/text {:style styles/wallet-name} (i18n/label :t/main-wallet)]
-      [react/text {:style           styles/wallet-value
-                   :number-of-lines 1
-                   :ellipsizeMode   :middle}
-       (if balance
-         (money/wei->str :eth balance)
-         "...")]]]))
+      (if balance
+        [react/view {:style styles/wallet-value-container}
+         [react/text {:style           (merge styles/wallet-value styles/wallet-value-amount)
+                      :number-of-lines 1
+                      :ellipsize-mode  :tail}
+          (str (money/wei->ether balance))]
+         [react/text {:style styles/wallet-value}
+          (i18n/label :t/eth)]]
+        [react/text {:style styles/wallet-value}
+         "..."])]]))
 
 (defn network-label
   ([n] (network-label [{} n]))
diff --git a/src/status_im/ui/screens/wallet/main/styles.cljs b/src/status_im/ui/screens/wallet/main/styles.cljs
index e0c6f67aae..ab573a5eb7 100644
--- a/src/status_im/ui/screens/wallet/main/styles.cljs
+++ b/src/status_im/ui/screens/wallet/main/styles.cljs
@@ -129,7 +129,8 @@
    :align-items    :center})
 
 (def asset-item-value
-  {:font-size 16
+  {:flex      -1
+   :font-size 16
    :color     styles/color-black})
 
 (defstyle add-asset-icon
diff --git a/src/status_im/ui/screens/wallet/main/views.cljs b/src/status_im/ui/screens/wallet/main/views.cljs
index 3bfbb35a02..448b754699 100644
--- a/src/status_im/ui/screens/wallet/main/views.cljs
+++ b/src/status_im/ui/screens/wallet/main/views.cljs
@@ -116,9 +116,13 @@
       (let [{:keys [source style]} (token->image id)]
         [list/item-image source style])
       [react/view {:style styles/asset-item-value-container}
-       [react/text {:style styles/asset-item-value} (str (money/wei->ether amount))]
-       [react/text {:style      styles/asset-item-currency
-                    :uppercase? true}
+       [react/text {:style           styles/asset-item-value
+                    :number-of-lines 1
+                    :ellipsize-mode  :tail}
+        (str (money/wei->ether amount))]
+       [react/text {:style           styles/asset-item-currency
+                    :uppercase?      true
+                    :number-of-lines 1}
         id]]]]
     [add-asset]))