More styling, make the login/register forms easier to use on mobile

App.js

 import React, { Component } from "react";
-import { StyleSheet, View, Image } from "react-native";
+import { StyleSheet, View, Image, StatusBar } from "react-native";
 
 import Login from "./components/Login";
 
@@ -7,6 +7,7 @@ export default class App extends Component {
   render() {
     return (
       <View style={styles.container}>
+        <StatusBar backgroundColor="#1d1d1b" barStyle="light-content" />
         <View style={{ flex: 1, flexDirection: "column" }}>
           <View style={styles.logoContainer}>
             <Image

components/GameList.js

@@ -281,19 +281,20 @@ class GameList extends Component {
                 <Button
                   color="#424242"
                   onPress={() => {
-                    this.joinFaction();
                     this.setPopupVisible(!this.state.passwordPopupVisible);
                   }}
-                  title="Submit"
+                  title="Close"
                 />
               </View>
               <View style={styles.popupButton}>
                 <Button
                   color="#424242"
                   onPress={() => {
+                    this.joinFaction();
                     this.setPopupVisible(!this.state.passwordPopupVisible);
+                    this.setState({ factionPassword: "" });
                   }}
-                  title="Close"
+                  title="Submit"
                 />
               </View>
             </View>

components/Login.js

@@ -7,7 +7,7 @@ import GameList from "./GameList";
 
 class Login extends Component {
   state = {
-    form: "", // Used for forms (login, register etc.)
+    form: "login", // Used for forms (login, register etc.)
     username: null,
     token: null
   };
@@ -70,23 +70,38 @@ class Login extends Component {
     return (
       <View className="container">
         <View className="navigation">
-          {!this.state.username && (
+          {this.state.form === "register" && (
+            <RegisterForm
+              view=""
+              handleState={this.handleState.bind(this)}
+              toggleView={this.toggleView.bind(this)}
+            />
+          )}
+          {this.state.form === "login" && (
+            <LoginForm
+              view=""
+              handleState={this.handleState.bind(this)}
+              toggleView={this.toggleView.bind(this)}
+            />
+          )}
+
+          {!this.state.username && this.state.form === "login" && (
             <View style={styles.buttonContainer}>
               <Button
                 color="#424242"
-                id="loginButton"
-                onPress={() => this.toggleView("login")}
-                title="Login"
+                id="registerButton"
+                onPress={() => this.toggleView("register")}
+                title="Register"
               />
             </View>
           )}
-          {!this.state.username && (
+          {!this.state.username && this.state.form === "register" && (
             <View style={styles.buttonContainer}>
               <Button
                 color="#424242"
-                id="registerButton"
-                onPress={() => this.toggleView("register")}
-                title="Register"
+                id="loginButton"
+                onPress={() => this.toggleView("login")}
+                title="Login"
               />
             </View>
           )}
@@ -104,20 +119,6 @@ class Login extends Component {
             </Fragment>
           )}
         </View>
-        {this.state.form === "register" && (
-          <RegisterForm
-            view=""
-            handleState={this.handleState.bind(this)}
-            toggleView={this.toggleView.bind(this)}
-          />
-        )}
-        {this.state.form === "login" && (
-          <LoginForm
-            view=""
-            handleState={this.handleState.bind(this)}
-            toggleView={this.toggleView.bind(this)}
-          />
-        )}
       </View>
     );
   }

components/LoginForm.js

@@ -60,15 +60,6 @@ export class LoginForm extends React.Component {
   render() {
     return (
       <View className="fade-main">
-        <View className="sticky">
-          <Text
-            id="closeLoginFormX"
-            style={styles.close}
-            onPress={this.handleView}
-          >
-            ×
-          </Text>
-        </View>
         <View className="login">
           <Text style={styles.tooltipText}>Login</Text>
           <TextInput
@@ -105,15 +96,6 @@ export class LoginForm extends React.Component {
 }
 
 const styles = StyleSheet.create({
-  close: {
-    marginTop: 10,
-    marginLeft: 100,
-    marginRight: 100,
-    alignContent: "center",
-    fontSize: 40,
-    textAlign: "center",
-    backgroundColor: "#424242"
-  },
   textInput: {
     backgroundColor: "#424242",
     margin: 5

components/RegisterForm.js

@@ -73,11 +73,6 @@ export class RegisterForm extends React.Component {
   render() {
     return (
       <View className="fade-main">
-        <View className="sticky">
-          <Text onPress={this.handleView} style={styles.close}>
-            ×
-          </Text>
-        </View>
         <View className="login">
           <Text style={styles.tooltipText}>Register New User</Text>
           <TextInput
@@ -119,15 +114,6 @@ export class RegisterForm extends React.Component {
 }
 
 const styles = StyleSheet.create({
-  close: {
-    marginTop: 10,
-    marginLeft: 100,
-    marginRight: 100,
-    alignContent: "center",
-    fontSize: 40,
-    textAlign: "center",
-    backgroundColor: "#424242"
-  },
   textInput: {
     backgroundColor: "#424242",
     margin: 5