Center action buttons, add minor style adjustments

ui/app/css/index.css

@@ -69,46 +69,48 @@ input:focus, textarea:focus {
   flex-direction: column;
 }
 
-button, input[type="submit"] {
+// TODO: remove/refactor for new design
-  font-family: 'Montserrat Bold';
-  outline: none;
-  cursor: pointer;
-  padding: 8px 12px;
-  border: none;
-  color: white;
-  transform-origin: center center;
-  transition: transform 50ms ease-in;
-  /* default orange */
-  background: rgba(247, 134, 28, 1);
-  box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
-}
 
-.btn-green, input[type="submit"].btn-green {
+// button, input[type="submit"] {
-  background: rgba(106, 195, 96, 1);
+//   font-family: 'Montserrat Bold';
-  box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36);
+//   outline: none;
-}
+//   cursor: pointer;
+//   padding: 8px 12px;
+//   border: none;
+//   color: white;
+//   transform-origin: center center;
+//   transition: transform 50ms ease-in;
+//   /* default orange */
+//   background: rgba(247, 134, 28, 1);
+//   box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
+// }
 
-.btn-red {
+// .btn-green, input[type="submit"].btn-green {
-  background: rgba(254, 35, 17, 1);
+//   background: rgba(106, 195, 96, 1);
-  box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36);
+//   box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36);
-}
+// }
 
-button[disabled], input[type="submit"][disabled] {
+// .btn-red {
-  cursor: not-allowed;
+//   background: rgba(254, 35, 17, 1);
-  background: rgba(197, 197, 197, 1);
+//   box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36);
-  box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36);
+// }
-}
 
-button.spaced {
+// button[disabled], input[type="submit"][disabled] {
-  margin: 2px;
+//   cursor: not-allowed;
-}
+//   background: rgba(197, 197, 197, 1);
+//   box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36);
+// }
 
-button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover {
+// button.spaced {
-  transform: scale(1.1);
+//   margin: 2px;
-}
+// }
-button:not([disabled]):active, input[type="submit"]:not([disabled]):active {
+
-  transform: scale(0.95);
+// button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover {
-}
+//   transform: scale(1.1);
+// }
+// button:not([disabled]):active, input[type="submit"]:not([disabled]):active {
+//   transform: scale(0.95);
+// }
 
 a {
   text-decoration: none;
@@ -137,6 +139,22 @@ button.primary {
   text-transform: uppercase;
 }
 
+button.light {
+  padding: 8px 12px;
+  // background: #FFFFFF; // $bg-white
+  box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
+  color: #585D67; // TODO: make reusable light button color
+  font-size: 1.1em;
+  font-family: 'Montserrat Regular';
+  text-transform: uppercase;
+  text-align: center;
+  line-height: 20px;
+  border-radius: 2px;
+  border: 1px solid #979797; // #TODO: make reusable light border color
+  opacity: 0.5;
+}
+
+// TODO: cleanup: not used anywhere
 button.btn-thin {
   border: 1px solid;
   border-color: #4D4D4D;

ui/app/send.js

@@ -72,6 +72,7 @@ SendTransactionScreen.prototype.render = function () {
           marginLeft: '3.5%',
           marginRight: '3.5%',
           background: '#FFFFFF', // $background-white
+          boxShadow: '0 2px 4px 0 rgba(0,0,0,0.08)',
         }
       }, [
         h('section.flex-center.flex-row', {
@@ -92,7 +93,7 @@ SendTransactionScreen.prototype.render = function () {
 
         h('h3.flex-center', {
           style: {
-            marginTop: '-15px',
+            marginTop: '-18px',
             fontSize: '16px',
           },
         }, [
@@ -111,6 +112,7 @@ SendTransactionScreen.prototype.render = function () {
         h('h3.flex-center', {
           style: {
             textAlign: 'center',
+            marginTop: '2px',
             fontSize: '12px',
           },
         }, [
@@ -121,6 +123,7 @@ SendTransactionScreen.prototype.render = function () {
           style: {
             textAlign: 'center',
             fontSize: '36px',
+            marginTop: '8px',
           },
         }, [
           '2.34',
@@ -130,6 +133,7 @@ SendTransactionScreen.prototype.render = function () {
           style: {
             textAlign: 'center',
             fontSize: '12px',
+            marginTop: '4px',
           },
         }, [
           'ANT',
@@ -156,7 +160,6 @@ SendTransactionScreen.prototype.render = function () {
 
         // 'amount' and send button
         h('section.flex-column.flex-center', [
-
           h('div.flex-row.flex-center', {
             style: {
               fontSize: '12px',
@@ -184,7 +187,6 @@ SendTransactionScreen.prototype.render = function () {
         ]),
 
         h('section.flex-column.flex-center', [
-
           h('div.flex-row.flex-center', {
             style: {
               fontSize: '12px',
@@ -215,8 +217,11 @@ SendTransactionScreen.prototype.render = function () {
         // Optional Fields
         //
 
-        h('section.flex-column.flex-center', [
+        h('section.flex-column.flex-center', {
-
+          style: {
+            marginBottom: '10px',
+          },
+        }, [
           h('div.flex-row.flex-center', {
             style: {
               fontSize: '12px',
@@ -225,7 +230,6 @@ SendTransactionScreen.prototype.render = function () {
             }
           },[
             h('span', { style: {} }, ['Transaction Memo (optional)']),
-            h('span', { style: { fontSize: '8px' } }, ['What\'s this?']),
           ]),
 
           h('input.large-input', {
@@ -266,20 +270,28 @@ SendTransactionScreen.prototype.render = function () {
       ]),
 
       // Buttons underneath card
+      h('section.flex-column.flex-center', [
 
-      h('button.primary', {
+        h('button.light', {
-        onClick: this.onSubmit.bind(this),
+          onClick: this.onSubmit.bind(this),
-        style: {
+          style: {
-          textTransform: 'uppercase',
+            marginTop: '8px',
-        },
+            width: '8em',
-      }, 'Next'),
+            background: '#FFFFFF'
+          },
+        }, 'Next'),
 
-      h('button.primary', {
+        h('button.light', {
-        onClick: this.back.bind(this),
+          onClick: this.back.bind(this),
-        style: {
+          style: {
-          textTransform: 'uppercase',
+            background: '#F7F7F7', // $alabaster
-        },
+            border: 'none',
-      }, 'Cancel'),
+            opacity: 1,
+            width: '8em',
+          },
+        }, 'Cancel'),
+
+      ]),
     ])
 
   )