Styling (done)

src/App.scss

@@ -1,6 +1,8 @@
 @import url('https://fonts.googleapis.com/css?family=Covered+By+Your+Grace&display=swap');
 
 .app {
+	text-align: center;
+
 	.header {
 		margin-bottom: 3em;
 		height: 10em;
@@ -15,10 +17,22 @@
 		}
 	}
 
+	.back {
+		width: 80%;
+		margin: auto;
+
+		.back-btn {
+			display: flex;
+			height: 30px;
+			background-color: unset;
+		}
+	}
+
 	.list {
 		list-style-type: none;
-		width: 60em;
+		max-width: 60em;
 		margin: auto;
+		padding: 0;
 
 		.list-item {
 			display: inline-block;

src/views/Member.jsx

@@ -3,6 +3,7 @@ import React, { useState, useEffect } from 'react'
 import axios from 'axios'
 import history from  '../history.js'
 import config from '../config.json'
+import './Member.scss'
 
 // teamProps, usersProps, userIdCallback
 export default function Member(props) {
@@ -11,7 +12,7 @@ export default function Member(props) {
 	let [user, setUser] = useState([])
 	let [teamNames, setTeamNames] = useState([])
 
-	// MARK: Effect
+	// MARK: Effects
 	// MARK: - Load user info from Tempo backend on initialization
 	useEffect(() => {
 		let fetchData = async() => {
@@ -33,6 +34,7 @@ export default function Member(props) {
 			catch(err) {
 				setLoading(false)
 				console.log('Fetch data error: ' + err)
+				history.push('/')
 			}
 		}
 
@@ -48,24 +50,31 @@ export default function Member(props) {
 
 	// MARK: Return
 	return (
-		<div className='user'>
-			<button onClick={navBack}>Back</button>
-
-
+		<div className='member'>
 
 			{loading ? (<div>Loading...</div>) : (
 				user !== undefined &&
 				<div>
-					<h1>{user.name}</h1>
+					<div className='header'>
+						<h1>Member {user.name}</h1>
+					</div>
+
+					<div className='back'>
+						<button className='back-btn' onClick={navBack}>{`< Back to team`}</button>
+					</div>
 
 					<h2>Username:</h2>
+					<div className='username'>
 						<p>{user.username}</p>
+					</div>
 
 					<h2>Member of:</h2>
 					<ul className='list'>
 						{teamNames.map((name, index) => (
 							<li className='list-item' key={index}>
+								<div className='username'>
 									{name}
+								</div>
 							</li>
 						))}
 					</ul>

src/views/Member.scss

@@ -0,0 +1,9 @@
+.member {
+	.username {
+		width: 10em;
+		height: 2em;
+		font-family: 'Covered By Your Grace', cursive;
+		font-size: 25px;
+		margin: auto;
+	}
+}

src/views/Team.jsx

@@ -87,14 +87,16 @@ export default function Team(props) {
 	return (
 		<div className='team'>
 
-			<button onClick={navBack}>Back</button>
-
 			{props.teamProps !== undefined &&
 				<div className='header'>
-					<h1>{props.teamProps.name}</h1>
+					<h1>Team {props.teamProps.name}</h1>
 				</div>
 			}
 
+			<div className='back'>
+				<button className='back-btn' onClick={navBack}>{`< Back to teams`}</button>
+			</div>
+
 			<FilterForm filterCallback = { filterCallback } />
 
 			{loading ? (<div>Loading...</div>) : (
@@ -102,7 +104,9 @@ export default function Team(props) {
 				<div>
 					<h2>Team lead</h2>
 
-					<p>{ userData(team.lead) }</p>
+					<button className='selector-btn' onClick={() => selectUser(team.lead)}>
+						{userData(team.lead)}
+					</button>
 
 					<h2>Team members</h2>
 

src/views/User.jsx

@@ -1,38 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import axios from 'axios'
-import config from '../config.json'
-
-export default function User({ userId }) {
-	// MARK: State
-	let [loading, setLoading] = useState(true)
-	let [user, setUser] = useState([])
-
-	// MARK: Effect
-
-	// MARK: - Load user info from Tempo backend on initialization
-	useEffect(() => {
-		let fetchData = async() => {
-			setLoading(true)
-			try {
-				let result = await axios(config.api + '/user/' + userId)
-				if (result.data) {
-					setUser(result.data)
-				}
-				setLoading(false)
-			}
-			catch(err) {
-				setLoading(false)
-				console.log('Fetch data error: ' + err)
-			}
-		}
-
-		fetchData()
-	}, [])
-
-	// MARK: Return
-	return (
-		<div className='user'>
-			<h1>User { userId }</h1>
-		</div>
-	)
-}