Restyling the dropdowns, prepping to make them cleaner

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

@@ -1,17 +1,26 @@
 .container {
   width: 100%;
-  margin-bottom: 5px;
   position: relative;
   display: inline-block;
 }
 
 .button {
+  margin-left: auto;
+  margin-right: auto;
+  font-size: 20px;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
   text-align: center;
   padding: 4px;
   background-color: #555;
   color: #fff;
   font-weight: 600;
   cursor: pointer;
+  transition: background-color 300ms;
 }
 
 .container:hover .button {
@@ -20,20 +29,28 @@
 
 .list {
   display: none;
+  opacity: 0;
   position: absolute;
   background-color: #333;
-  width: 100%;
+  width: calc(100% - 8px);
   z-index: 1;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 4px solid #333;
+  transition: opacity 500ms;
 }
 
 .container:hover .list {
   display: block;
+  opacity: 1;
 }
 
 .item {
-  padding: 12px 16px;
+  padding: 6px 4px;
+  text-align: center;
   display: block;
   cursor: pointer;
+  transition: background-color 300ms;
 }
 
 .item:hover {

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

@@ -28,26 +28,26 @@ export default ({ afterCreate }) => {
   return (
     <div className={styles.form}>
       <div className={styles.dropdowns}>
-        <Dropdown selected={`Round Timer: ${ms(timer * 1000)}`} onSelect={setTimer}>
+        <Dropdown selected={ms(timer * 1000)} onSelect={setTimer}>
           <Item value={30}>30 Seconds</Item>
           <Item value={120}>2 Minutes</Item>
           <Item value={300}>5 Minutes</Item>
           <Item value={3600}>1 Hour</Item>
         </Dropdown>
-        <Dropdown selected={`Rounds: ${rounds}`} onSelect={setRounds}>
+        <Dropdown selected={rounds} onSelect={setRounds}>
           <Item value={1}>1 Round</Item>
           <Item value={3}>3 Rounds</Item>
           <Item value={5}>5 Rounds</Item>
           <Item value={10}>10 Rounds</Item>
         </Dropdown>
-        <Dropdown selected={onlyAmerica ? 'Just America' : 'All Countries'} onSelect={setOnlyAmerica}>
+        <Dropdown selected={onlyAmerica ? '🇺🇸' : '🌎'} onSelect={setOnlyAmerica}>
           <Item value={false}>All Countries</Item>
           <Item value={true}>Just America</Item>
         </Dropdown>
         <Dropdown
-          selected={`Generator: ${genMethod === MAP_CRUNCH
-            ? 'Map Crunch'
-            : genMethod === RANDOM_STREET_VIEW ? 'RSV' : 'Urban Centers'}`}
+          selected={genMethod === MAP_CRUNCH
+            ? 'MC'
+            : genMethod === RANDOM_STREET_VIEW ? 'RSV' : '🏙️'}
           onSelect={setGenMethod}
         >
           <Item value={MAP_CRUNCH}>Map Crunch</Item>

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

@@ -1,21 +1,21 @@
 .form {
   display: flex;
-  flex-flow: row nowrap;
+  flex-flow: column-reverse nowrap;
   justify-content: space-between;
   align-self: center;
 }
 
 .dropdowns {
+  width: 100%;
   flex: 3;
-  margin-right: 5px;
+  margin-top: 5px;
   display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-  min-width: 200px;
+  flex-flow: row nowrap;
+  justify-content: space-around;
+  align-items: flex-end;
 }
 
 .start {
+  min-width: 500px;
   flex: 1;
-  margin-bottom: 5px;
 }