Implement 'clear buttons' for tx view

4 files changed, 57 insertions, 47 deletions

diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index c0e40e9b4..b2799a65f 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -56,6 +56,44 @@ TxView.prototype.render = function () {
     }, [
     ]),
 
+    h('div.flex-row.flex-wrap', {
+      style: {
+        margin: '1.8em 1.3em 0.8em 1.3em',
+        flex: '1 0 auto',
+      }
+    }, [
+
+      h('div.flex-column.flex-center', {
+        style: {
+          width: '100%',
+        }
+      }, [
+
+        h('div', {}, 'ETH LOGO'),
+
+        h('div', {}, '1001.124 ETH'),
+
+        h('div', {}, '$300,000 USD'),
+
+      ]),
+
+      h('div.flex-row.flex-center', {
+        style: {
+          width: '100%',
+        }
+      }, [
+        h('button.btn-clear', {
+          textAlign: 'center'
+        }, 'BUY'),
+
+        h('button.btn-clear', {
+          textAlign: 'center'
+        }, 'SEND'),
+
+      ]),
+
+    ]),
+
     h('div.flex-row', {
       style: {
         margin: '1.8em 1.3em 0.8em 1.3em',
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 4d1ac1a49..d57ab39d9 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -96,51 +96,6 @@ WalletView.prototype.render = function () {
      active: true,
     }),
 
-    // Buy Buttons
-    // for index.css
-    // TODO: move into a class
-    // div.wallet-btn {
-    //   border: 1px solid rgb(91, 93, 103);
-    //   border-radius: 2px;
-    //   height: 30px;
-    //   width: 75px;
-    //   font-size: 0.8em;
-    //   text-align: center;
-    //   line-height: 25px;
-    // }
-
-    h('div.flex-row', {
-      style: {
-        marginLeft: '1.3em',
-        marginTop: '0.8em',
-      }
-    }, [
-      h('div', {
-        style: {
-          border: '1px solid rgb(91, 93, 103)',
-          borderRadius: '2px',
-          height: '20px',
-          width: '50px',
-          fontSize: '0.8em',
-          textAlign: 'center',
-        }
-      }, 'BUY'),
-      h('div.wallet-btn', {
-        onClick: () => {
-          this.props.showSendPage();
-        },
-        style: {
-          border: '1px solid rgb(91, 93, 103)',
-          borderRadius: '2px',
-          height: '20px',
-          width: '50px',
-          fontSize: '0.8em',
-          textAlign: 'center',
-          marginLeft: '.6em',
-        }
-      }, 'SEND'),
-    ]),
-
     // Wallet contents
     h(Content, {
       title: "Total Token Balance",
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index a19a9f0bc..a14da2d70 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -89,6 +89,25 @@ input:focus, textarea:focus {
   background-color: #02C9B1; // TODO: reusable color in colors.css
 }
 
+button.btn-clear {
+  width: 100px;
+  height: 50px;
+  background: white;
+  border: 1px solid;
+  font-size: .7em;
+}
+
+// No longer used in flat design, remove when modal buttons done
+// div.wallet-btn {
+//   border: 1px solid rgb(91, 93, 103);
+//   border-radius: 2px;
+//   height: 30px;
+//   width: 75px;
+//   font-size: 0.8em;
+//   text-align: center;
+//   line-height: 25px;
+// }
+
 // .btn-red {
 //   background: rgba(254, 35, 17, 1);
 //   box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36);
diff --git a/ui/app/main-container.js b/ui/app/main-container.js
index 752532f12..b00349c05 100644
--- a/ui/app/main-container.js
+++ b/ui/app/main-container.js
@@ -23,8 +23,6 @@ MainContainer.prototype.render = function () {
   //    - pass resulting h() to MainContainer
   //  - error checking in separate func
   //  - router in separate func
-  //
-  //  4. style all buttons as <button>s: accessibility + mobile focus
   let contents = {
     component: AccountAndTransactionDetails,
     key: 'account-detail',