stub nav form styles and fix board span bug

play-node-go/src/components/Button/Library/Library.js

@@ -3,9 +3,15 @@ import './Library.scss';
 
 const LibraryButton = () => {
   return (
-    <>
+    <div 
-      Library
+      className="nav__section" 
-    </>
+    >
+      <p 
+        className="nav__section__label"
+      >
+        Library
+      </p>
+    </div>
   );
 }
 

play-node-go/src/components/Button/NewGame/NewGame.js

@@ -3,9 +3,15 @@ import './NewGame.scss';
 
 const NewGameButton = () => {
   return (
-    <>
+    <div 
-      New Game
+      className="nav__section" 
-    </>
+    >
+      <p 
+        className="nav__section__label"
+      >
+        New Game
+      </p>
+    </div>
   );
 }
 

play-node-go/src/components/Button/NewRoom/NewRoom.js

@@ -2,10 +2,16 @@ import React from 'react';
 import './NewRoom.scss';
 
 const NewRoomButton = () => {
-  return (  
+  return (
-    <>
+    <div 
-      New Room
+      className="nav__section" 
-    </>
+    >
+      <p 
+        className="nav__section__label"
+      >
+        New Room
+      </p>
+    </div>
   );
 }
 

play-node-go/src/components/Button/RoomArchive/RoomArchive.js

@@ -3,9 +3,15 @@ import './RoomArchive.scss';
 
 const RoomArchiveButton = () => {
   return (
-    <>
+    <div 
-      Room Archive
+      className="nav__section" 
-    </>
+    >
+      <p 
+        className="nav__section__label"
+      >
+        Room Archive
+      </p>
+    </div>
   );
 }
 

play-node-go/src/components/Display/Loading/Loading.scss

@@ -3,6 +3,9 @@ div.Loading {
   display: flex;
   flex-flow: row wrap;
   height: 6vw;
+  left: 47vw;
+  position: absolute;
+  top: 45vh;
   width: 6vw;
 
   div.point {

play-node-go/src/components/Form/Auth/Auth.js

@@ -9,25 +9,35 @@ const Auth = (props) => {
 
   return (
     <>
-      <p 
+      <div 
-        className="auth-label" 
+        className="nav__section nav__section--auth" 
         onClick={()=>{setShowForm('login')}}
-      >Login</p>
+      >
-      {
+        <p 
-        showForm === 'login' 
+          className="nav__section__label"
-        ? <Login dispatch={dispatch} state={state}/> 
+        >Login</p>
-        : <></>
-      }
 
-      <p 
+        {
-        className="auth-label" 
+          showForm === 'login' 
+          ? <Login dispatch={dispatch} state={state}/> 
+          : <></>
+        }
+      </div>
+
+      <div
+        className="nav__section nav__section--auth" 
         onClick={()=>{setShowForm('signup')}}
-      >Signup</p>
+      >
+        <p 
+          className="nav__section__label"
+        >Signup</p>
+
       {
         showForm === 'signup' 
         ? <Signup dispatch={dispatch} state={state}/> 
         : <></>
       }
+      </div>
     </>
   );
 }

play-node-go/src/components/Form/FindGame/FindGame.js

@@ -3,9 +3,15 @@ import './FindGame.scss';
 
 const FindGameForm = () => {
   return (
-    <>
+    <div 
-      Find Game
+      className="nav__section" 
-    </>
+    >
+      <p 
+        className="nav__section__label"
+      >
+        Find Game
+      </p>
+    </div>
   );
 }
 

play-node-go/src/components/Form/FindRoom/FindRoom.js

@@ -3,10 +3,16 @@ import './FindRoom.scss';
 
 const FindRoomForm = () => {
   return (
-    <>
+    <div 
-      Find Room
+      className="nav__section" 
-    </>
+    >
-    );
+      <p 
+        className="nav__section__label"
+      >
+        Find Room
+      </p>
+    </div>
+  );
 }
- 
+
 export default FindRoomForm;

play-node-go/src/components/GameUI/Board/Board.scss

@@ -50,8 +50,10 @@ div.Game__board {
       height: 5vmin;
       
       @media #{map-get($break-points, "590")} {
-        height: 3.5vh;
+        height: 2.6vw;
-        width: 3.5vh;
+        width: 2.6vw;
+        max-width: 3.5vh;
+        max-height: 3.5vh;
       }
     }
   }

play-node-go/src/components/GameUI/PlayerArea/PlayerArea.scss

