Restyling the GameCreationForm and summary page

client/src/components/screens/HomePage.jsx

@@ -7,11 +7,9 @@ import DelayedButton from '../util/DelayedButton';
 
 const Container = styled.div`
   height: 100%;
-  margin-top: 30vh;
-  margin-bottom: 10vh;
   display: flex;
   flex-flow: column nowrap;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
 `;
 

client/src/components/screens/PlayerScores/LinkedGame.jsx

@@ -8,7 +8,6 @@ import GameCreationForm from '../../util/GameCreationForm';
 const LinkedGameContainer = styled.div`
   display: flex;
   justify-content: center;
-  width: 100%;
   margin-top: 1em;
   margin-bottom: 1em;
 `

client/src/components/screens/PlayerScores/PlayerScores.jsx

@@ -16,6 +16,18 @@ const Container = styled.div`
   height: 100%;
 `
 
+const TopRow = styled.div`
+  display: flex;
+  flex-flow: column nowrap;
+  width: 100%;
+  justify-content: space-around;
+  align-items: center;
+
+  @media only screen and (min-width: 600px) and (min-height: 600px) {
+    flex-flow: row nowrap;
+  }
+`
+
 const Label = styled.span`
   padding: 0.2em;
   margin-bottom: 0.5em;
@@ -38,9 +50,11 @@ export default () => {
 
   return (
     <Container>
-      <SummaryMap {...{ players, coords }}/>
+      <TopRow>
+        <SummaryMap {...{ players, coords }}/>
+        <LinkedGame {...{ linkedGame, gameId }} />
+      </TopRow>
       <ScoreBoard {...{ players }} />
-      <LinkedGame {...{ linkedGame, gameId }} />
       <Label><ClickToCopy text={summaryURL.href}>Click here to copy a link to this summary!</ClickToCopy></Label>
     </Container>
   );

client/src/components/screens/PlayerScores/SummaryMap.jsx

@@ -4,7 +4,6 @@ import useMap from '../../../hooks/useMap';
 import useMarkersFromGuesses from '../../../hooks/useMarkersFromGuesses';
 
 const RoundSelectContainer = styled.div`
-  /* background-color: #444; */
   height: 100%;
   display: flex;
   flex-flow: column wrap;
@@ -14,7 +13,7 @@ const RoundSelectContainer = styled.div`
 `;
 
 const RoundSelectButton = styled.div`
-  background-color: ${({active}) => active ? "#777" : "#555"};
+  background-color: ${({active}) => active ? "#888" : "#555"};
   height: 2em;
   width: 2em;
   margin-top: 1px;
@@ -29,14 +28,17 @@ const RoundSelectButton = styled.div`
 const ResetRoundSelectButton = styled(RoundSelectButton).attrs({
   active: false,
 })`
+  width: calc(2em - 2px);
+  margin-left: 2px;
   margin-top: auto;
   margin-bottom: 0px;
+  border-radius: 20%;
 `;
 
 const MapDiv = styled.div`
   height: 100%;
   width: 60vw;
-  border: #555 solid 2px;
+  border: #888 solid 4px;
 `;
 
 const MapContainer = styled.div`

client/src/components/util/Dropdown.jsx

@@ -2,10 +2,10 @@ import React from "react";
 import styled from "styled-components";
 
 const Dropdown = styled.div`
-  flex: 1;
+  width: 100%;
+  margin-bottom: 5px;
   position: relative;
   display: inline-block;
-  margin: 5px 5px 5px 5px;
 `
 
 const DropdownButton = styled.div`

client/src/components/util/GameCreationForm.jsx

@@ -9,23 +9,23 @@ import { MAP_CRUNCH, RANDOM_STREET_VIEW } from "../../domain/genMethods";
 
 const Container = styled.div`
   display: flex;
-  flex-flow: column-reverse nowrap;
+  flex-flow: row nowrap;
   justify-content: space-between;
-  width: 50%;
   align-self: center;
 `
 
 const DropdownContainer = styled.div`
+  flex: 3;
+  margin-right: 5px;
   display: flex;
-  flex-flow: row nowrap;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
 `;
 
 const StartButton = styled(Button)`
+  flex: 1;
   margin-bottom: 5px;
-  width: 100%;
 `
 
 export default ({ afterCreate }) => {
@@ -92,7 +92,7 @@ export default ({ afterCreate }) => {
         </Dropdown>
       </DropdownContainer>
       <StartButton onClick={onCreateGame}>
-        Create New Game
+        New Game
       </StartButton>
     </Container>
   );