From 7a664a7f720f43679dad6f8857790af84b8b7da6 Mon Sep 17 00:00:00 2001
From: sdtsui <szehungdanieltsui@gmail.com>
Date: Thu, 10 Aug 2017 22:16:42 -0700
Subject: [PATCH] Improve text positioning on mobile view

---
 ui/app/components/tx-list.js                  | 24 ++++---
 ui/app/css/itcss/components/hero-balance.scss |  4 --
 .../itcss/components/transaction-list.scss    | 72 +++++++++++++------
 3 files changed, 63 insertions(+), 37 deletions(-)

diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index e9f0c1cef..39cf7de79 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -134,19 +134,21 @@ TxList.prototype.renderTransactionListItem = function () {
         })
       ]),
 
-      h('div.tx-list-account-wrapper', {
-        style: {}
-      }, [
-        h('span.tx-list-account', {}, [
-          '0x82df11be...7684', //address
+      h('div.tx-list-account-and-status-wrapper', {}, [
+        h('div.tx-list-account-wrapper', {
+          style: {}
+        }, [
+          h('span.tx-list-account', {}, [
+            '0x82df11be...7684', //address
+          ]),
         ]),
-      ]),
 
-      h('div.tx-list-status-wrapper', {
-        style: {}
-      }, [
-        h('span.tx-list-status', {}, [
-          transactionStatus,
+        h('div.tx-list-status-wrapper', {
+          style: {}
+        }, [
+          h('span.tx-list-status', {}, [
+            transactionStatus,
+          ]),
         ]),
       ]),
 
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index f657e4f2c..2dd9bf973 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -1,7 +1,3 @@
-$break-small: 575px;
-$break-medium: 780px;
-$break-large: 576px;
-
 .hero-balance {
 
   @media screen and (max-width: $break-small) {
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index 700214e30..41543c347 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -18,14 +18,26 @@
   flex: 0 0 70px;
   align-items: stretch;
   justify-content: flex-start;
-  margin: 0em 1.3em 0em 1.3em;
+  @media screen and (max-width: $break-small) {
+    margin: 0em 1.3em 0.95em 1.3em;
+  }
+
+  @media screen and (min-width: $break-large) {
+    margin: 0em 1.3em 0em 1.3em;
+  }
 }
 
 .tx-list-date-wrapper {
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
-  margin-top: 6px;
+  @media screen and (max-width: $break-small) {
+    margin-top: 6px;
+    margin-bottom: 20px;
+  }
+  @media screen and (min-width: $break-large) {
+    margin-top: 6px;
+  }
 }
 
 .tx-list-content-wrapper {
@@ -44,34 +56,50 @@
   margin-left: 3px;
 }
 
-.tx-list-account-wrapper {
-  flex: 3 3 auto;
-  align-self: center;
-}
+.tx-list-account-and-status-wrapper {
+  display: flex;
+  flex: 8 8 auto;
 
-.tx-list-account {
-  font-size: 16px;
-}
+  @media screen and (max-width: $break-small) {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    align-self: center;
+  }
 
-.tx-list-status-wrapper {
-  align-self: center;
-  flex: 5 5 auto;
-}
+  @media screen and (min-width: $break-large) {
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
 
-.tx-list-status {
-  color: $dusty-gray;
-  font-size: 16px;
+    .tx-list-account-wrapper {
+      flex: 2 2 auto;
+    }
+
+    .tx-list-status-wrapper {
+      flex: 6 6 auto;
+    }
+  }
+
+  .tx-list-account {
+    font-size: 16px;
+  }
+
+  .tx-list-status {
+    color: $dusty-gray;
+    font-size: 16px;
+  }
 }
 
 .tx-list-details-wrapper {
   align-self: center;
   flex: 2 2 auto;
-}
 
-.tx-list-value {
-  font-size: 16px;
-}
+  .tx-list-value {
+    font-size: 16px;
+  }
 
-.tx-list-fiat-value {
-  font-size: 12px;
+  .tx-list-fiat-value {
+    font-size: 12px;
+  }
 }
\ No newline at end of file