style RoomDetail component

packages/play-node-go/src/components/Display/RoomDetail/RoomDetail.scss

@@ -1 +1,32 @@
 @import '../../../../public/stylesheets/partials/mixins';
+@import '../../../../public/stylesheets/partials/variables';
+
+div.RoomDetail {
+  display: grid;
+  grid-template-columns: [left] 1fr [right];
+  grid-template-rows: [top] 1fr [middle] 9fr [bottom];
+  height: 20vh;
+  padding: 1vw;
+  width: 20vh;
+
+  div.RoomDetail__arrow {
+    border-top: map-get($colors, 'home') solid 2vh;
+    border-left: white solid 1.5vh;
+    height: 0;
+  }
+
+  div.RoomDetail__data {
+    background-color: white;
+    height: 90%;
+    width: 100%;
+    padding: 1vh;
+    display: grid;
+    grid-template-rows: 2fr 3fr;
+
+    .RoomDetail__heading {
+      display: flex;
+      flex-flow: row wrap;
+      align-items: flex-start;
+    }
+  }
+}

packages/play-node-go/src/index.scss

@@ -46,6 +46,15 @@ code {
     monospace;
 }
 
+h3 {
+  font-size: 140%;
+  font-weight: 600;
+}
+
+h4 {
+  font-size: 110%;
+}
+
 a:hover, a:active {
   text-decoration: underline;
 }

packages/play-node-go/src/pages/Home/Home.js

@@ -8,7 +8,7 @@ import Loading from '../../components/Display/Loading/Loading';
 const Home = props => {
   const state =     props.state || {};
   const dispatch =  props.dispatch;
-  const [ roomDetail, setRoomDetail ] = useState(0);
+  const [ roomDetail, setRoomDetail ] = useState(1);
 
   const showRoomDetail = id => roomDetail === id ? setRoomDetail(0) : setRoomDetail(id);