Removing App.css (still need to put map-div into the map comps

client/src/App.css

@@ -1,24 +0,0 @@
-#root {
-  position: absolute;
-  width: 100% !important;
-  height: 100% !important;
-}
-
-.App {
-  background-color: #222;
-  color: #ccc;
-  font-weight: 500;
-  height: 100%;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: space-between;
-}
-
-.loading {
-  text-align: center;
-}
-
-.map-div {
-  height: 100%;
-  width: 100%;
-}

client/src/App.js

@@ -1,14 +1,19 @@
 import React from 'react';
+import styled from 'styled-components';
 import Game from "./components/Game";
-import './App.css';
 
+const Wrapper = styled.div`
+  background-color: #222;
+  color: #ccc;
+  font-weight: 500;
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+`
 
-const App = () => {
-  return (
-    <div className="App">
-      <Game/>
-    </div>
-  );
-}
-
-export default App;
+export default () => (
+  <Wrapper>
+    <Game/>
+  </Wrapper>
+);

client/src/components/util/Loading.jsx

@@ -1,5 +1,10 @@
 import React from "react";
+import styled from "styled-components";
 
-const Loading = () => <div className="loading">Loading...</div>
+const Container = styled.div`
+  text-align: center;
+`
+
+const Loading = () => <Container>Loading...</Container>
 
 export default Loading;

client/src/index.css

@@ -11,3 +11,14 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+#root {
+  position: absolute;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.map-div {
+  height: 100%;
+  width: 100%;
+}