CSS module for PlayerScores

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

@@ -1,37 +1,12 @@
 import React from 'react';
-import styled from "styled-components";
-import Loading from '../../util/Loading';
-import { useGameCoords, usePlayers, useLinkedGame } from '../../../hooks/useGameInfo';
+import { useGameId } from '../../../domain/gameStore';
+import { useGameCoords, useLinkedGame, usePlayers } from '../../../hooks/useGameInfo';
 import ClickToCopy from '../../util/ClickToCopy';
-import SummaryMap from './SummaryMap';
+import Loading from '../../util/Loading';
 import LinkedGame from './LinkedGame';
+import styles from './PlayerScores.module.css';
 import ScoreBoard from './ScoreBoard';
-import { useGameId } from '../../../domain/gameStore';
-
-const Container = styled.div`
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: space-between;
-  align-items: center;
-  height: 100%;
-`
-
-const TopRow = styled.div`
-  display: flex;
-  flex-flow: column nowrap;
-  width: 100%;
-  justify-content: space-around;
-  align-items: center;
-
-  @media only screen and (min-width: 600px) and (min-height: 600px) {
-    flex-flow: row nowrap;
-  }
-`
-
-const Label = styled.span`
-  padding: 0.2em;
-  margin-bottom: 0.5em;
-`
+import SummaryMap from './SummaryMap';
 
 export default () => {
   // poll the game state
@@ -42,20 +17,22 @@ export default () => {
 
   // set up the summary URL
   const summaryURL = new URL(window.location.href);
-  summaryURL.searchParams.append("summary", gameId);
+  summaryURL.searchParams.append('summary', gameId);
 
   if (!players || !coords) {
-    return <Loading/>
+    return <Loading />;
   }
 
   return (
-    <Container>
-      <TopRow>
-        <SummaryMap {...{ players, coords }}/>
+    <div className={styles.page}>
+      <div className={styles.top}>
+        <SummaryMap {...{ players, coords }} />
         <LinkedGame {...{ linkedGame, gameId }} />
-      </TopRow>
+      </div>
       <ScoreBoard {...{ players }} />
-      <Label><ClickToCopy text={summaryURL.href}>Click here to copy a link to this summary!</ClickToCopy></Label>
-    </Container>
+      <span className={styles.label}>
+        <ClickToCopy text={summaryURL.href}>Click here to copy a link to this summary!</ClickToCopy>
+      </span>
+    </div>
   );
-}
+};

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

@@ -1,3 +1,30 @@
+.page {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+}
+
+.top {
+  display: flex;
+  flex-flow: column nowrap;
+  width: 100%;
+  justify-content: space-around;
+  align-items: center;
+}
+
+@media only screen and (min-width: 600px) and (min-height: 600px) {
+  .top {
+    flex-flow: row nowrap;
+  }
+}
+
+.label {
+  padding: 0.2em;
+  margin-bottom: 0.5em;
+}
+
 .linked {
   display: flex;
   justify-content: center;