Basic crappy styling

public/styles/shared.css

@@ -6,17 +6,20 @@
 }
 
 body {
-	font: 13pt Helvetica, Arial;
+	font: 12pt Helvetica, Arial;
 	width: 100vw;
 	height: 100vh;
 	display: flex;
 	flex-direction: column;
 	overflow-x: hidden;
 	overflow-y: auto;
+	background-color: #000000;
+	color: white;
 }
 
 h1 {
 	font: 24pt;
+	color: red;
 }
 
 h2 {
@@ -65,11 +68,12 @@ footer {
 	flex-direction: column;
 	padding: 0 10px;
 	min-height: 100vh;
+	margin: 0 10%;
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (max-width: 768px) {
 	.central {
-		margin: 0 10%;
+		margin: 0;
 	}
 }
 
@@ -104,3 +108,74 @@ footer {
 	background: #ff6666;
 }
 
+/* custom styling */
+
+/* Homepage structure */
+.homePage {
+	flex: 1;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: flex-start;
+}
+
+@media screen and (max-width: 480px) {
+	.homePage {
+		flex-direction: column;
+	}
+}
+
+/* left panel */
+.sidePanel {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	min-width: 320px;
+	width: 320px;
+}
+
+@media screen and (max-width: 480px) {
+	.sidePanel {
+		align-self: stretch;
+		width: auto;
+	}
+}
+
+.panel.left, .panel.center {
+	align-items: center;
+}
+
+.panel.left .warning, .panel.center .warning {
+	align-self: stretch;
+}
+
+.panel.left form, .panel.center form {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	align-self: stretch;
+}
+
+.panel.left form button, .panel.center form button {
+	align-self: stretch;
+	margin-top: .2em;
+	margin-bottom: .2em;
+}
+
+@media screen and (max-width: 480px) {
+	.panel.left h1, .panel.center h1 {
+		font-size: 16px;
+	}
+}
+
+/* New panel */
+.newsPanel {
+	margin-left: 15px;
+}
+
+/* bits and pieces */
+.logoutButton {
+	align-self: stretch;
+}

src/components/pages/home.jsx

@@ -15,100 +15,130 @@ class Home extends React.Component {
 		super(props);
 		this.state = {
 			changedPassword: false,
-			signedUp: false,
+			signupSent: false,
 			signupMsg: '',
 			recoverSent: false,
 			recoverMsg: ''
 		};
 	}
 
+	//rendering function
 	render() {
-		//DEBUGGING: well this is goofy
+		//get the correct side panel
 		let SidePanel;
 
-		if (this.props.id) { //logged in
-			SidePanel = () => {
-				if (this.state.signedUp) {
-					this.setState({ signedUp: false });
-				}
-
-				if (this.state.recoverSent) {
-					this.setState({ recoverSent: false });
-				}
-
-				let PasswordChangePanel;
-
-				if (!this.state.changedPassword) {
-					PasswordChangePanel = () => {
-						return (<PasswordChange onPasswordChange={() => { this.setState({changedPassword: true}) }} />);
-					}
-				} else {
-					PasswordChangePanel = () => {
-						return (<p>Password changed!</p>);
-					}
-				}
-
-				return (
-					<div>
-						<p>You are logged in.</p>
-						<PasswordChangePanel />
-						<Logout />
-					</div>
-				);
-			};
-		} else { //not logged in
-			SidePanel = () => {
-				if (this.state.changedPassword) {
-					this.setState({ changedPassword: false });
-				}
-
-				let SignupPanel;
-
-				if (!this.state.signedUp) {
-					SignupPanel = () => {
-						return (
-							<Signup onSignup={(msg) => this.setState( {signedUp: true, signupMsg: msg} )} />
-						);
-					}
-				} else {
-					SignupPanel = () => {
-						return (
-							<p>{this.state.signupMsg}</p>
-						);
-					}
-				}
-
-				let RecoverPanel;
-
-				if (!this.state.recoverSent) {
-					RecoverPanel = () => {
-						return (
-							<PasswordRecover onEmailSent={(msg) => this.setState( {recoverSent: true, recoverMsg: msg} )} />
-						);
-					}
-				}
-				else {
-					RecoverPanel = () => {
-						return (
-							<p>{this.state.recoverMsg}</p>
-						);
-					}
-				}
-
-				return (
-					<div>
-						<SignupPanel />
-						<Login />
-						<RecoverPanel />
-					</div>
-				);
-			};
+		if (this.props.id) {
+			SidePanel = this.LoggedInSidePanel.bind(this);
+		} else {
+			SidePanel = this.LoggedOutSidePanel.bind(this);
 		}
 
+		//TODO: news column
+
+		//return the home page
 		return (
 			<div className='page'>
-				<p>This is the home page.</p>
-				<SidePanel />
+				<h1 style={{textAlign: 'center', fontSize: '50px', margin: '30px'}}>KINGDOM BATTLES!</h1>
+				<div className='homePage'>
+					<SidePanel />
+					<br />
+					<div className='newsPanel'>
+						<h1 className='centered'>News</h1>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	//panel functions
+	LoggedInSidePanel() {
+		//reset the other mode
+		if (this.state.signupSent) {
+			this.setState({ signupSent: false });
+		}
+
+		if (this.state.recoverSent) {
+			this.setState({ recoverSent: false });
+		}
+
+		//build the password change panel
+		let PasswordChangePanel;
+
+		if (!this.state.changedPassword) {
+			PasswordChangePanel = () => {
+				return (<PasswordChange onPasswordChange={() => { this.setState({changedPassword: true}) }} />);
+			}
+		} else {
+			PasswordChangePanel = () => {
+				return (<p>Password changed!</p>);
+			}
+		}
+
+		//finally return the side panel
+		return (
+			<div className='sidePanel'>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+				<PasswordChangePanel />
+				<Logout />
+			</div>
+		);
+	}
+
+	LoggedOutSidePanel() {
+		//reset the other mode
+		if (this.state.changedPassword) {
+			this.setState({ changedPassword: false });
+		}
+
+		//build the signup panel
+		let SignupPanel;
+
+		if (!this.state.signupSent) {
+			SignupPanel = () => {
+				return (
+					<Signup onSignup={(msg) => this.setState( {signupSent: true, signupMsg: msg} )} />
+				);
+			}
+		} else {
+			SignupPanel = () => {
+				return (
+					<p>{this.state.signupMsg}</p>
+				);
+			}
+		}
+
+		//build the recover panel
+		let RecoverPanel;
+
+		if (!this.state.recoverSent) {
+			RecoverPanel = () => {
+				return (
+					<PasswordRecover onEmailSent={(msg) => this.setState( {recoverSent: true, recoverMsg: msg} )} />
+				);
+			}
+		}
+		else {
+			RecoverPanel = () => {
+				return (
+					<p>{this.state.recoverMsg}</p>
+				);
+			}
+		}
+
+		//finally return the side panel 
+		return (
+			<div className='sidePanel'>
+				<SignupPanel />
+				<Login />
+				<RecoverPanel />
 			</div>
 		);
 	}

src/components/pages/password_reset.jsx

@@ -30,9 +30,9 @@ class PasswordReset extends React.Component {
 		}
 
 		return (
-			<div className='page'>
+			<div className='page' style={{justifyContent: 'center'}}>
 				<Panel />
-				<Link to='/'>Return Home</Link>
+				<Link to='/' className='centered'>Return Home</Link>
 			</div>
 		);
 	}

src/components/panels/login.jsx

@@ -19,7 +19,7 @@ class Login extends React.Component {
 		};
 
 		return (
-			<div className='panel'>
+			<div className='panel left'>
 				<h1>Login</h1>
 
 				<div className='warning' style={warningStyle}>

src/components/panels/logout.jsx

@@ -9,7 +9,7 @@ class Logout extends React.Component {
 
 	render() {
 		return (
-			<button type='submit' onClick={(e) => this.submit(e)}>Logout</button>
+			<button className='logoutButton' type='submit' onClick={(e) => this.submit(e)}>Logout</button>
 		);
 	}
 

src/components/panels/password_change.jsx

@@ -18,7 +18,7 @@ class PasswordChange extends React.Component {
 		};
 
 		return (
-			<div className='panel'>
+			<div className='panel left'>
 				<h1>Change Password</h1>
 
 				<div className='warning' style={warningStyle}>

src/components/panels/password_recover.jsx

@@ -16,7 +16,7 @@ class PasswordRecover extends React.Component {
 		};
 
 		return (
-			<div className='panel'>
+			<div className='panel left'>
 				<h1>Recover Password</h1>
 
 				<div className='warning' style={warningStyle}>

src/components/panels/password_reset.jsx

@@ -19,7 +19,7 @@ class PasswordReset extends React.Component {
 		};
 
 		return (
-			<div className='panel'>
+			<div className='panel center'>
 				<h1>Change Password</h1>
 
 				<div className='warning' style={warningStyle}>

src/components/panels/signup.jsx

@@ -19,7 +19,7 @@ export default class Signup extends React.Component {
 		};
 
 		return (
-			<div className='panel'>
+			<div className='panel left'>
 				<h1>Sign Up</h1>
 
 				<div className='warning' style={warningStyle}>