Add responsive UI to send ether modal

6 files changed, 39 insertions, 13 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index 1ca59e406..01a67250a 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -99,7 +99,7 @@ App.prototype.render = function () {
 
     h('.flex-column.full-height', {
       style: {
-        overflowX: 'hidden',
+        overflow: 'hidden',
         position: 'relative',
         alignItems: 'center',
       },
diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss
index 160476d58..ed569cb08 100644
--- a/ui/app/css/itcss/components/header.scss
+++ b/ui/app/css/itcss/components/header.scss
@@ -2,20 +2,22 @@
   align-items: center;
   visibility: visible;
   background: $gallery;
-  height: 14.4vh;
-  max-height: 97px;
   position: relative;
   z-index: $header-z-index;
   display: flex;
   flex-flow: column nowrap;
 
   @media screen and (max-width: 575px) {
-    position: fixed;
-    height: 34px;
+    padding: 0 12px;
     width: 100%;
     box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .08);
     z-index: $mobile-header-z-index;
   }
+
+  @media screen and (min-width: 576px) {
+    height: 14.4vh;
+    max-height: 97px;
+  }
 }
 
 .app-header-contents {
@@ -25,13 +27,16 @@
   width: 100%;
   height: 6.9vh;
 
+  @media screen and (max-width: 575px) {
+    height: 100%;
+  }
+
   @media screen and (min-width: 576px) {
     width: 85vw;
   }
 
   @media screen and (min-width: 769px) {
     width: 80vw;
-    height: 6.9vh;
   }
 
   @media screen and (min-width: 1281px) {
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index b576e5ca5..ae6ee6311 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -70,7 +70,7 @@ $wallet-view-bg: $wild-sand;
   background: rgb(250, 250, 250);
   z-index: $sidebar-z-index;
   position: fixed;
-  top: 35px;
+  top: 41px;
   left: 0;
   right: 0;
   bottom: 0;
@@ -86,7 +86,7 @@ $wallet-view-bg: $wild-sand;
 .sidebar-overlay {
   z-index: $sidebar-overlay-z-index;
   position: fixed;
-  top: 35px;
+  top: 41px;
   left: 0;
   right: 0;
   bottom: 0;
@@ -142,8 +142,8 @@ $wallet-view-bg: $wild-sand;
   }
 
   .main-container {
-    margin-top: 35px;
-    height: calc(100% - 34px);
+    margin-top: 41px;
+    height: calc(100% - 41px);
     width: 100%;
     overflow-y: auto;
     background-color: $white;
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index d4b77fae1..3c30c3b2a 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -5,7 +5,12 @@
   font-family: 'DIN OT';
 
   @media screen and (max-width: $break-small) {
-    top: 33px;
+    width: 100%;
+    overflow-y: auto;
+
+    section {
+      flex: 0 0 auto;
+    }
   }
 }
 
@@ -19,6 +24,14 @@
   display: flex;
   flex-flow: column nowrap;
   width: 498px;
+
+  @media screen and (max-width: $break-small) {
+    top: 0;
+    width: 100%;
+    box-shadow: none;
+    padding: 12px;
+    flex: 1 0 auto;
+  }
 }
 
 /* Send Screen */
@@ -43,6 +56,11 @@
   z-index: 25;
   padding: 4px;
   background-color: $white;
+
+  @media screen and (max-width: $break-small) {
+    position: relative;
+    top: 0;
+  }
 }
 
 .send-screen-input-wrapper {
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index a1ffa98a3..51b7cf789 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -42,10 +42,13 @@ textarea:focus {
 /* stylelint-disable */
 #app-content {
   overflow-x: hidden;
-  min-width: 357px;
   height: 100%;
   display: flex;
   flex-direction: column;
+
+  @media screen and (max-width: $break-small) {
+    background-color: $white;
+  }
 }
 /* stylelint-enable */
 
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index 0c5501fea..624b301d1 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -46,7 +46,7 @@ $dropdown-z-index: 30;
 $token-icon-z-index: 15;
 $container-z-index: 15;
 $header-z-index: 12;
-$mobile-header-z-index: 19;
+$mobile-header-z-index: 26;
 $main-container-z-index: 18;
 $send-card-z-index: 20;
 $sidebar-z-index: 26;