Fix styling

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

@@ -40,7 +40,7 @@ export const findSelectedDisplay = (selected, children) => {
     }
   });
   return found;
-}
+};
 
 export const Dropdown = ({ selected, open, onSelect, onClick, children }) => {
   const transitionRef = useRef(null);
@@ -52,7 +52,10 @@ export const Dropdown = ({ selected, open, onSelect, onClick, children }) => {
     },
     [onSelect]
   );
-  useEffect(() => setDisplayed(d => findSelectedDisplay(selected, children) ?? d), [children, selected]);
+  useEffect(
+    () => setDisplayed(d => findSelectedDisplay(selected, children) ?? d),
+    [children, selected]
+  );
 
   return (
     <div className={styles.container}>
@@ -109,7 +112,7 @@ export const CountryItem = ({ code, country, onSelect }) => (
   >
     {flagLookup(code)} - {country}
   </div>
-)
+);
 
 export const CountryDropdown = ({
   countryLookup,
@@ -172,8 +175,19 @@ export const CountryDropdown = ({
               }
             }}
           />
-          {found.map(({ item: { country, alpha2 } }) => <CountryItem key={alpha2} code={alpha2} country={country}onSelect={onSelectCallback} />)}
-          <CountryItem code={null} country="All Countries" onSelect={onSelectCallback} />
+          {found.map(({ item: { country, alpha2 } }) => (
+            <CountryItem
+              key={alpha2}
+              code={alpha2}
+              country={country}
+              onSelect={onSelectCallback}
+            />
+          ))}
+          <CountryItem
+            code={null}
+            country="All Countries"
+            onSelect={onSelectCallback}
+          />
         </div>
       </CSSTransition>
     </div>

client/src/tests/Dropdown.test.js

@@ -157,36 +157,44 @@ describe("Dropdown", () => {
     });
 
     it("extracts the display of the selected element", () => {
-      expect(findSelectedDisplay("two", [
-        <Item display="1" value="one" />,
-        <Item display="2" value="two" />,
-        <Item display="3" value="three" />,
-      ])).toBe("2");
+      expect(
+        findSelectedDisplay("two", [
+          <Item display="1" value="one" />,
+          <Item display="2" value="two" />,
+          <Item display="3" value="three" />,
+        ])
+      ).toBe("2");
     });
 
     it("extracts the value of the selected element if there is no display", () => {
-      expect(findSelectedDisplay("two", [
-        <Item value="one" />,
-        <Item value="two" />,
-        <Item value="three" />,
-      ])).toBe("two");
+      expect(
+        findSelectedDisplay("two", [
+          <Item value="one" />,
+          <Item value="two" />,
+          <Item value="three" />,
+        ])
+      ).toBe("two");
     });
 
     it("returns null if there is no matching element", () => {
-      expect(findSelectedDisplay("four", [
-        <Item value="one" />,
-        <Item value="two" />,
-        <Item value="three" />,
-      ])).toBeNull();
+      expect(
+        findSelectedDisplay("four", [
+          <Item value="one" />,
+          <Item value="two" />,
+          <Item value="three" />,
+        ])
+      ).toBeNull();
     });
 
     it("returns the first display found if there is more than one matching element", () => {
-      expect(findSelectedDisplay("two", [
-        <Item display="1" value="one" />,
-        <Item display="2" value="two" />,
-        <Item display="3" value="three" />,
-        <Item display="4" value="two" />,
-      ])).toBe("2");
+      expect(
+        findSelectedDisplay("two", [
+          <Item display="1" value="one" />,
+          <Item display="2" value="two" />,
+          <Item display="3" value="three" />,
+          <Item display="4" value="two" />,
+        ])
+      ).toBe("2");
     });
   });
 });
@@ -194,7 +202,9 @@ describe("Dropdown", () => {
 describe("CountryItem", () => {
   it("renders", () => {
     flagLookup.mockReturnValue("flag");
-    const rendered = shallow(<CountryItem code="test-code" country="test-country" />);
+    const rendered = shallow(
+      <CountryItem code="test-code" country="test-country" />
+    );
     expect(rendered).toMatchSnapshot();
     expect(flagLookup).toHaveBeenCalledWith("test-code");
   });
@@ -202,7 +212,13 @@ describe("CountryItem", () => {
   it("responds to click", () => {
     flagLookup.mockReturnValue("flag");
     const onSelect = jest.fn();
-    const rendered = shallow(<CountryItem onSelect={onSelect} code="test-code" country="test-country" />);
+    const rendered = shallow(
+      <CountryItem
+        onSelect={onSelect}
+        code="test-code"
+        country="test-country"
+      />
+    );
     rendered.simulate("click");
     expect(onSelect).toHaveBeenCalledWith("test-code");
   });
@@ -210,19 +226,31 @@ describe("CountryItem", () => {
   it("responds to keydown Enter", () => {
     flagLookup.mockReturnValue("flag");
     const onSelect = jest.fn();
-    const rendered = shallow(<CountryItem onSelect={onSelect} code="test-code" country="test-country" />);
-    rendered.simulate("keydown", { key:"Enter"});
+    const rendered = shallow(
+      <CountryItem
+        onSelect={onSelect}
+        code="test-code"
+        country="test-country"
+      />
+    );
+    rendered.simulate("keydown", { key: "Enter" });
     expect(onSelect).toHaveBeenCalledWith("test-code");
   });
 
   it("responds to click", () => {
     flagLookup.mockReturnValue("flag");
     const onSelect = jest.fn();
-    const rendered = shallow(<CountryItem onSelect={onSelect} code="test-code" country="test-country" />);
-    rendered.simulate("keydown", { key:"Escape"});
+    const rendered = shallow(
+      <CountryItem
+        onSelect={onSelect}
+        code="test-code"
+        country="test-country"
+      />
+    );
+    rendered.simulate("keydown", { key: "Escape" });
     expect(onSelect).not.toHaveBeenCalled();
   });
-})
+});
 
 describe("CountryDropdown", () => {
   it("renders closed", () => {