Update formatting of game login selection

src/components/GameCode.vue

@@ -1,20 +1,25 @@
 <template>
 	<div id="game_code_entry">
-		<h2>
+		<h1>
-			Enter a game code:
+			Secret Hitler Online
-		</h2>
+		</h1>
-		<input
+		<div>
-			type="text"
+			<label for="username">Username:</label>
-			name="Game Code"
+			<input
-			v-model="game_code"
+				type="text"
-			@keyup.enter="submit_game_code()"
+				id="username"
-		>
+				name="User Name"
-		<br>
+				v-model="username"
-		<button
+			>
-			@onclick.stop="submit_game_code()"
+			<br>
-		>
+			<label for="gamecode">Game Code:</label>
-			Confirm URL
+			<input
-		</button>
+				type="text"
+				id="gamecode"
+				name="Game Code"
+				v-model="game_code"
+			>
+		</div>
 	</div>
 </template>
 
@@ -24,28 +29,46 @@ export default {
 	components: {},
 	data() {return {
 		game_code: ``,
+		username: ``,
 	}},
-	methods: {
+	methods: {},
-		submit_game_code() {
-			if (this.game_code.length > 0) {
-				this.$emit(`set-game-code`, this.game_code);
-			} else {
-				alert(`Invalid game code. Must have a code`)
-			}
-		},
-	},
 }
 </script>
 
 <style lang="stylus">
+@import "../theme.styl"
+
 #game_code_entry {
 	text-align: center
-	height: 100vh
-	width: 33vw
 	margin: 0 auto
+	height: 100vh
+	width: 50vw
+	color: $main-text-colour
+
+	h1, h3 {
+		letter-spacing: $title-letter-spacing
+	}
+
+	p {
+		letter-spacing: $body-letter-spacing
+	}
 
 	@media screen and (max-width: 600px) {
 		width: 90vw
 	}
 }
 </style>
+<style lang="stylus" scoped>
+@import "../theme.styl"
+
+#game_code_entry {
+	label {
+		font-size: 1.2em
+	}
+	input[type="text"] {
+		margin-bottom: 10px
+		margin-left: 10px
+		text-align: left
+	}
+}
+</style>