Splitting the styling into multiple files

client/src/App.css

@@ -14,53 +14,12 @@
   justify-content: space-between;
 }
 
-.header {
-  display: block;
-  text-align: center;
-}
-
-.footer {
-  display: block;
-  text-align: center;
-}
-
 .loading {
   text-align: center;
 }
 
-.click-to-copy {
-  position: relative;
-  display: inline-flex;
-  justify-content: center;
-}
-
-.click-to-copy__text {
-  border-bottom: 1px dashed black;
-}
-
-.click-to-copy__tooltip {
-  background-color: black;
-  color: white;
-  text-align: center;
-  padding: 2px 8px;
-  border-radius: 8px;
-  position: absolute;
-  z-index: 1;
-  top: -115%;
-  white-space: nowrap;
-  transition: opacity 0.25s;
-  opacity: 0;
-}
-
-.click-to-copy__tooltip--visible {
-  opacity: 0.75;
-}
-
-.click-to-copy__textarea {
-  position: absolute;
-  top: -10000px;
-  z-index: -10000;
-  opacity: 0;
+.App .click-to-copy__text {
+  border-bottom: 1px dashed #ccc;
 }
 
 .btn {
@@ -84,398 +43,7 @@
   border: black solid 1px;
 }
 
-.join-game-form {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: center;
-}
-
-.join-game-form__label {
-  padding: 0.1em;
-}
-
-.join-game-form__input {
-  padding: 0.5em;
-}
-
-.join-game-form__btn {
-  margin: 0.1em;
-}
-
-.player-name-form {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: center;
-}
-
-.player-name-form__label {
-  padding: 0.2em;
-}
-
-.player-name-form__input {
-  padding: 0.5em;
-}
-
-.new-game {
-  display: flex;
-  flex-flow: column-reverse nowrap;
-  justify-content: space-between;
-}
-
-.new-game__dropdown {
-  position: relative;
-  display: inline-block;
-  margin-top: 5px;
-}
-
-.new-game__dropdown-button {
-  text-align: center;
-  padding: 4px;
-  background-color: #555;
-  color: #fff;
-  cursor: pointer;
-  font-weight: 600;
-}
-
-.new-game__dropdown-items {
-  display: none;
-  position: absolute;
-  background-color: #333;
-  width: 100%;
-  z-index: 1;
-}
-
-.new-game__dropdown-items .new-game__dropdown-option {
-  padding: 12px 16px;
-  display: block;
-  cursor: pointer;
-}
-
-.new-game__dropdown-items .new-game__dropdown-option:hover {
-  background-color: #555;
-}
-
-.new-game__dropdown:hover .new-game__dropdown-items {
-  display: block;
-}
-
-.new-game__dropdown:hover .new-game__dropdown-button {
-  background-color: #333;
-}
-
-
-.new-game__btn {
-  display: inline;
-}
-
-.pre-game {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: space-around;
-  align-items: center;
-}
-
-.pre-game__divider {
-  margin-left: 75px;
-  margin-right: 75px;
-  align-self: stretch;
-}
-
-@media only screen and (min-width: 600px) {
-  .pre-game {
-    flex-flow: row nowrap;
-    justify-content: space-around;
-  }
-
-  .pre-game__divider {
-    margin-left: 0;
-    margin-right: 0;
-    align-self: stretch;
-  }
-}
-
-.pre-round {
-  flex: 1;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: center;
-}
-
-.pre-round__name-label {
-  padding: 0.2em;
-}
-
-.pre-round__game-code {
-  padding: 0.2em;
-  margin-bottom: 0.3em;
-}
-
-.pre-round__button {
-  padding: 1em;
-  margin: 0.2em;
-}
-
-.round-summary {
-  flex: 1;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: space-around;
-  align-items: center;
-}
-
-.round-summary__info-pane {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: space-between;
-  align-items: center;
-}
-
-@media only screen and (min-width: 600px) {
-  .round-summary {
-    flex-flow: row nowrap;
-  }
-  
-  .round-summary__info-pane {
-    margin-left: 10px;
-    align-items: flex-start;
-  }
-}
-
-.round-summary__map {
-  height: 50%;
-  width: 50%;
-}
-
-.round-summary__guess {
-  display: inline;
-}
-
-.round-summary__guess--timed-out {
-  color: red;
-}
-
-.round-summary__target-point {
-  display: inline;
-}
-
-.round-summary__round-score {
-  display: inline;
-}
-
-.round-summary__total-score {
-  display: inline;
-}
-
-.round-summary__button {
-  margin-top: 5px;
-  padding: 1em;
-}
-
-.player-scores {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: space-around;
-  align-items: center;
-}
-
-.player-scores__score-board {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-around;
-  align-items: center;
-  align-content: space-around;
-}
-
-.player-scores__score-tile {
-  flex: 1;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-start;
-  align-items: center;
-}
-
-.player-scores__player-name {
-  display: inline;
-}
-
-.player-scores__total-score {
-  display: inline;
-}
-
-.player-scores__round-score-list {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: flex-start;
-  margin-bottom: 20%;
-}
-
-.player-scores__round-score {
-  flex: 1;
-}
-
-.player-scores__button {
-  display: inline;
-}
-
-.game-panel {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.game-panel__streetview {
-  height: 100%;
-  width: 100%;
-  margin-bottom: 2px;
-  flex: 3;
-}
-
-.guess-pane {
-  height: 100%;
-  width: 100%;
-  flex: 1;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-around;
-}
-
-.guess-pane__map {
-  flex: 3;
-  height: 100%;
-  width: 100%;
-}
-
-.guess-pane__timer-submit-wrapper {
-  flex: 1;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  text-align: center;
-}
-
-.guess-pane__submit {
-  flex: 1;
-  margin: 2px;
-}
-
-@media only screen and (min-width: 600px) and (min-height: 600px) {
-  .game-panel {
-    display: block;
-    position: relative;
-  }
-
-  .game-panel {
-    margin-bottom: 2px;
-    margin-right: 2px;
-  }
-
-  .guess-pane {
-    position: absolute;
-    left: 10px;
-    bottom: 10px;
-    height: 200px;
-    width: 200px;
-    flex-flow: column-reverse nowrap;
-    z-index: 1;
-    opacity: .75;
-    transition: 1s;
-  }
-
-  .guess-pane__map {
-    opacity: .75;
-    transition: 1s;
-  }
-
-  .guess-pane__map:hover {
-    opacity: 1;
-  }
-
-  .guess-pane__timer-submit-wrapper {
-    flex-flow: column-reverse nowrap;
-  }
-
-  .guess-pane>.guess-pane__timer-submit-wrapper>.guess-pane__submit {
-    visibility: hidden;
-    opacity: 0;
-    transition: 1s;
-  }
-
-  .guess-pane:hover>.guess-pane__timer-submit-wrapper>.guess-pane__submit {
-    visibility: visible;
-    opacity: 1;
-    transition: 0.5s;
-  }
-
-  .guess-pane:hover {
-    height: 400px;
-    width: 400px;
-    opacity: 1;
-    transition: 0.5s;
-  }
-
-  .guess-pane__timer-submit-wrapper {
-    margin-top: 4px;
-    color: #fff;
-  }
-
-  .guess-pane__submit {
-    margin: 0px;
-    margin-bottom: 5px;
-  }
-}
-
-.timer {
-  background-color: #333;
-  padding: 1px;
-  display: inline;
-}
-
-.timer__time {
-  display: inline-block;
-}
-
-.timer--timeout {
-  color: red;
-}
-
 .map-div {
   height: 100%;
   width: 100%;
 }
-
-.streetview-pane {
-  position: relative;
-  height: 100%;
-  width: 100%;
-}
-
-.streetview-pane__pano-div {
-  height: 100%;
-  width: 100%
-}
-
-.streetview-pane__reset-button {
-  /* TODO improve this to be less brittle */
-  display: block;
-  position: absolute;
-  z-index: 1;
-  bottom: 200px;
-  right: 9px;
-  background-color: #222;
-  color: #666;
-  padding: 5px;
-  border-radius: 2px;
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.streetview-pane__reset-button:hover {
-  color: #b1b1b1;
-}

client/src/components/Game/Game.css

@@ -0,0 +1,9 @@
+.header {
+  display: block;
+  text-align: center;
+}
+
+.footer {
+  display: block;
+  text-align: center;
+}

client/src/components/Game/index.js

@@ -1 +1,2 @@
+import "./Game.css";
 export { default } from "./Game";

client/src/components/screens/GamePanel/GamePanel.css

@@ -0,0 +1,143 @@
+.game-panel {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.game-panel__streetview {
+  height: 100%;
+  width: 100%;
+  margin-bottom: 2px;
+  flex: 3;
+}
+
+.guess-pane {
+  height: 100%;
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-around;
+}
+
+.guess-pane__map {
+  flex: 3;
+  height: 100%;
+  width: 100%;
+}
+
+.guess-pane__timer-submit-wrapper {
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  text-align: center;
+}
+
+.guess-pane__submit {
+  flex: 1;
+  margin: 2px;
+}
+
+@media only screen and (min-width: 600px) and (min-height: 600px) {
+  .game-panel {
+    display: block;
+    position: relative;
+  }
+
+  .game-panel {
+    margin-bottom: 2px;
+    margin-right: 2px;
+  }
+
+  .guess-pane {
+    position: absolute;
+    left: 10px;
+    bottom: 10px;
+    height: 200px;
+    width: 200px;
+    flex-flow: column-reverse nowrap;
+    z-index: 1;
+    opacity: .75;
+    transition: 1s;
+  }
+
+  .guess-pane__map {
+    opacity: .75;
+    transition: 1s;
+  }
+
+  .guess-pane__map:hover {
+    opacity: 1;
+  }
+
+  .guess-pane__timer-submit-wrapper {
+    flex-flow: column-reverse nowrap;
+  }
+
+  .guess-pane__timer-submit-wrapper>.timer {
+    background-color: #333;
+  }
+
+  .guess-pane>.guess-pane__timer-submit-wrapper>.guess-pane__submit {
+    visibility: hidden;
+    opacity: 0;
+    transition: 1s;
+  }
+
+  .guess-pane:hover>.guess-pane__timer-submit-wrapper>.guess-pane__submit {
+    visibility: visible;
+    opacity: 1;
+    transition: 0.5s;
+  }
+
+  .guess-pane:hover {
+    height: 400px;
+    width: 400px;
+    opacity: 1;
+    transition: 0.5s;
+  }
+
+  .guess-pane__timer-submit-wrapper {
+    margin-top: 4px;
+    color: #fff;
+  }
+
+  .guess-pane__submit {
+    margin: 0px;
+    margin-bottom: 5px;
+  }
+}
+
+.streetview-pane {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.streetview-pane__pano-div {
+  height: 100%;
+  width: 100%
+}
+
+.streetview-pane__reset-button {
+  /* TODO improve this to be less brittle */
+  display: block;
+  position: absolute;
+  z-index: 1;
+  bottom: 200px;
+  right: 9px;
+  background-color: #222;
+  color: #666;
+  padding: 5px;
+  border-radius: 2px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.streetview-pane__reset-button:hover {
+  color: #b1b1b1;
+}

client/src/components/screens/GamePanel/index.js

@@ -1 +1,2 @@
+import "./GamePanel.css";
 export { default } from './GamePanel';

client/src/components/screens/PlayerScores/PlayerScores.css

@@ -0,0 +1,46 @@
+.player-scores {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.player-scores__score-board {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+  align-items: center;
+  align-content: space-around;
+}
+
+.player-scores__score-tile {
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.player-scores__player-name {
+  display: inline;
+}
+
+.player-scores__total-score {
+  display: inline;
+}
+
+.player-scores__round-score-list {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: flex-start;
+  margin-bottom: 20%;
+}
+
+.player-scores__round-score {
+  flex: 1;
+}
+
+.player-scores__button {
+  display: inline;
+}

client/src/components/screens/PlayerScores/index.js

@@ -1 +1,2 @@
+import "./PlayerScores.css";
 export { default } from './PlayerScores';

client/src/components/screens/PreGame/PreGame.css

@@ -0,0 +1,112 @@
+
+.join-game-form {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.join-game-form__label {
+  padding: 0.1em;
+}
+
+.join-game-form__input {
+  padding: 0.5em;
+}
+
+.join-game-form__btn {
+  margin: 0.1em;
+}
+
+.player-name-form {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.player-name-form__label {
+  padding: 0.2em;
+}
+
+.player-name-form__input {
+  padding: 0.5em;
+}
+
+.new-game {
+  display: flex;
+  flex-flow: column-reverse nowrap;
+  justify-content: space-between;
+}
+
+.new-game__dropdown {
+  position: relative;
+  display: inline-block;
+  margin-top: 5px;
+}
+
+.new-game__dropdown-button {
+  text-align: center;
+  padding: 4px;
+  background-color: #555;
+  color: #fff;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.new-game__dropdown-items {
+  display: none;
+  position: absolute;
+  background-color: #333;
+  width: 100%;
+  z-index: 1;
+}
+
+.new-game__dropdown-items .new-game__dropdown-option {
+  padding: 12px 16px;
+  display: block;
+  cursor: pointer;
+}
+
+.new-game__dropdown-items .new-game__dropdown-option:hover {
+  background-color: #555;
+}
+
+.new-game__dropdown:hover .new-game__dropdown-items {
+  display: block;
+}
+
+.new-game__dropdown:hover .new-game__dropdown-button {
+  background-color: #333;
+}
+
+
+.new-game__btn {
+  display: inline;
+}
+
+.pre-game {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.pre-game__divider {
+  margin-left: 75px;
+  margin-right: 75px;
+  align-self: stretch;
+}
+
+@media only screen and (min-width: 600px) {
+  .pre-game {
+    flex-flow: row nowrap;
+    justify-content: space-around;
+  }
+
+  .pre-game__divider {
+    margin-left: 0;
+    margin-right: 0;
+    align-self: stretch;
+  }
+}

client/src/components/screens/PreGame/index.js

@@ -1 +1,2 @@
+import "./PreGame.css";
 export { default } from './PreGame';

client/src/components/screens/PreRound/PreRound.css

@@ -0,0 +1,21 @@
+.pre-round {
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.pre-round__name-label {
+  padding: 0.2em;
+}
+
+.pre-round__game-code {
+  padding: 0.2em;
+  margin-bottom: 0.3em;
+}
+
+.pre-round__button {
+  padding: 1em;
+  margin: 0.2em;
+}

client/src/components/screens/PreRound.jsx → client/src/components/screens/PreRound/PreRound.jsx

@@ -1,6 +1,6 @@
 import React from "react";
-import ClickToCopy from "../util/ClickToCopy";
-import Button from "../util/Button";
+import ClickToCopy from "../../util/ClickToCopy";
+import Button from "../../util/Button";
 
 const PreRound = ({ gameId, playerName, onStart }) => (
   <div className="pre-round">

client/src/components/screens/PreRound/index.js

@@ -0,0 +1,2 @@
+import "./PreRound.css";
+export { default } from './PreRound';

client/src/components/screens/RoundSummary/RoundSummary.css

@@ -0,0 +1,55 @@
+.round-summary {
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.round-summary__info-pane {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+@media only screen and (min-width: 600px) {
+  .round-summary {
+    flex-flow: row nowrap;
+  }
+  
+  .round-summary__info-pane {
+    margin-left: 10px;
+    align-items: flex-start;
+  }
+}
+
+.round-summary__map {
+  height: 50%;
+  width: 50%;
+}
+
+.round-summary__guess {
+  display: inline;
+}
+
+.round-summary__guess--timed-out {
+  color: red;
+}
+
+.round-summary__target-point {
+  display: inline;
+}
+
+.round-summary__round-score {
+  display: inline;
+}
+
+.round-summary__total-score {
+  display: inline;
+}
+
+.round-summary__button {
+  margin-top: 5px;
+  padding: 1em;
+}

client/src/components/screens/RoundSummary/index.js

@@ -1 +1,2 @@
+import "./RoundSummary.css";
 export { default } from './RoundSummary';

client/src/components/util/ClickToCopy/ClickToCopy.css

@@ -0,0 +1,34 @@
+.click-to-copy {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+}
+
+.click-to-copy__text {
+  border-bottom: 1px dashed black;
+}
+
+.click-to-copy__tooltip {
+  background-color: black;
+  color: white;
+  text-align: center;
+  padding: 2px 8px;
+  border-radius: 8px;
+  position: absolute;
+  z-index: 1;
+  top: -115%;
+  white-space: nowrap;
+  transition: opacity 0.25s;
+  opacity: 0;
+}
+
+.click-to-copy__tooltip--visible {
+  opacity: 0.75;
+}
+
+.click-to-copy__textarea {
+  position: absolute;
+  top: -10000px;
+  z-index: -10000;
+  opacity: 0;
+}

client/src/components/util/ClickToCopy/index.js

@@ -1 +1,2 @@
+import "./ClickToCopy.css";
 export { default } from './ClickToCopy';

client/src/components/util/Timer/Timer.css

@@ -0,0 +1,12 @@
+.timer {
+  padding: 1px;
+  display: inline;
+}
+
+.timer__time {
+  display: inline-block;
+}
+
+.timer--timeout {
+  color: red;
+}

client/src/components/util/Timer/index.js

@@ -1 +1,2 @@
+import "./Timer.css";
 export { default } from './Timer';