UI changes to Keypad buttons, on Enter Amount screen

lncm · Jan 19, 2019 · da56f73 · da56f73
1 parent 75c263c
commit da56f73
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/assets/scss/keypad.scss b/src/assets/scss/keypad.scss
@@ -19,17 +19,25 @@
     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;
-    font-weight: bold;
+    font-size: 28px;
+    font-weight: 500;
     background: #eee;
     $tapColor: #bbb;
     -webkit-tap-highlight-color: $tapColor;
     &:active {
       background: $tapColor;
     }
   }
-}
+}
diff --git a/src/components/KeyPadButtons.jsx b/src/components/KeyPadButtons.jsx
@@ -22,16 +22,16 @@ export default class KeyPadButtons extends Component {
         {this.renderButton('7')}
         {this.renderButton('8')}
         {this.renderButton('9')}
-        {this.renderButton('clear', { content: 'Clear' })}
+        {this.renderButton('clear', { content: 'Clear', className: 'clear'})}
         {this.renderButton('4')}
         {this.renderButton('5')}
         {this.renderButton('6')}
-        {this.renderButton('delete', { content: 'Delete' })}
+        {this.renderButton('delete', { content: 'Delete', className: 'delete'})}
         {this.renderButton('1')}
         {this.renderButton('2')}
         {this.renderButton('3')}
         {this.renderButton('0')}
-        {this.renderButton('000')}
+        {this.renderButton('00')}
         {this.renderButton('.')}
         {this.renderButton('enter', { content: 'OK', className: 'enter' })}
       </div>