better

src/css/_base.scss

@@ -1,3 +1,5 @@
+$white: #ffffff;
+$black: #000000;
 $dark-purple: #423443;
 $blue: #2eafc2;
 $red: #d12521;
@@ -89,8 +91,8 @@ button, input, select, textarea {
 }
 
 body, html {
-  color: #424242;
-  font-family: 'Open Sans', sans-serif;
+  color: #000;
+  font-family: Courier, Monaco, monospace;
   background: #fefefe;
   font-size: 16px;
   line-height: 1.5;
@@ -107,7 +109,7 @@ a {
   text-decoration: underline;
 
   &:hover { 
-    color: $blue;
+    color: $red;
     text-decoration: none; 
     transition: all 0.2s ease-in-out;
   }
@@ -127,11 +129,11 @@ strong {
 }
 
 h1 {
-  font-family: 'Cherry Swash', cursive;
+  font-family: Courier, Monaco, monospace;
   font-weight: 400;
   font-size: 2rem;
   text-align: center;
-  color: $dark-purple;
+  color: $black;
   margin-bottom: 0.5em;
 }
 
@@ -139,7 +141,7 @@ h2 {
   font-weight: 600;
   font-size: 1.5rem;
   margin: 1em 0 0.5em 0;
-  color: lighten($dark-purple, 5%);
+  color: black;
 }
 
 .clearfix { *zoom: 1;

src/css/_chat.scss

@@ -12,20 +12,20 @@
   }
 
   h4 {
-    font-family: 'Cherry Swash', cursive;
+  	 font-family: Courier, Monaco, monospace;
     font-size: 1.225rem;
     height: 3em;
     line-height: 3em;
     margin: 5px 5%;
     text-align: center;
-    color: $dark-purple;
+    color: $black;
   }
 
   a.close {
     position: absolute;
     top: 0;
     right: 0;
-    background: $dark-purple;
+    background: #424242;
     color: #fff;
     font-size: 1.125rem;
     padding: 0 7px;
@@ -36,7 +36,7 @@
 
     &:hover {
       text-decoration: none;
-      background: lighten($dark-purple, 5%);
+      background: lighten($black, 5%);
     }
   }
 
@@ -125,7 +125,7 @@
 
 #chat-icon {
   text-decoration: none;
-  color: darken($blue, 10%);
+  color: darken($grey, 10%);
   margin-right: 1em;
   line-height: 50px;
   height: 50px;
@@ -134,7 +134,7 @@
   font-weight: 600;
 
   &:hover {
-    color: darken($blue, 5%);
+    color: darken($red, 5%);
   }
   img {
     vertical-align: middle;

src/css/_chessboard.scss

@@ -10,21 +10,21 @@
   overflow-y: auto;
   width: 270px;
   height: 518px;
-  background: lighten($grey, 5%);
+  background: lighten($grey, 25%);
   box-shadow: inset 0 -4px $grey;
   margin-left: 10px;
   border-radius: 2px;
-  border-bottom: 4px solid $grey;
+  border: 1px solid $grey;
   display: block;
   float: left; 
 
   thead {
-    font-family: 'Cherry Swash', cursive;
+    font-family: Courier, Monaco, monospace;
     width: 270px;
     height: 3em;
     line-height: 3em;
     font-size: 1.225rem;
-    color: $dark-purple;
+    color: #424242;
     float: left;
     text-align: center;
 
@@ -59,7 +59,7 @@
 }
 
 .chessboard {
-  border: 8px solid lighten($dark-purple, 10%);
+  border: 8px solid lighten($black, 10%);
   border-radius: 2px;
   width: 500px;
   height: 500px;
@@ -82,8 +82,8 @@
       position: relative;
 
       &.moving, &.selected { background: lighten($red, 30%) !important; }
-      &.from { background: lighten($blue, 25%) !important; }
-      &.to { background: lighten($blue, 20%) !important; }
+      &.from { background: lighten($red, 35%) !important; }
+      &.to { background: lighten($red, 30%) !important; }
       &.droppable::after {
         position: absolute;
         content: "";

src/css/_index.scss

@@ -6,7 +6,7 @@
 #create-game {
   width: 100%;
   height: 200px;
-  margin: 5em auto 0;
+  margin: 3em auto 0;
 
   fieldset {
     border: 0;
@@ -15,6 +15,7 @@
     width: 80%;
 
     input {
+		margin-top: 1em;
       margin-left: 1em;
       width: 100px;
       outline: none;
@@ -23,8 +24,7 @@
       padding-left: 1em;
       font-size: 1.125rem;
       color: #424242;
-      border: 2px solid #2b222c;
-      border-left: 4px solid #2eafc2;
+      border: 1px solid #000000;
     }
 
     label {
@@ -32,7 +32,7 @@
 
       &::before {
         position: absolute;
-        content: 'Up to 50';
+        content: '';
         top: 0;
         right: 2em;
         margin-top: -2.5em;
@@ -47,20 +47,16 @@
   height: 50px;
   line-height: 50px;
   font-size: 1.125rem;
-  color: #fff;
-  border: 0;
-  border-bottom: 2px solid darken($dark-purple, 8%);
-  border-left: 4px solid $blue;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
-  background: $dark-purple;
+  color: black;
+  border: 2px solid black;
+  background: $white;
   padding: 0 1em;
-  float: left;
+  float: right;
   border-radius: 2px;
-  box-shadow: inset 0 -2px darken($dark-purple, 8%);
 
   &:hover {
-    background: lighten($dark-purple, 3%);
-    border-bottom: 2px solid darken($dark-purple, 3%);;
+    background: lighten($white, 3%);
+    border-bottom: 2px solid darken($black, 3%);;
     box-shadow: inset 0 -2px darken($dark-purple, 3%);
     transition: all 0.2s ease-in-out;
   }
@@ -70,7 +66,7 @@
 }
 
 #game-status {
-  font-family: 'Cherry Swash', cursive;
+  font-family: Courier, Monaco, monospace;
   font-size: 1.275rem;
   color: darken($red, 5%);
   width: 100%;

src/css/_layout.scss

@@ -36,20 +36,18 @@ input:required {
   display: block;
   font-size: 1.125rem;
   border-radius: 2px;
-  border: 0;
-  border-bottom: 2px solid darken($blue, 5%);
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
-  background: $blue;
-  color: white;
+  border: 2px solid black;
+  background: $white;
+  color: black;
   cursor: pointer;
   float: right;
-  box-shadow: inset 0 -2px darken($blue, 5%);
+  box-shadow: inset 0 -2px darken($white, 5%);
   position: relative;
 
   &:hover {
-    background: lighten($blue, 5%);
-    border-bottom: 2px solid darken($blue, 2%);
-    box-shadow: inset 0 -2px darken($blue, 2%);
+    background: lighten($red, 5%);
+    border-bottom: 2px solid darken($red, 2%);
+    box-shadow: inset 0 -2px darken($red, 2%);
     transition: all 0.2s ease-in-out;
   }
   &:active {
@@ -152,7 +150,7 @@ footer {
   left: 50%;
   margin-left: -210px;
   margin-top: -90px;
-  border: 8px solid lighten($dark-purple, 10%);
+  border: 3px solid lighten($black, 10%);
   box-shadow: 0 10px 30px #333;
   cursor: auto;
   z-index: 15;

src/css/main.scss

@@ -105,7 +105,7 @@
     padding: 1em 5px;
   }
   .chessboard {
-    border: 4px solid lighten($dark-purple, 10%);
+    border: 4px solid lighten($black, 10%);
     width: 456px;
     height: 456px;
     

src/img/chat.svg

@@ -1,35 +1,16 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-
-<!-- The icon can be used freely in both personal and commercial projects with no attribution required, but always appreciated. 
-You may NOT sub-license, resell, rent, redistribute or otherwise transfer the icon without express written permission from iconmonstr.com -->
-
-
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-
-	 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
-
-<path id="speech-bubble-14-icon" fill="#299cad" d="M440.704,391.771C454.312,375.362,462,354.216,462,332.679c0-35.26-19.864-65.01-49.435-83.766
-
-	c4.186-13.053,6.395-26.594,6.395-40.27c0-90.207-87.645-155.312-184.479-155.312C137.037,53.331,50,118.929,50,208.644
-
-	c0,31.822,11.358,63.066,31.465,87.309c0.849,28.41-15.719,69.156-30.643,98.842c39.998-7.295,96.866-23.416,122.654-39.357
-
-	c15.134,3.717,29.826,6.027,44.007,7.1c17.877,50.588,80.211,89.32,160.944,69.494c17.455,10.789,55.943,21.699,83.016,26.639
-
-	C451.342,438.577,440.129,410.999,440.704,391.771z M172.431,318.04c-34.595,20.203-65.042,28.264-65.042,28.264
-
-	s10.299-27.762,14.588-59.699c-21.101-21.508-36.05-43.32-36.05-77.961c0-65.83,66.641-119.387,148.554-119.387
-
-	c81.912,0,148.554,53.557,148.554,119.387C383.034,276.784,304.718,353.12,172.431,318.04z M418.856,421.499
-
-	c0,0-19.577-5.182-41.82-18.172c-65.705,17.422-110.659-7.877-127.746-40.469c70.42-4.076,124.766-40.012,151.465-87.078
-
-	c19.564,14.066,31.901,34.5,31.901,57.207c0,22.273-9.612,36.297-23.179,50.127C412.234,403.649,418.856,421.499,418.856,421.499z"
-
-	/>
-
-</svg>
-
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-223 65 512 512" style="enable-background:new -223 65 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#ABABAB;}
+</style>
+<path id="speech-bubble-14-icon" class="st0" d="M217.7,456.8c13.6-16.4,21.3-37.6,21.3-59.1c0-35.3-19.9-65-49.4-83.8
+	c4.2-13.1,6.4-26.6,6.4-40.3c0-90.2-87.6-155.3-184.5-155.3C-86,118.3-173,183.9-173,273.6c0,31.8,11.4,63.1,31.5,87.3
+	c0.8,28.4-15.7,69.2-30.6,98.8c40-7.3,96.9-23.4,122.7-39.4c15.1,3.7,29.8,6,44,7.1c17.9,50.6,80.2,89.3,160.9,69.5
+	c17.5,10.8,55.9,21.7,83,26.6C228.3,503.6,217.1,476,217.7,456.8z M-50.6,383c-34.6,20.2-65,28.3-65,28.3s10.3-27.8,14.6-59.7
+	c-21.1-21.5-36-43.3-36-78c0-65.8,66.6-119.4,148.6-119.4c81.9,0,148.6,53.6,148.6,119.4C160,341.8,81.7,418.1-50.6,383z
+	 M195.9,486.5c0,0-19.6-5.2-41.8-18.2c-65.7,17.4-110.7-7.9-127.7-40.5c70.4-4.1,124.8-40,151.5-87.1c19.6,14.1,31.9,34.5,31.9,57.2
+	c0,22.3-9.6,36.3-23.2,50.1C189.2,468.6,195.9,486.5,195.9,486.5z"/>
+</svg>

src/js/components/Chat.js

@@ -41,7 +41,6 @@ const Chat = React.createClass({
       <div id="chat-wrapper"
            className={this.state.isChatHidden ? 'hidden' : null}>
         
-        <h4>Chat</h4>
         <a className="close"
            onClick={ChatActions.toggleVisibility}>
           x
@@ -59,7 +58,7 @@ const Chat = React.createClass({
           )).toArray()}
         </ul>
         
-        <span>Write your message:</span>
+        <span>message:</span>
         
         <form id="chat-form"
               onSubmit={this._submitMessage}>

src/js/components/CreateGameForm.js

@@ -14,9 +14,16 @@ const CreateGameForm = React.createClass({
   render() {
     return (
       <form onSubmit={this.props.createGame}>
+			<input
+			 id="game-link"
+			 type="text"
+			 value={this.props.link || ''}
+			 onClick={e => e.target.select()}
+			 readOnly />
+			<button type="submit" className="btn">OK</button>
         <fieldset>
-          <label>
-            <span>Minutes per side: </span>
+          <label style={{paddingLeft: '2em'}}>
+            <span>minutes: </span>
             <input
               type="number"
               name="time"
@@ -27,7 +34,7 @@ const CreateGameForm = React.createClass({
               required />
           </label>
           <label style={{paddingLeft: '2em'}}>
-            <span>Increment in seconds: </span>
+            <span>increment: </span>
             <input
               type="number"
               name="inc"
@@ -38,13 +45,7 @@ const CreateGameForm = React.createClass({
               required />
           </label>
         </fieldset>
-        <input
-          id="game-link"
-          type="text"
-          value={this.props.link || 'Game link will be generated here.'}
-          onClick={e => e.target.select()}
-          readOnly />
-        <button type="submit" className="btn">Play</button>
+
       </form>
     );
   }

src/js/components/Index.js

@@ -59,7 +59,7 @@ const Index = React.createClass({
             {this.state.hasExpired ?
               'Game link has expired, generate a new one'
             :this.state.link ?
-              'Waiting for opponent to connect'
+              'Waiting for player to connect...'
             :null}
           </p>
         </div>

src/js/components/TableOfMoves.js

@@ -16,11 +16,6 @@ const TableOfMoves = React.createClass({
   render() {
     return (
       <table id="moves" className="clearfix">
-        <thead>
-          <tr>
-            <th>Table of moves</th>
-          </tr>
-        </thead>
         <tbody>
           {this.state.moves.map((row, i) => (
             <tr key={i}>