CSS modules for GameCreationForm

client/src/components/util/GameCreationForm/GameCreationForm.jsx

@@ -1,42 +1,20 @@
-import React, { useState } from "react";
-import styled from "styled-components";
-import ms from "pretty-ms";
-import Loading from "../Loading";
-import { createGame } from "../../../domain/apiMethods";
-import Dropdown from "./Dropdown";
-import { MAP_CRUNCH, RANDOM_STREET_VIEW, URBAN } from "../../../domain/genMethods";
-import styles from './GameCreationForm.module.css'
-
-const Container = styled.div`
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-between;
-  align-self: center;
-`
-
-const DropdownContainer = styled.div`
-  flex: 3;
-  margin-right: 5px;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-`;
-
-const StartButton = styled.button`
-  flex: 1;
-  margin-bottom: 5px;
-`
+import ms from 'pretty-ms';
+import React, { useState } from 'react';
+import { createGame } from '../../../domain/apiMethods';
+import { MAP_CRUNCH, RANDOM_STREET_VIEW, URBAN } from '../../../domain/genMethods';
+import Loading from '../Loading';
+import Dropdown from './Dropdown';
+import styles from './GameCreationForm.module.css';
 
 export default ({ afterCreate }) => {
-  const [loading, setLoading] = useState(false);
-  const [timer, setTimer] = useState(300);
-  const [rounds, setRounds] = useState(5);
-  const [onlyAmerica, setOnlyAmerica] = useState(false);
-  const [genMethod, setGenMethod] = useState(MAP_CRUNCH);
+  const [ loading, setLoading ] = useState(false);
+  const [ timer, setTimer ] = useState(300);
+  const [ rounds, setRounds ] = useState(5);
+  const [ onlyAmerica, setOnlyAmerica ] = useState(false);
+  const [ genMethod, setGenMethod ] = useState(MAP_CRUNCH);
 
   if (loading) {
-    return <Loading/>
+    return <Loading />;
   }
 
   const invalidCombo = genMethod === URBAN && onlyAmerica;
@@ -50,14 +28,14 @@ export default ({ afterCreate }) => {
   };
 
   return (
-    <Container>
-      <DropdownContainer>
+    <div className={styles.form}>
+      <div className={styles.dropdowns}>
         <Dropdown
           options={{
-            "30 Seconds": 30,
-            "2 Minutes": 120,
-            "5 Minutes": 300,
-            "1 Hour": 3600,
+            '30 Seconds': 30,
+            '2 Minutes': 120,
+            '5 Minutes': 300,
+            '1 Hour': 3600
           }}
           onChange={setTimer}
         >
@@ -65,10 +43,10 @@ export default ({ afterCreate }) => {
         </Dropdown>
         <Dropdown
           options={{
-            "1 Round": 1,
-            "3 Rounds": 3,
-            "5 Rounds": 5,
-            "10 Rounds": 10,
+            '1 Round': 1,
+            '3 Rounds': 3,
+            '5 Rounds': 5,
+            '10 Rounds': 10
           }}
           onChange={setRounds}
         >
@@ -76,31 +54,28 @@ export default ({ afterCreate }) => {
         </Dropdown>
         <Dropdown
           options={{
-            "All Countries": false,
-            "Just America": true,
+            'All Countries': false,
+            'Just America': true
           }}
           onChange={setOnlyAmerica}
         >
-          {onlyAmerica ? "Just America" : "All Countries" }
+          {onlyAmerica ? 'Just America' : 'All Countries'}
         </Dropdown>
         <Dropdown
           options={{
-            "Map Crunch": MAP_CRUNCH,
-            "Random Street View": RANDOM_STREET_VIEW,
-            "Urban Centers": URBAN,
+            'Map Crunch': MAP_CRUNCH,
+            'Random Street View': RANDOM_STREET_VIEW,
+            'Urban Centers': URBAN
           }}
           onChange={setGenMethod}
         >
-          Generator: {
-            genMethod === MAP_CRUNCH ? "Map Crunch" : 
-            genMethod === RANDOM_STREET_VIEW ? "RSV" :
-            "Urban Centers"
-          }
+          Generator:{' '}
+          {genMethod === MAP_CRUNCH ? 'Map Crunch' : genMethod === RANDOM_STREET_VIEW ? 'RSV' : 'Urban Centers'}
         </Dropdown>
-      </DropdownContainer>
-      <StartButton onClick={onCreateGame} disabled={invalidCombo}>
-        { invalidCombo ? "Incompatible Options" : "New Game" }
-      </StartButton>
-    </Container>
+      </div>
+      <button className={styles.start} onClick={onCreateGame} disabled={invalidCombo}>
+        {invalidCombo ? 'Incompatible Options' : 'New Game'}
+      </button>
+    </div>
   );
-}
+};

client/src/components/util/GameCreationForm/GameCreationForm.module.css

@@ -0,0 +1,20 @@
+.form {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-self: center;
+}
+
+.dropdowns {
+  flex: 3;
+  margin-right: 5px;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.start {
+  flex: 1;
+  margin-bottom: 5px;
+}