Cleaning up the summary page

client/src/App.js

@@ -7,6 +7,7 @@ const Wrapper = styled.div`
   color: #ccc;
   font-weight: 500;
   height: 100%;
+  width: 100%;
   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;

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

@@ -7,6 +7,7 @@ const Tile = styled.div`
   flex-flow: column nowrap;
   justify-content: flex-start;
   align-items: center;
+  min-width: 10em;
 `
 
 const Name = styled.span`
@@ -16,19 +17,20 @@ const Name = styled.span`
 
 const TotalScore = styled.span`
   font-size: 1.1em;
+  margin-left: .5em;
 `
 
-const List = styled.ul`
+const List = styled.div`
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   align-items: flex-start;
   margin-bottom: 20%;
+  margin-left: 1em;
   list-style: none;
 `
 
-const Score = styled.li`
-  flex: 1;
+const Score = styled.span`
 `
 
 export default ({ name, guesses, totalScore }) => (
@@ -38,9 +40,9 @@ export default ({ name, guesses, totalScore }) => (
     <List>
       {
         ["1", "2", "3", "4", "5"]
-          .map(key => {
-            const score = guesses[key]?.score
-            return score !== undefined ? <Score key={key}>{score}</Score> : null
+          .map(num => {
+            const score = guesses[num]?.score
+            return score !== undefined ? <Score key={num}>{num}: {score}</Score> : null
           })
       }
     </List>

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

@@ -11,18 +11,34 @@ const Container = styled.div`
   flex-flow: column nowrap;
   justify-content: space-around;
   align-items: center;
+  height: 100%;
 `
 
 const ScoreBoard = styled.div`
   display: flex;
   flex-flow: row wrap;
-  justify-content: space-around;
-  align-items: center;
+  justify-content: space-evenly;
+  align-items: flex-start;
   align-content: space-around;
+  max-width: 80%;
+  margin-top: 10%;
+`
+
+const LowerContainer = styled.div`
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  align-items: center;
+  margin: 1em;
 `
 
 const Label = styled.span`
   padding: 0.2em;
+  margin-bottom: 0.5em;
+`
+
+const StyledButton = styled(Button)`
+  margin-top: 0.5em;
 `
 
 const getUrl = gameId => {
@@ -48,9 +64,11 @@ export default ({ gameId, onReturnToStart }) => {
             .map((data) => <PlayerScoreTile key={data.name} {...data} />)
         }
       </ScoreBoard>
-      <Label>This page can be directly linked with:</Label>
-      <Label><ClickToCopy text={getUrl(gameId)} /></Label>
-      <Button onClick={onReturnToStart}>Return to Start</Button>
+      <LowerContainer>
+        <Label>This page can be directly linked with:</Label>
+        <Label><ClickToCopy text={getUrl(gameId)} /></Label>
+        <StyledButton onClick={onReturnToStart}>Return to Start</StyledButton>
+      </LowerContainer>
     </Container>
   );
 }