button component

src/ui/App.css

@@ -1,5 +1,16 @@
 body {
   user-select: none;
+  height: 100vh;
+}
+
+#root, .App {
+  height: 100%;
+}
+
+.App {
+  background-image: url("https://webstatic.hoyoverse.com/upload/event/2020/11/04/7fd661b5184e1734f91f628b6f89a31f_7367318474207189623.png");
+  background-repeat: no-repeat;
+  background-size: cover;
 }
 
 .TopButton {

src/ui/App.tsx

@@ -1,15 +1,21 @@
 import React from 'react'
 import logo from './logo.svg'
 import './App.css'
+import './custom.css'
 
 // Major Components
 import Topbar from './components/TopBar'
+import BigButton from './components/common/BigButton'
+
+function playGame() {
+  alert('cum')
+}
 
 function App() {
   return (
     <div className="App">
       <Topbar />
-      <button onClick={() => console.log('cum')}>Cool button</button>
+      <BigButton text="PLAY DA GAME :D" onClick={playGame} id="officialPlay" />
     </div>
   )
 }

src/ui/components/TopBar.tsx

@@ -22,7 +22,7 @@ export default class TopBar extends React.Component {
       <div className="TopBar" data-tauri-drag-region >
         <div id="title">
           <span>Cultivation</span>
-          <span id="version">v0.0.1</span>
+          <span id="version">v0.1.0</span>
         </div>
         <div className="TopBtns">
           <div id="closeBtn" onClick={this.handleClose} className='TopButton'>

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>
+    )
+  }
+}