Switch buy modal 'cancel' from text to button for accessibility

2 files changed, 19 insertions, 3 deletions

diff --git a/ui/app/components/buy-options.js b/ui/app/components/buy-options.js
index d36328efd..7d640c007 100644
--- a/ui/app/components/buy-options.js
+++ b/ui/app/components/buy-options.js
@@ -16,6 +16,9 @@ function mapDispatchToProps (dispatch) {
     toCoinbase: (address) => {
       dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
     },
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    }
   }
 }
 
@@ -66,9 +69,12 @@ BuyOptions.prototype.render = function () {
 
       ]),
 
-      h('div.modal-content-footer', {
-        style: {},
-      }, 'Cancel'),
+      h('button', {
+        style: {
+          background: 'white',
+        },
+        onClick: () => { this.props.hideModal() },
+      }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')),
     ])
   ])
 }
diff --git a/ui/app/css/itcss/trumps/index.scss b/ui/app/css/itcss/trumps/index.scss
index a6a6e4335..a1ed9d172 100644
--- a/ui/app/css/itcss/trumps/index.scss
+++ b/ui/app/css/itcss/trumps/index.scss
@@ -86,3 +86,13 @@ i.fa.fa-question-circle.fa-lg.menu-icon {
 //     width: 80%;
 //   }
 // }
+
+
+
+// This text is contained inside a div.
+// ID needed to override user agent stylesheet.
+// See components/modal.scss
+#modal-content-footer-text {
+  font-family: 'DIN OT';
+  font-size: 16px;
+}