[WIP] Tweak Send Screen Styles

4 files changed, 37 insertions, 22 deletions

diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index ebcd0dba6..0733c47a1 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -12,6 +12,9 @@
 
 @import './account-dropdown.scss';
 
+@import './send.scss';
+
+
 // Balances
 @import './hero-balance.scss';
 
diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss
index c49fc617e..44ec3e862 100644
--- a/ui/app/css/itcss/components/sections.scss
+++ b/ui/app/css/itcss/components/sections.scss
@@ -283,17 +283,6 @@ textarea.twelve-word-phrase {
   background: #faf6f0;
 }
 
-/* Send Screen */
-
-.send-screen section {
-  margin: 4px 16px;
-}
-
-.send-screen input {
-  width: 100%;
-  font-size: 12px;
-}
-
 /* Ether Balance Widget */
 
 .ether-balance-amount {
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
new file mode 100644
index 000000000..91cbfc7dd
--- /dev/null
+++ b/ui/app/css/itcss/components/send.scss
@@ -0,0 +1,30 @@
+.send-screen-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-width: 355px;
+  // width: 50%;
+  z-index: 50; //TODO
+  position: absolute;
+  top: 40px;
+  // height: 65%;
+}
+
+.send-screen-card {
+  display: flex;
+  flex-direction: column;
+  margin-left: 3.5%;
+  margin-right: 3.5%;
+  background: $white;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
+}
+
+/* Send Screen */
+
+.send-screen section {
+  margin: 4px 16px;
+}
+
+.send-screen input {
+  width: 100%;
+  font-size: 12px;
+}
diff --git a/ui/app/send.js b/ui/app/send.js
index ab527019f..01f3d543a 100644
--- a/ui/app/send.js
+++ b/ui/app/send.js
@@ -59,20 +59,13 @@ SendTransactionScreen.prototype.render = function () {
 
   return (
 
-    h('div.flex-column.flex-grow', {
-      style: {
-        minWidth: '355px', // TODO: maxWidth TBD, use home.html
-      },
+    h('div.send-screen-wrapper', {
+      style: {},
     }, [
 
       // Main Send token Card
-      h('div.send-screen.flex-column.flex-grow', {
-        style: {
-          marginLeft: '3.5%',
-          marginRight: '3.5%',
-          background: '#FFFFFF', // $background-white
-          boxShadow: '0 2px 4px 0 rgba(0,0,0,0.08)',
-        }
+      h('div.send-screen-card', {
+        style: {}
       }, [
         h('section.flex-center.flex-row', {
           style: {