Add css to login

src/components/login.js

@@ -6,18 +6,20 @@ export default (player) => {
 		const [input, setInput] = useState(localStorage.getItem("token") ? localStorage.getItem("token"): "" );
 		return (
 			<div className="login">
-				<input type="text" placeholder="Token ID" value={input}
+				<div className="wrapper">
-					onChange={evt => setInput(evt.target.value)} />
+					<input type="text" placeholder="Token ID" value={input} className="nes-input"
-				<button
+						onChange={evt => setInput(evt.target.value)} />
-					onClick={
+					<button className="nes-btn is-primary"
-						() => player.auth(input)
+						onClick={
-							.then(x => {
+							() => player.auth(input)
-								props.setLoggedIn(x);
+								.then(x => {
-								if (x === true) {
+									props.setLoggedIn(x);
-									localStorage.setItem("token", input);
+									if (x === true) {
-								}
+										localStorage.setItem("token", input);
-							})
+									}
-					}>Submit</button>
+								})
+						}>Submit</button>
+				</div>
 			</div>
 		);
 	}

src/index.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import ReactDOM from "react-dom";
-import "./index.css";
+import "./scss/index.scss";
+import "nes.css/css/nes.min.css";
 import { config } from "./config";
 import axios from "axios";
 import login from "./components/login";

src/scss/index.scss

@@ -0,0 +1,21 @@
+.login {
+	padding: 15%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 100vh;
+	box-sizing: border-box;
+	.wrapper {
+		width: 100%;
+		input {
+			margin-bottom: 1em;
+			width: 100%;
+			display: block;
+		}
+		button {
+			width: 100%;
+			display: block;
+		}
+	}
+}