Putting the new game dropdown styling into styled-components

client/src/components/screens/PreGame/NewGameInput.jsx

@@ -1,23 +1,71 @@
 import React from "react";
-import Button from "../../util/Button";
+import styled from "styled-components";
 import ms from "pretty-ms";
+import Button from "../../util/Button";
+
+const Container = styled.div`
+  display: flex;
+  flex-flow: column-reverse nowrap;
+  justify-content: space-between;
+`
+
+const Dropdown = styled.div`
+  position: relative;
+  display: inline-block;
+  margin-top: 5px;
+`
+
+const DropdownButton = styled.div`
+  text-align: center;
+  padding: 4px;
+  background-color: #555;
+  color: #fff;
+  font-weight: 600;
+  cursor: pointer;
+
+  ${Dropdown}:hover & {
+    background-color: #333;
+  }
+`
+
+const DropdownList = styled.div`
+  display: none;
+  position: absolute;
+  background-color: #333;
+  width: 100%;
+  z-index: 1;
+
+  ${Dropdown}:hover & {
+    display: block;
+  }
+`
+
+const DropdownItem = styled.div`
+  padding: 12px 16px;
+  display: block;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #555;
+  }
+`
 
 export default ({ onCreateGame, cannotCreateGame, timer, setTimer }) => {
   return (
-    <div className="new-game">
-      <div className="new-game__dropdown">
-        <div className="new-game__dropdown-button">
+    <Container>
+      <Dropdown>
+        <DropdownButton>
           Round Timer: {ms(timer * 1000)}
-        </div>
-        <div className="new-game__dropdown-items">
-          <div className="new-game__dropdown-option" onClick={() => setTimer(30)}>30 Seconds</div>
-          <div className="new-game__dropdown-option" onClick={() => setTimer(300)}>5 Minutes</div>
-          <div className="new-game__dropdown-option" onClick={() => setTimer(3600)}>1 Hour</div>
-        </div>
-      </div>
-      <Button className="new-game__btn" onClick={onCreateGame} disabled={cannotCreateGame}>
+        </DropdownButton>
+        <DropdownList>
+          <DropdownItem onClick={() => setTimer(30)}>30 Seconds</DropdownItem>
+          <DropdownItem onClick={() => setTimer(300)}>5 Minutes</DropdownItem>
+          <DropdownItem onClick={() => setTimer(3600)}>1 Hour</DropdownItem>
+        </DropdownList>
+      </Dropdown>
+      <Button onClick={onCreateGame} disabled={cannotCreateGame}>
         Create New Game
       </Button>
-    </div>
+    </Container>
   );
 };

client/src/components/screens/PreGame/PreGame.css

@@ -1,51 +0,0 @@
-.new-game {
-  display: flex;
-  flex-flow: column-reverse nowrap;
-  justify-content: space-between;
-}
-
-.new-game__dropdown {
-  position: relative;
-  display: inline-block;
-  margin-top: 5px;
-}
-
-.new-game__dropdown-button {
-  text-align: center;
-  padding: 4px;
-  background-color: #555;
-  color: #fff;
-  cursor: pointer;
-  font-weight: 600;
-}
-
-.new-game__dropdown-items {
-  display: none;
-  position: absolute;
-  background-color: #333;
-  width: 100%;
-  z-index: 1;
-}
-
-.new-game__dropdown-items .new-game__dropdown-option {
-  padding: 12px 16px;
-  display: block;
-  cursor: pointer;
-}
-
-.new-game__dropdown-items .new-game__dropdown-option:hover {
-  background-color: #555;
-}
-
-.new-game__dropdown:hover .new-game__dropdown-items {
-  display: block;
-}
-
-.new-game__dropdown:hover .new-game__dropdown-button {
-  background-color: #333;
-}
-
-
-.new-game__btn {
-  display: inline;
-}

client/src/components/screens/PreGame/index.js

@@ -1,2 +1 @@
-import "./PreGame.css";
 export { default } from './PreGame';