Merge pull request #411 from status-im/bug/#407

UI fixes for transaction screen (#407)

src/status_im/transactions/screen.cljs

@@ -11,6 +11,7 @@
             [status-im.components.styles :refer [icon-ok
                                                  icon-close]]
             [status-im.components.carousel.carousel :refer [carousel]]
+            [status-im.components.status-bar :refer [status-bar]]
             [status-im.components.toolbar.view :refer [toolbar]]
             [status-im.components.toolbar.styles :refer [toolbar-title-container]]
             [status-im.components.text-field.view :refer [text-field]]
@@ -25,6 +26,7 @@
    {:keys [password]} [:get :confirm-transactions]
    wrong-password? [:wrong-password?]]
   [view st/transactions-screen
+   [status-bar {:type :transparent}]
    [toolbar
     {:style          st/transactions-toolbar
      :nav-action     {:image   {:source {:uri :icon_close_white}
@@ -41,19 +43,19 @@
    [view st/carousel-container
     [carousel {:pageStyle st/carousel-page-style
                :gap       16
-               :count     (count transactions)
-               :sneak     20}
+               :sneak     20
+               :count     (count transactions)}
      (when transactions
        (for [transaction transactions]
          [transaction-page transaction]))]]
    [view st/form-container
     [text-field
-     {:input-style       st/password-style
-      :secure-text-entry true
+     {:editable          true
       :error             (when wrong-password? (label :t/wrong-password))
       :error-color       :#ffffff80 #_:#7099e6
-      :line-color        :white
-      :label-color       :#ffffff80
-      :value             password
       :label             (label :t/password)
+      :secure-text-entry true
+      :label-color       :#ffffff80
+      :line-color        :white
+      :input-style       st/password-style
       :on-change-text    #(dispatch [:set-in [:confirm-transactions :password] %])}]]])

src/status_im/transactions/styles.cljs

@@ -20,7 +20,8 @@
    :paddingLeft 16})
 
 (def password-style
-  {:color :white})
+  {:color     :white
+   :font-size 12})
 
 ;transaction-page
 
@@ -34,9 +35,10 @@
    :justifyContent :center})
 
 (def title-bar-text
-  {:color "#838c93"
-   :fontSize 13
-   :marginLeft 12})
+  {:color        "#838c93"
+   :font-size    13
+   :margin-left  12
+   :margin-right 30})
 
 (def icon-close-container
   {:position :absolute
@@ -63,9 +65,7 @@
 
 (def transaction-info-row
   {:flex 1
-   :flexDirection :row
-   :height 20
-   })
+   :flexDirection :row})
 
 (def transaction-info-column-title
   {:flex 0.4

src/status_im/transactions/views/transaction_page.cljs

@@ -11,11 +11,15 @@
             [status-im.components.styles :refer [icon-ok
                                                  icon-close]]
             [status-im.transactions.styles :as st]
-            [status-im.i18n :refer [label label-pluralize]]))
+            [status-im.i18n :refer [label label-pluralize]]
+            [taoensso.timbre :as log]))
 
 (defn title-bar [title id]
   [view st/title-bar
-   [text {:style st/title-bar-text} title]
+   [text {:style           st/title-bar-text
+          :font            :medium
+          :number-of-lines 1}
+    title]
    [touchable-highlight {:style    st/icon-close-container
                          :on-press #(dispatch [:deny-transaction id])}
     [view [image {:source {:uri :icon_close_gray}
@@ -32,10 +36,10 @@
 
 (defview transaction-page [{:keys [id from to value] :as transaction}]
   [{:keys [name] :as contact} [:contact-by-address to]]
-  (let [eth-value (.fromWei js/Web3.prototype value "ether")
-        title (str eth-value " ETH to " name)
+  (let [eth-value         (.fromWei js/Web3.prototype value "ether")
+        title             (str eth-value " ETH to " (or name to))
         transactions-info [[(label :t/status) (label :t/pending-confirmation)]
-                           [(label :t/recipient) name]
+                           [(label :t/recipient) (or name to)]
                            [(label :t/value) (str eth-value " ETH")]]]
     [view {:style st/transaction-page
            :key   id}