Add buttons to mainapp. Add css for mainapp

src/components/mainapp.js

@@ -6,9 +6,28 @@ import Stats from "./stats";
 export default (player) => {
 	function MainApp(props) {
 		const [ playerStats, setPlayerStats ] = useState(null);
+		// Possible values of display
+		// main: The main display with stats, buttons for list/add
+		const [ display ] = useState("main");
 		const token = localStorage.getItem("token");
 		if (playerStats === null)
 			player.player(token).then((res) => setPlayerStats(res));
+
+		let body;
+		if (display === "main")
+			body = (<>
+				<Stats playerStats={playerStats} />
+				<div className="stats lists nes-container with-title is-dark">
+					<p className="title">Quests</p>
+					<button className="nes-btn is-primary">Add Quests</button>
+					<button className="nes-btn is-primary">List Quests</button>
+				</div>
+				<div className="stats lists nes-container with-title is-dark">
+					<p className="title">Side Quests</p>
+					<button className="nes-btn is-primary">Add Side Quests</button>
+					<button className="nes-btn is-primary">List Side Quests</button>
+				</div>
+			</>);
 		return (
 			<div className="main">
 				<header>
@@ -20,7 +39,7 @@ export default (player) => {
 						}}>Logout</button>
 				</header>
 				<div className="body">
-					<Stats playerStats={playerStats} />
+					{body}
 				</div>
 			</div>
 		);

src/components/stats.js

@@ -2,11 +2,12 @@ import React from "react";
 
 export default function Stats(props) {
 	if (props.playerStats === null) {
-		return <img src="./loader.svg"></img>;
+		return <div className="loader"><img alt="loader" src="./loader.svg"></img></div>;
 	} else {
 		const { xp, quests_completed, total_quests, side_quests_completed, total_side_quests } = props.playerStats;
 		return (
-			<div className="stats lists">
+			<div className="stats lists nes-container with-title is-dark">
+				<p className="title">Player Stats</p>
 				<ul className="nes-list is-circle">
 					<li> XP: {xp} </li>
 					<li> Quests: {quests_completed}/{total_quests} </li>

src/scss/index.scss

@@ -1,7 +1,7 @@
 body {
 	margin: 0;
 	padding: 0;
-	background-color: #383838;
+	background-color: #303030;
 	color: #FFF;
 	font-family: "Press Start 2P";
 }
@@ -34,16 +34,48 @@ body {
 		padding: 1em 3em;
 		display: flex;
 		justify-content: space-between;
-		background-color: #000;
-		h1 {
-			font-family: "Ubuntu";
-		}
 	}
 	.body {
 		padding: 1em;
+		div {
+			margin: 1em 0;
+			box-sizing: border-box;
+			button {
+				width: 48%;
+				margin: 0 1%;
+				box-sizing: border-box;
+			}
+		}
 	}
 }
 
 .nes-list.is-circle li::before {
 	color: #FFF;
 }
+
+.loader {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-content: center;
+}
+
+.full_screen {
+	height: 100vh;
+}
+
+@media (max-width: 600px) {
+	.main {
+		header {
+			padding: 1em 1em;
+		}
+		.body {
+			div {
+				button {
+					width: 98%;
+					margin: 0.25em 1%;
+				}
+			}
+		}
+	}
+}