CSS module for HomePage

client/src/components/screens/HomePage/HomePage.jsx

@@ -1,45 +1,22 @@
 import React from 'react';
-import styled from 'styled-components';
-import GameCreationForm from '../../util/GameCreationForm';
 import { dispatch } from '../../../domain/gameStore';
 import { hasSavedGameInfo } from '../../../domain/localStorageMethods';
 import DelayedButton from '../../util/DelayedButton';
-import styles from './HomePage.module.css'
-
-const Container = styled.div`
-  height: 100%;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: center;
-`;
-
-const RejoinLabel = styled.span`
-  margin-bottom: 0.5em;
-`;
-
-const RejoinContainer = styled.div`
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-end;
-  align-items: center;
-`;
+import GameCreationForm from '../../util/GameCreationForm';
+import styles from './HomePage.module.css';
 
 const Rejoin = () => (
-  <RejoinContainer>
-    <RejoinLabel>Looks like you were in a game before that you didn't finish!</RejoinLabel>
-    <DelayedButton 
-      onEnd={() => dispatch.rejoinGame()}
-      countDownFormatter={rem => `Rejoining in ${rem}s...`}
-    >
+  <div className={styles.rejoinGame}>
+    <span className={styles.rejoinGameLabel}>Looks like you were in a game before that you didn't finish!</span>
+    <DelayedButton onEnd={() => dispatch.rejoinGame()} countDownFormatter={(rem) => `Rejoining in ${rem}s...`}>
       Rejoin Game?
     </DelayedButton>
-  </RejoinContainer>
+  </div>
 );
 
 export default () => (
-  <Container>
-    <GameCreationForm afterCreate={gameId => dispatch.goToLobby(gameId)}/>
+  <div className={styles.homePage}>
+    <GameCreationForm afterCreate={(gameId) => dispatch.goToLobby(gameId)} />
     {hasSavedGameInfo() && <Rejoin />}
-  </Container>
-);
+  </div>
+);

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

@@ -0,0 +1,18 @@
+.home_page {
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.rejoin_game__label {
+  margin-bottom: 0.5em;
+}
+
+.rejoin_game {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-end;
+  align-items: center;
+}