Redesign GameCreationForm

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

@@ -42,7 +42,14 @@ export const findSelectedDisplay = (selected, children) => {
   return found;
 };
 
-export const Dropdown = ({ selected, open, onSelect, onClick, children }) => {
+export const Dropdown = ({
+  selected,
+  open,
+  onSelect,
+  onClick,
+  buttonClass,
+  children,
+}) => {
   const transitionRef = useRef(null);
   const [displayed, setDisplayed] = useState(null);
   const onSelectCallback = useCallback(
@@ -60,7 +67,7 @@ export const Dropdown = ({ selected, open, onSelect, onClick, children }) => {
   return (
     <div className={styles.container}>
       <div
-        className={styles.button}
+        className={`${styles.button} ${buttonClass ?? ""}`}
         role="button"
         tabIndex="0"
         onClick={onClick}

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

@@ -71,6 +71,7 @@ const GameCreationForm = ({ afterCreate }) => {
 
   const countryLookup = useCountryLookup(genMethod);
 
+  const [presetOpen, setPresetOpen] = useState(false);
   const setPreset = useCallback(
     ({
       timer: newTimer,
@@ -128,31 +129,42 @@ const GameCreationForm = ({ afterCreate }) => {
         open={creationError}
         onClose={() => setCreationError(false)}
       />
-      <button className={styles.start} onClick={onCreateGame} type="button">
-        New Game
-      </button>
+      <div className={styles.buttoncontainer}>
+        <Dropdown
+          buttonClass={styles.favbutton}
+          selected={DEFAULTS}
+          onClick={() => setPresetOpen(o => !o)}
+          onSelect={v => {
+            setPresetOpen(false);
+            setPreset(v);
+          }}
+          open={presetOpen}
+        >
+          <Item value={DEFAULTS} display="⭐">
+            Default
+          </Item>
+          <Item value={PRESETS.URBAN_AMERICA} display="⭐">
+            Urban America
+          </Item>
+          <Item value={PRESETS.URBAN_GLOBAL} display="⭐">
+            Urban Global
+          </Item>
+          <Item value={PRESETS.FAST_FROZEN} display="⭐">
+            Fast Frozen
+          </Item>
+          <Item value={PRESETS.COUNTRY_RACE} display="⭐">
+            Country Race
+          </Item>
+          <Item value={PRESETS.FROZEN_COUNTRY_RACE} display="⭐">
+            Frozen Country Race
+          </Item>
+        </Dropdown>
+        <button className={styles.start} onClick={onCreateGame} type="button">
+          New Game
+        </button>
+      </div>
       <div className={styles.dropdowns}>
         <DropdownGroup>
-          <Dropdown selected={DEFAULTS} onSelect={setPreset} open="presets">
-            <Item value={DEFAULTS} display="⭐">
-              Default
-            </Item>
-            <Item value={PRESETS.URBAN_AMERICA} display="⭐">
-              Urban America
-            </Item>
-            <Item value={PRESETS.URBAN_GLOBAL} display="⭐">
-              Urban Global
-            </Item>
-            <Item value={PRESETS.FAST_FROZEN} display="⭐">
-              Fast Frozen
-            </Item>
-            <Item value={PRESETS.COUNTRY_RACE} display="⭐">
-              Country Race
-            </Item>
-            <Item value={PRESETS.FROZEN_COUNTRY_RACE} display="⭐">
-              Frozen Country Race
-            </Item>
-          </Dropdown>
           <Dropdown selected={timer} onSelect={setTimer} open="timer">
             <Item value={30} display={ms(30 * 1000)}>
               30 Seconds
@@ -228,13 +240,13 @@ const GameCreationForm = ({ afterCreate }) => {
             open="roundPointCap"
           >
             <Item value={null} display="♾️">
-              No limit
+              No Limit
             </Item>
             <Item value={10000} display="10k">
-              10k total points per round
+              10k Total Points per Round
             </Item>
             <Item value={20000} display="20k">
-              20k total points per round
+              20k Total Points per Round
             </Item>
           </Dropdown>
         </DropdownGroup>

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

@@ -8,6 +8,7 @@
 .dropdowns {
   width: 100%;
   flex: 3;
+  max-width: 350px;
   margin-top: 5px;
   display: flex;
   flex-flow: row wrap;
@@ -15,7 +16,25 @@
   align-items: flex-end;
 }
 
+.buttoncontainer {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0px 8px 8px 8px;
+  border-bottom: 4px solid #333;
+  margin-bottom: 12px;
+}
+
+.favbutton {
+  border-radius: 0%;
+  height: 24px;
+  width: 24px;
+  /* padding: 8px 8px 8px 8px; */
+}
+
 .start {
-  width: 100%;
-  flex: 1;
+  height: 100%;
+  flex: 3 1;
+  margin-bottom: 6px;
 }

client/src/tests/Dropdown.test.js

@@ -79,6 +79,15 @@ describe("Dropdown", () => {
     expect(rendered).toMatchSnapshot();
   });
 
+  it("passes button class", () => {
+    const onSelect = jest.fn();
+    const onClick = jest.fn();
+    const rendered = shallow(
+      <Dropdown buttonClass="test-button-class" {...{ onSelect, onClick }} />
+    );
+    expect(rendered).toMatchSnapshot();
+  });
+
   it("renders with no items", () => {
     const onSelect = jest.fn();
     const onClick = jest.fn();

client/src/tests/GameCreationForm.test.js

@@ -58,6 +58,13 @@ describe("GameCreationForm", () => {
     expect(rendered).toMatchSnapshot();
   });
 
+  it("can have the preset dropdown opened", () => {
+    useCountryLookup.mockReturnValue("country-lookup");
+    const rendered = shallow(<GameCreationForm />);
+    rendered.find("Dropdown").first().prop("onClick")();
+    expect(rendered).toMatchSnapshot();
+  });
+
   it("can have presets selected", () => {
     useCountryLookup.mockReturnValue("country-lookup");
     const rendered = shallow(<GameCreationForm />);

client/src/tests/__snapshots__/Dropdown.test.js.snap

@@ -193,12 +193,49 @@ exports[`CountryItem renders 1`] = `
 </div>
 `;
 
+exports[`Dropdown passes button class 1`] = `
+<div
+  className="container"
+>
+  <div
+    className="button test-button-class"
+    onClick={[MockFunction]}
+    onKeyDown={[Function]}
+    role="button"
+    tabIndex="0"
+  />
+  <CSSTransition
+    classNames={
+      Object {
+        "enter": "list-enter",
+        "enterActive": "list-enter-active",
+        "exit": "list-exit",
+        "exitActive": "list-exit-active",
+      }
+    }
+    mountOnEnter={true}
+    nodeRef={
+      Object {
+        "current": null,
+      }
+    }
+    timeout={200}
+    unmountOnExit={true}
+  >
+    <div
+      className="list"
+      role="menu"
+    />
+  </CSSTransition>
+</div>
+`;
+
 exports[`Dropdown renders closed 1`] = `
 <div
   className="container"
 >
   <div
-    className="button"
+    className="button "
     onClick={[MockFunction]}
     onKeyDown={[Function]}
     role="button"
@@ -235,7 +272,7 @@ exports[`Dropdown renders with items 1`] = `
   className="container"
 >
   <div
-    className="button"
+    className="button "
     onClick={[MockFunction]}
     onKeyDown={[Function]}
     role="button"
@@ -284,7 +321,7 @@ exports[`Dropdown renders with no items 1`] = `
   className="container"
 >
   <div
-    className="button"
+    className="button "
     onClick={[MockFunction]}
     onKeyDown={[Function]}
     role="button"
@@ -322,7 +359,7 @@ exports[`Dropdown responds to item selection 1`] = `
   className="container"
 >
   <div
-    className="button"
+    className="button "
     onClick={[MockFunction]}
     onKeyDown={[Function]}
     role="button"