CSS modules for Dropdown

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

@@ -1,61 +1,15 @@
-import React from "react";
-import styled from "styled-components";
-
-const DropdownBox = styled.div`
-  width: 100%;
-  margin-bottom: 5px;
-  position: relative;
-  display: inline-block;
-`
-
-const DropdownButton = styled.div`
-  text-align: center;
-  padding: 4px;
-  background-color: #555;
-  color: #fff;
-  font-weight: 600;
-  cursor: pointer;
-
-  ${DropdownBox}:hover & {
-    background-color: #333;
-  }
-`
-
-const DropdownList = styled.div`
-  display: none;
-  position: absolute;
-  background-color: #333;
-  width: 100%;
-  z-index: 1;
-
-  ${DropdownBox}:hover & {
-    display: block;
-  }
-`
-
-const DropdownItem = styled.div`
-  padding: 12px 16px;
-  display: block;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #555;
-}
-`
+import React from 'react';
+import styles from './Dropdown.module.css';
 
 export const Item = ({ value, onSelect, children }) => (
-  <DropdownItem onClick={() => onSelect(value)}>
+  <div className={styles.item} onClick={() => onSelect(value)}>
     {children}
-  </DropdownItem>
+  </div>
 );
 
 export const Dropdown = ({ selected, onSelect, children }) => (
-  <DropdownBox>
-    <DropdownButton>
-      {selected}
-    </DropdownButton>
-    <DropdownList>
-      {children.map((child, key) => React.cloneElement(child, { onSelect, key }))}
-    </DropdownList>
-  </DropdownBox>
+  <div className={styles.container}>
+    <div className={styles.button}>{selected}</div>
+    <div className={styles.list}>{children.map((child, key) => React.cloneElement(child, { onSelect, key }))}</div>
+  </div>
 );

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

@@ -0,0 +1,41 @@
+.container {
+  width: 100%;
+  margin-bottom: 5px;
+  position: relative;
+  display: inline-block;
+}
+
+.button {
+  text-align: center;
+  padding: 4px;
+  background-color: #555;
+  color: #fff;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.container:hover .button {
+  background-color: #333;
+}
+
+.list {
+  display: none;
+  position: absolute;
+  background-color: #333;
+  width: 100%;
+  z-index: 1;
+}
+
+.container:hover .list {
+  display: block;
+}
+
+.item {
+  padding: 12px 16px;
+  display: block;
+  cursor: pointer;
+}
+
+.item:hover {
+  background-color: #555;
+}