Added dead buttons to the profile page

public/styles/shared.css

@@ -170,7 +170,7 @@ footer {
 	}
 }
 
-/* New panel */
+/* News panel */
 .newsPanel {
 	margin-left: 15px;
 	flex: 1;
@@ -179,6 +179,29 @@ footer {
 	justify-content: flex-start;
 }
 
+@media screen and (max-width: 480px) {
+	.newsPanel {
+		align-self: stretch;
+		width: auto;
+	}
+}
+
+.table {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+}
+
+.row {
+	flex: 1;
+	display: flex;
+}
+
+.col {
+	flex: 1;
+}
+
 /* bits and pieces */
 .logoutButton {
 	align-self: stretch;

src/components/pages/profile.jsx

@@ -51,13 +51,47 @@ class Profile extends React.Component {
 		if (this.state.username != '') {
 			MainPanel = () => {
 				return (
-					<div>
+					<div className='table'>
-						<p>Username: {this.state.username}</p>
+						<div className='row'>
-						<p>Gold: {this.state.gold}</p>
+							<p className='col'>Username:</p>
-						<p>Recruits: {this.state.recruits}</p>
+							<p className='col'>{this.state.username}</p>
-						<p>Soldiers: {this.state.soldiers}</p>
+							<div className='col'></div>
-						<p>Spies: {this.state.spies}</p>
+							<div className='col'></div>
-						<p>Scientists: {this.state.scientists}</p>
+						</div>
+
+						<div className='row'>
+							<p className='col'>Gold:</p>
+							<p className='col'>{this.state.gold}</p>
+							<div className='col'></div>
+							<div className='col'></div>
+						</div>
+
+						<div className='row'>
+							<p className='col'>Recruits:</p>
+							<p className='col'>{this.state.recruits}</p>
+							<button className='col' style={{flex: '2 1 1.5%'}}>Get More...</button>
+						</div>
+
+						<div className='row'>
+							<p className='col'>Soldiers:</p>
+							<p className='col'>{this.state.soldiers}</p>
+							<button className='col'>Train</button>
+							<button className='col'>Untrain</button>
+						</div>
+
+						<div className='row'>
+							<p className='col'>Spies:</p>
+							<p className='col'>{this.state.spies}</p>
+							<button className='col'>Train</button>
+							<button className='col'>Untrain</button>
+						</div>
+
+						<div className='row'>
+							<p className='col'>Scientists:</p>
+							<p className='col'>{this.state.scientists}</p>
+							<button className='col'>Train</button>
+							<button className='col'>Untrain</button>
+						</div>
 					</div>
 				);
 			}