From 0458643f104d7b328e24c4403e4e3d91b4d5de92 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Thu, 19 Oct 2017 14:08:52 -0700
Subject: [PATCH] various styling fix on mobile

---
 ui/app/components/send/account-list-item.js     |  8 ++++----
 ui/app/css/itcss/components/account-menu.scss   |  2 +-
 ui/app/css/itcss/components/hero-balance.scss   | 16 ++++++++++------
 ui/app/css/itcss/components/menu.scss           |  1 +
 ui/app/css/itcss/components/newui-sections.scss | 15 +++++++++++++--
 ui/app/css/itcss/components/send.scss           |  4 +++-
 .../css/itcss/components/transaction-list.scss  | 17 +++++++++++++++--
 7 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/ui/app/components/send/account-list-item.js b/ui/app/components/send/account-list-item.js
index 0938f4cad..ba7eec940 100644
--- a/ui/app/components/send/account-list-item.js
+++ b/ui/app/components/send/account-list-item.js
@@ -11,7 +11,7 @@ function AccountListItem () {
   Component.call(this)
 }
 
-function mapStateToProps(state) {
+function mapStateToProps (state) {
   return {
     conversionRate: conversionRateSelector(state),
     currentCurrency: getCurrentCurrency(state),
@@ -22,14 +22,14 @@ module.exports = connect(mapStateToProps)(AccountListItem)
 
 AccountListItem.prototype.render = function () {
   const {
-    account, 
-    handleClick, 
+    account,
+    handleClick,
     icon = null,
     conversionRate,
     currentCurrency,
   } = this.props
 
-  const { name, address, balance } = account
+  const { name, address, balance } = account || {}
 
   return h('div.account-list-item', {
     onClick: () => handleClick({ name, address, balance }),
diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss
index 857903ce1..090710f7b 100644
--- a/ui/app/css/itcss/components/account-menu.scss
+++ b/ui/app/css/itcss/components/account-menu.scss
@@ -5,7 +5,7 @@
   width: 310px;
 
   @media screen and (max-width: 575px) {
-    right: calc((100vw - 100%) / 2);
+    right: calc(((100vw - 100%) / 2) + 8px);
   }
 
   @media screen and (min-width: 576px) {
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index 8f6731358..bdbdd2645 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -6,8 +6,9 @@
     justify-content: flex-start;
     align-items: center;
     margin: .3em .9em 0;
-    height: 80vh;
-    max-height: 225px;
+    // height: 80vh;
+    // max-height: 225px;
+    flex: 0 0 auto;
   }
 
   @media screen and (min-width: $break-large) {
@@ -26,6 +27,7 @@
 
     @media screen and (max-width: $break-small) {
       flex-direction: column;
+      flex: 0 0 auto;
     }
 
     @media screen and (min-width: $break-large) {
@@ -78,7 +80,9 @@
 
     @media screen and (max-width: $break-small) {
       width: 100%;
-      height: 100px; // needed a round number to set the heights of the buttons inside
+      // height: 100px; // needed a round number to set the heights of the buttons inside
+      flex: 0 0 auto;
+      padding: 16px 0;
     }
 
     @media screen and (min-width: $break-large) {
@@ -93,9 +97,9 @@
       font-size: 12px;
 
       @media screen and (max-width: $break-small) {
-        width: 23%;
-        height: 55%;
-        border-color: $black;
+        border-color: $curious-blue;
+        color: $curious-blue;
+        height: 36px;
       }
 
       @media screen and (min-width: $break-large) {
diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss
index c98ee70d9..17e24de98 100644
--- a/ui/app/css/itcss/components/menu.scss
+++ b/ui/app/css/itcss/components/menu.scss
@@ -12,6 +12,7 @@
     align-items: center;
     position: relative;
     z-index: 200;
+    font-weight: 200;
 
     @media screen and (max-width: 575px) {
       padding: 14px;
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index fc1dba87c..1ee8283ef 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -25,6 +25,17 @@ $wallet-view-bg: $wild-sand;
 .tx-view {
   flex: 63.5 0 66.5%;
   background: $tx-view-bg;
+
+  // No title on mobile
+  @media screen and (max-width: 575px) {
+    .identicon-wrapper {
+      display: none;
+    }
+
+    .account-name {
+      display: none;
+    }
+  }
 }
 
 // wallet view and sidebar
@@ -70,7 +81,7 @@ $wallet-view-bg: $wild-sand;
   background: rgb(250, 250, 250);
   z-index: $sidebar-z-index;
   position: fixed;
-  // top: 41px;
+  top: 57px;
   left: 0;
   right: 0;
   bottom: 0;
@@ -80,7 +91,7 @@ $wallet-view-bg: $wild-sand;
   overflow-y: auto;
   box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px;
   width: 85%;
-  height: 100%;
+  height: calc(100% - 57px);
 }
 
 .sidebar-overlay {
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 6a5b2b869..9a076551e 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -525,8 +525,9 @@
 
     @media screen and (max-width: $break-small) {
       margin-top: 0px;
-      height: 407px;
+      height: 0;
       overflow-y: auto;
+      flex: 1 1 auto;
     }
   }
 
@@ -647,6 +648,7 @@
     align-items: center;
     border-top: 1px solid $alto;
     background: $white;
+    padding: 0 12px;
   }
 
   &__next-btn,
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index 76fac09e2..a5d508f11 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -19,12 +19,15 @@
     // margin-top: 0.2em;
     // margin-bottom: 0.6em;
     justify-content: center;
+    flex: 0 0 auto;
   }
 
   .tx-list-header {
     align-self: center;
     font-size: 12px;
     color: $dusty-gray;
+    font-family: Roboto;
+    text-transform: uppercase;
   }
 }
 
@@ -66,7 +69,7 @@
   flex-flow: column nowrap;
 
   @media screen and (max-width: $break-small) {
-    padding: 0 1.3em;
+    padding: 0 1.3em .8em;
   }
 
   @media screen and (min-width: $break-large) {
@@ -112,7 +115,7 @@
     font-size: 12px;
 
     .tx-list-status {
-      font-size: 12px !important;
+      font-size: 14px !important;
     }
 
     .tx-list-account {
@@ -121,10 +124,12 @@
 
     .tx-list-value {
       font-size: 14px;
+      line-height: 18px;
     }
 
     .tx-list-fiat-value {
       font-size: 12px;
+      line-height: 16px;
     }
   }
 }
@@ -152,6 +157,14 @@
     justify-content: flex-start;
     align-items: flex-start;
     align-self: center;
+
+    .tx-list-account-wrapper {
+      height: 18px;
+
+      .tx-list-account {
+        line-height: 14px;
+      }
+    }
   }
 
   @media screen and (min-width: $break-large) {