@@ -2,11 +2,12 @@
 @import '../../../../public/stylesheets/partials/mixins';
 
 div.player-container {
-  display: flex;
   align-items: flex-end;
-  justify-content: space-around;
+  display: flex;
   flex: 5;
   height: 9vmin;
+  justify-content: space-around;
+  margin: 1em;
   width: 100%;
   
   &:last-child {
@@ -20,40 +21,40 @@ div.player-container {
   }
   
   div.player-container__bowl {
-    order: -1;
+    align-items: center;
-    margin: 4vh;
-    height: 15vh;
-    width: 15vh;
-    border-radius: 50%;
-    background-color: rgb(116, 48, 17);
     background: radial-gradient(farthest-corner at 48% 54%, rgba(30, 5, 0, 0.25) 0%, rgba(30, 5, 0, 0.45) 2%, rgba(30, 5, 0, 0.75) 32%, rgba(0,0,0,0.85)35%, rgb(116,48,17) 48%, rgb(140, 60, 40) 52%, rgb(100, 40, 5) 55%, rgb(116, 48, 17) 58%, rgb(140,60,40) 65%, rgb(100, 40, 5) 80%, rgb(80, 20, 0) 90%);
+    background-color: rgb(116, 48, 17);
+    border-radius: 50%;
     box-shadow: -1vmin 2vmin 1.5vmin rgba(83, 53, 35, 0.61);
     display: flex;
-    align-items: center;
+    height: 15vh;
     justify-content: center;
+    margin: 4vh;
+    order: -1;
+    width: 15vh;
 
     @media #{map-get($break-points, "570")} {
-      margin: 3vh;
       height: 10vh;
+      margin: 3vh;
       width: 10vh;
     }
     
     &[data-turn]:hover p {
-      display: block;
-      color: #FFF;
       background-color: rgba(0,0,0,0.3);
-      padding: .5em;
+      color: #FFF;
       cursor: grab;
+      display: block;
+      padding: .5em;
     }
     &[data-turn] {
       box-shadow: 0 0 3vh 3vh rgb(255, 175, 2);
         
       & + .player-container__name-space .player-container__caps-space:hover :first-child {
-        display: block;
-        position: absolute;
         background-color: rgba(0,0,0,0.7);
-        padding: .5em;
         cursor: grab;
+        display: block;
+        padding: .5em;
+        position: absolute;
       }
     }
 
@@ -64,20 +65,20 @@ div.player-container {
 }
 
 div.player-container__caps-space {
-  color: #FFF;
-  margin: 1vh;
-  height: 10vh;
-  width: 10vh;
-  border-radius: 50%;
-  background: radial-gradient(farthest-side at 49% 52%, rgb(150, 75, 50) 0%, rgb(116,48,17) 35%, rgb(116,48,17) 64%, rgb(80, 20, 0) 65%, rgb(175, 140, 95) 70%, rgb(120, 50, 40) 80%, rgb(80, 20, 0) 95%, rgb(175, 140, 95) 100%);
-  box-shadow: -0.5vmin 1vmin 1vmin rgba(83, 53, 35, 0.61);
-  display: flex;
   align-items: center;
+  background: radial-gradient(farthest-side at 49% 52%, rgb(150, 75, 50) 0%, rgb(116,48,17) 35%, rgb(116,48,17) 64%, rgb(80, 20, 0) 65%, rgb(175, 140, 95) 70%, rgb(120, 50, 40) 80%, rgb(80, 20, 0) 95%, rgb(175, 140, 95) 100%);
+  border-radius: 50%;
+  box-shadow: -0.5vmin 1vmin 1vmin rgba(83, 53, 35, 0.61);
+  color: #FFF;
+  display: flex;
+  height: 10vh;
   justify-content: center;
+  margin: 1vh;
+  width: 10vh;
   
   @media #{map-get($break-points, "570")} {
-    margin: 2vh;
     height: 7vh;
+    margin: 2vh;
     width: 7vh;
   }
 
@@ -87,10 +88,10 @@ div.player-container__caps-space {
 }
 
 div.player-container__name-space {
-  order: 1;
-  display: flex;
-  flex-direction: column;
   align-items: center;
+  flex-direction: column;
+  display: flex;
+  order: 1;
   
   h4 {
     @include gameViewLabel;

play-node-go/src/pages/Layout/Sidebar/Sidebar.scss

@@ -1,5 +1,41 @@
 @import '../../../../public/stylesheets/partials/variables';
 
 aside {
-  color: map-get($colors, "sidebar_link")
+  color: map-get($colors, "sidebar_link");
+  display: flex;
+  flex-flow: column nowrap;
+
+  nav {
+    align-items: stretch;
+    display: flex;
+    flex-flow: column nowrap;
+  }
+
+  h3 {
+    font-size: 130%;
+    margin: .2em auto;
+    text-transform: capitalize;
+  }
+
+  input {
+    display: block;
+    margin: .2em 0 .2em auto;
+  }
+  
+  div.nav__section {
+    border: rgba(100,100,100,0.5) solid .25em;
+    margin: .5em;
+    padding: .75em .5em;
+  }
+
+  p.nav__section__label {
+    font-size: 110%;
+    margin-bottom: .5em;
+    text-decoration: none;
+    
+    &:hover {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
 }

play-node-go/src/pages/Room/Room.js

@@ -81,8 +81,6 @@ const Room = (props) => {
     <div className="Room" data-testid="Room">
     
       <div className="Room__heading">
-        <h2 className="heading--two">{state.currentRoom ? state.currentRoom.name : 'Loading'}</h2>
-        {/* <span className="Room__connection">{socket ? '✓' : ' ⃠'}</span> */}
         {state.errors.joinGame ? <ActionError error={state.errors.joinGame}/> : <></>}
       </div>
 

play-node-go/src/pages/Room/Room.scss

@@ -11,12 +11,18 @@ div.Room {
   width: 100%;
   height: 100%;
 
-  h2 {
+  div.Room__heading {
-    justify-self:stretch;
+    align-self: center;
-    align-self: flex-start;
+    height: 100%;
-    width: 100%;
+    position: sticky;
-    max-height: 5vh;
+    top: 1em;
+    z-index: 3;
     
+    span.error--action {
+      padding: 1em;
+      background-color: map-get($colors, "error");
+      color: white;
+    }
   }
 
   div.Room__game-container {

play-node-go/src/pages/Room/RoomSidebar.js

@@ -19,6 +19,7 @@ const RoomSidebar = props => {
 
   return (  
     <nav>
+      <h3>{ state.currentRoom.name }</h3>
       {showAuth()}
       <FindGameForm />
       <NewGameButton />