game download menu

src/ui/components/menu/Game.css

@@ -0,0 +1,28 @@
+.GameDownloadMenu {
+  width: 40%;
+  height: 40%;
+}
+
+.GameDownload {
+  padding: 18px;
+}
+
+.GameDownload .BigButton {
+  height: 50px;
+}
+
+.GameDownloadDir {
+  width: 70%;
+}
+
+.GameDownloadDir .DirInput {
+  width: 100%;
+}
+
+.GameDownloadDir .DirInput .TextInputWrapper {
+  width: 100%;
+}
+
+.GameDownloadDir .DirInput .TextInputWrapper input {
+  width: 80%;
+}

src/ui/components/menu/Game.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import Menu from './Menu'
+import Tr, { translate } from '../../../utils/language'
+import DownloadHandler from '../../../utils/download'
+
+import './Game.css'
+import DirInput from '../common/DirInput'
+import BigButton from '../common/BigButton'
+
+interface IProps {
+  closeFn: () => void;
+  downloadManager: DownloadHandler;
+}
+
+interface IState {
+  gameDownloading: boolean;
+  gameDownloadFolder: string;
+  dirPlaceholder: string;
+}
+
+export default class Downloads extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props)
+
+    this.state = {
+      gameDownloading: false,
+      gameDownloadFolder: '',
+      dirPlaceholder: ''
+    }
+  }
+
+  async componentDidMount() {
+    this.setState({
+      dirPlaceholder: await translate('components.select_folder')
+    })
+  }
+
+  downloadGame() {
+    console.log('Download!')
+  }
+
+  render() {
+    return (
+      <Menu heading='Download Game' closeFn={this.props.closeFn} className="GameDownloadMenu">
+        <div className="GameDownload">
+          <BigButton id="downloadGameBtn" onClick={this.downloadGame}>Download Game</BigButton>
+        </div>
+        
+        <div className="GameDownloadDir">
+          <DirInput placeholder={this.state.dirPlaceholder} clearable={false} readonly={false} onChange={(value: string) => this.setState({
+            gameDownloading: true,
+            gameDownloadFolder: value
+          })}/>
+        </div>
+      </Menu>
+    )
+  }
+}