CSS module in App.js and prettier format

client/src/App.js

@@ -1,34 +1,14 @@
 import React from 'react';
-import styled from 'styled-components';
-import {
-  PRE_GAME,
-  PRE_ROUND,
-  IN_ROUND,
-  POST_ROUND,
-  POST_GAME,
-  ERROR,
-} from "./domain/GameState";
+import styles from './App.module.css';
+import GamePanel from './components/screens/GamePanel';
+import HomePage from './components/screens/HomePage';
+import Lobby from './components/screens/Lobby';
+import PlayerScores from './components/screens/PlayerScores';
+import RoundSummary from './components/screens/RoundSummary';
+import ApiInfo from './components/util/ApiInfo';
+import { ERROR, IN_ROUND, POST_GAME, POST_ROUND, PRE_GAME, PRE_ROUND } from './domain/GameState';
 import { useGameState } from './domain/gameStore';
 import useDirectGameLinks from './hooks/useDirectGameLinks';
-import ApiInfo from './components/util/ApiInfo';
-import HomePage from "./components/screens/HomePage";
-import Lobby from "./components/screens/Lobby";
-import GamePanel from "./components/screens/GamePanel";
-import RoundSummary from "./components/screens/RoundSummary";
-import PlayerScores from "./components/screens/PlayerScores";
-
-const Wrapper = styled.div`
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: space-between;
-`
-
-const BlockContainer = styled.div`
-  display: block;
-  text-align: center;
-`
 
 const screenMap = {
   [PRE_GAME]: HomePage,
@@ -36,41 +16,39 @@ const screenMap = {
   [IN_ROUND]: GamePanel,
   [POST_ROUND]: RoundSummary,
   [POST_GAME]: PlayerScores,
-  [ERROR]: () => <p>Application encountered unrecoverable error, please refresh the page.</p>,
-}
+  [ERROR]: () => <p>Application encountered unrecoverable error, please refresh the page.</p>
+};
 
 const needsHeaderFooter = {
   [PRE_GAME]: true,
   [PRE_ROUND]: true,
   [IN_ROUND]: false,
   [POST_ROUND]: false,
-  [POST_GAME]: true,
-  [ERROR]: true,
-}
+  [POST_GAME]: false,
+  [ERROR]: true
+};
 
 export default () => {
   const gameState = useGameState();
   useDirectGameLinks();
   const Screen = screenMap[gameState];
   const needsHF = needsHeaderFooter[gameState];
-  
+
   return (
     <React.StrictMode>
-      <Wrapper>
-        { needsHF && (
-          <BlockContainer>
+      <div className={styles.page}>
+        {needsHF && (
+          <div className={styles.header}>
             <p>TerrAssumptions!</p>
-            <hr/>
-          </BlockContainer>
-        ) }
+          </div>
+        )}
         <Screen />
-        { needsHF && (
-          <BlockContainer>
-            <hr/>
-            <ApiInfo/>
-          </BlockContainer>
-        ) }
-      </Wrapper>
+        {needsHF && (
+          <div className={styles.footer}>
+            <ApiInfo />
+          </div>
+        )}
+      </div>
     </React.StrictMode>
-  )
+  );
 };

client/src/App.module.css

@@ -0,0 +1,19 @@
+.page {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+}
+
+.header {
+  display: block;
+  text-align: center;
+  border-bottom: 2px solid #555;
+}
+
+.footer {
+  display: block;
+  text-align: center;
+  border-top: 2px solid #555;
+}