Improvements to Number Pad buttons on Enter Amount screen.

lncm · Jan 21, 2019 · 0064c2d · 0064c2d
1 parent da56f73
commit 0064c2d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 21 deletions.
diff --git a/src/assets/scss/keypad.scss b/src/assets/scss/keypad.scss
@@ -19,18 +19,11 @@
     grid-template-columns: repeat(4, 1fr);
   }
   .keypad-button {
-    &.clear {
-      background-color: red;
-    }
-    &.delete {
-      background-color: yellow;
-    }
     &.enter {
       grid-row: 3 / 5;
       grid-column: 4;
-      background-color: green;
     }
-    padding: 10px;
+    padding: 0px;
     font-size: 28px;
     font-weight: 500;
     background: #eee;

diff --git a/src/components/KeyPad.jsx b/src/components/KeyPad.jsx
@@ -12,9 +12,12 @@ export default class KeyPad extends Component {
   handleKeyPress(value) {
     const { text } = this.state;
     const { onSubmit } = this.props;
-    if (value === 'enter' && text.length > 0) {
-      onSubmit(parseFloat(text));
-      return this.setState({ text: '' });
+    if (value === 'enter') {
+      if (text.length > 0) {
+        onSubmit(parseFloat(text));
+        return this.setState({ text: '' });
+      }
+      return null;
     }
     if (value === 'clear') {
       return this.setState({ text: '' });

diff --git a/src/components/KeyPadButtons.jsx b/src/components/KeyPadButtons.jsx
@@ -1,18 +1,24 @@
 import React, { Component } from 'react';
+import { AnchorButton, ButtonGroup } from '@blueprintjs/core';
 
 export default class KeyPadButtons extends Component {
   shouldComponentUpdate() {
     return false;
   }
-  renderButton(value, { content, className = '' } = {}) {
+
+  renderButton(value, { content, className = '', intent } = {}) {
     const { onKeyPress } = this.props;
     return (
-      <div
-        role="button"
-        className={`keypad-button ${className}`}
-        onClick={() => onKeyPress(value)}
-      >
-        {content || value}
+      <div className={`keypad-button ${className}`}>
+        <ButtonGroup fill vertical>
+          <AnchorButton
+            large
+            text={content || value}
+            onClick={() => onKeyPress(value)}
+            fill
+            intent={intent}
+          />
+        </ButtonGroup>
       </div>
     );
   }
@@ -22,18 +28,18 @@ export default class KeyPadButtons extends Component {
         {this.renderButton('7')}
         {this.renderButton('8')}
         {this.renderButton('9')}
-        {this.renderButton('clear', { content: 'Clear', className: 'clear'})}
+        {this.renderButton('clear', { content: 'Clear', intent: 'danger' })}
         {this.renderButton('4')}
         {this.renderButton('5')}
         {this.renderButton('6')}
-        {this.renderButton('delete', { content: 'Delete', className: 'delete'})}
+        {this.renderButton('delete', { content: 'Delete', intent: 'warning' })}
         {this.renderButton('1')}
         {this.renderButton('2')}
         {this.renderButton('3')}
         {this.renderButton('0')}
         {this.renderButton('00')}
         {this.renderButton('.')}
-        {this.renderButton('enter', { content: 'OK', className: 'enter' })}
+        {this.renderButton('enter', { content: 'OK', className: 'enter', intent: 'success' }) }
       </div>
     );
   }