button component

src/ui/components/common/BigButton.css

@@ -0,0 +1,33 @@
+.BigButton {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  padding: 0 30px;
+  border-radius: 5px;
+  border: none;
+  background: linear-gradient(#ffd326, #ffc61e);
+  color: #704a1d;
+  font-weight: bold;
+
+  height: 60px;
+  max-width: 20%;
+
+  font-size: 20px;
+}
+
+.BigButton:hover {
+  cursor: pointer;
+  background: linear-gradient(#ffc61e, #ffd326);
+}
+
+.BigButton.disabled {
+  background: linear-gradient(#9c9c9c, #949494);
+  color: rgb(226, 226, 226);
+  cursor: default;
+}
+
+.BigButton.disabled:hover {
+  background: linear-gradient(#949494, #9c9c9c);
+}

src/ui/components/common/BigButton.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import './BigButton.css'
+
+interface IProps {
+  text: string;
+  onClick: () => any;
+  id: string;
+}
+
+interface IState {
+  text: string;
+}
+
+export default class BigButton extends React.Component<IProps, IState> {
+
+  constructor(props: { text: string, onClick: () => any, id: string }) {
+    super(props)
+
+    this.state = {
+      text: props.text
+    }
+
+    this.handleClick = this.handleClick.bind(this)
+  }
+
+  handleClick() {
+    this.props.onClick()
+  }
+
+  render() {
+    return (
+      <div className="BigButton" onClick={this.handleClick} id={this.props.id}>
+        <div className="BigButtonText">{this.state.text}</div>
+      </div>
+    )
+  }
+}