PlayerScores styling moved into styled-components

client/src/components/screens/GamePanel/GuessPane.jsx

@@ -32,7 +32,7 @@ const Container = styled.div`
   }
 `
 
-const Map = styled.div`
+const MapWrapper = styled.div`
   flex: 3;
   height: 100%;
   width: 100%;
@@ -95,9 +95,9 @@ export default ({
   submitDisabled,
 }) => (
   <Container>
-    <Map>
+    <MapWrapper>
       <ClickMarkerMap onMarkerMoved={onSelectPoint} />
-    </Map>
+    </MapWrapper>
     <SubmitWrapper>
       <RoundTimer seconds={roundSeconds} onTimeout={onTimeout} />
       <SubmitButton onClick={onSubmitGuess} disabled={submitDisabled}>

client/src/components/screens/PlayerScores/PlayerScoreTile.jsx

@@ -1,15 +1,45 @@
 import React from "react";
+import styled from "styled-components";
+
+const Tile = styled.div`
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: center;
+`
+
+const Name = styled.span`
+  font-size: 1.4em;
+  font-weight: 800;
+`
+
+const TotalScore = styled.span`
+  font-size: 1.1em;
+`
+
+const List = styled.ol`
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: flex-start;
+  margin-bottom: 20%;
+`
+
+const Score = styled.li`
+  flex: 1;
+`
 
 export default ({ name, guesses, totalScore }) => (
-  <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>
+  <Tile>
+    <Name>{name}</Name>
+    <TotalScore>Score: {totalScore}</TotalScore>
+    <List>
+      <Score>{guesses["1"] && guesses["1"].score}</Score>
+      <Score>{guesses["2"] && guesses["2"].score}</Score>
+      <Score>{guesses["3"] && guesses["3"].score}</Score>
+      <Score>{guesses["4"] && guesses["4"].score}</Score>
+      <Score>{guesses["5"] && guesses["5"].score}</Score>
+    </List>
+  </Tile>
 );

client/src/components/screens/PlayerScores/PlayerScores.css

@@ -1,46 +0,0 @@
-.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/PlayerScores/PlayerScores.jsx

@@ -1,10 +1,26 @@
 import React from 'react';
+import styled from "styled-components";
 import Loading from '../../util/Loading';
 import Button from "../../util/Button";
-import PlayerScoresList from "./PlayerScoresList";
+import PlayerScoreTile from "./PlayerScoreTile";
 import usePlayerScores from '../../../hooks/usePlayerScores';
 
-const PlayerScoresContainer = ({ gameId, onReturnToStart }) => {
+const Container = styled.div`
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-around;
+  align-items: center;
+`
+
+const ScoreBoard = styled.div`
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+  align-items: center;
+  align-content: space-around;
+`
+
+export default ({ gameId, onReturnToStart }) => {
   const scores = usePlayerScores(gameId);
 
   if (!scores) {
@@ -12,11 +28,16 @@ const PlayerScoresContainer = ({ gameId, onReturnToStart }) => {
   }
 
   return (
-    <div className="player-scores">
-      <PlayerScoresList scores={scores} />
-      <Button className="player-scores__button" onClick={onReturnToStart}>Return to Start</Button>
-    </div>
+    <Container>
+      <ScoreBoard>
+        {
+          scores
+            .filter(({ currentRound }) => currentRound === null)
+            .sort((p1, p2) => p1.totalScore > p2.totalScore ? -1 : (p1.totalScore < p2.totalScore ? 1 : 0))
+            .map(({ name, guesses, totalScore }) => <PlayerScoreTile key={name} {...{ name, guesses, totalScore }} />)
+        }
+      </ScoreBoard>
+      <Button onClick={onReturnToStart}>Return to Start</Button>
+    </Container>
   );
 }
-
-export default PlayerScoresContainer;

client/src/components/screens/PlayerScores/PlayerScoresList.jsx

@@ -1,13 +0,0 @@
-import React from "react";
-import PlayerScoreTile from "./PlayerScoreTile";
-
-export default ({ scores }) => (
-  <div className="player-scores__score-board">
-    {
-      scores
-        .filter(({ currentRound }) => currentRound === null)
-        .sort((p1, p2) => p1.totalScore > p2.totalScore ? -1 : (p1.totalScore < p2.totalScore ? 1 : 0))
-        .map(({ name, guesses, totalScore }) => <PlayerScoreTile key={name} {...{ name, guesses, totalScore }} />)
-    }
-  </div>
-);

client/src/components/screens/PlayerScores/index.js

@@ -1,2 +1 @@
-import "./PlayerScores.css";
 export { default } from './PlayerScores';