Extracting styling of PlayerScores

client/src/App.css

@@ -159,3 +159,49 @@
   display: inline;
 }
 
+.player-scores {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.player-scores__score-board {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+  align-items: center;
+  align-content: space-around;
+}
+
+.player-scores__score-tile {
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.player-scores__player-name {
+  display: inline;
+}
+
+.player-scores__total-score {
+  display: inline;
+}
+
+.player-scores__round-score-list {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: flex-start;
+  margin-bottom: 20%;
+}
+
+.player-scores__round-score {
+  flex: 1;
+}
+
+.player-scores__button {
+  display: inline;
+}

client/src/components/screens/player-scores.component/player-score-list.component.jsx

@@ -2,13 +2,7 @@ import React from "react";
 import PlayerScoreTile from "./player-score-tile.component";
 
 export default ({ scores }) => (
-  <div style={{
-    display: "flex",
-    flexFlow: "row wrap",
-    justifyContent: "space-around",
-    alignItems: "center",
-    alignContent: "space-around"
-  }}>
+  <div className="player-scores__score-board">
     {
       scores
         .filter(({ currentRound }) => currentRound === null)

client/src/components/screens/player-scores.component/player-score-tile.component.jsx

@@ -1,15 +1,15 @@
 import React from "react";
 
 export default ({ name, guesses, totalScore }) => (
-  <div style={{flex: 1}}>
-    <p>{name}</p>
-    <p>Score: {totalScore}</p>
-    <ol>
-      <li>{guesses["1"] && guesses["1"].score}</li>
-      <li>{guesses["2"] && guesses["2"].score}</li>
-      <li>{guesses["3"] && guesses["3"].score}</li>
-      <li>{guesses["4"] && guesses["4"].score}</li>
-      <li>{guesses["5"] && guesses["5"].score}</li>
+  <div className="player-scores__score-tile">
+    <span className="player-scores__player-name">{name}</span>
+    <span className="player-scores__total-score">Score: {totalScore}</span>
+    <ol className="player-scores__round-score-list">
+      <li className="player-scores__round-score">{guesses["1"] && guesses["1"].score}</li>
+      <li className="player-scores__round-score">{guesses["2"] && guesses["2"].score}</li>
+      <li className="player-scores__round-score">{guesses["3"] && guesses["3"].score}</li>
+      <li className="player-scores__round-score">{guesses["4"] && guesses["4"].score}</li>
+      <li className="player-scores__round-score">{guesses["5"] && guesses["5"].score}</li>
     </ol>
   </div>
 );

client/src/components/screens/player-scores.component/player-scores.component.jsx

@@ -25,10 +25,9 @@ const PlayerScoresContainer = ({ gameId, onReturnToStart }) => {
   }
 
   return (
-    <div>
-      <p>Previous Game:</p>
+    <div className="player-scores">
       <PlayerScores scores={scores} />
-      <button onClick={onReturnToStart} >Return to Start</button>
+      <button className="btn player-scores__button" onClick={onReturnToStart} >Return to Start</button>
     </div>
   );
 }