styles changes; fix expired link

io.js

@@ -13,7 +13,7 @@ io.sockets.on('connection', socket => {
   socket.on('start', data => {
     let token;
     const b = new Buffer(Math.random() + new Date().getTime() + socket.id);
-    token = b.toString('base64').slice(12, 32);
+    token = b.toString('base64').slice(12, 28);
 
     // token is valid for 3 minutes
     const timeout = setTimeout(() => {

src/css/_layout.scss

@@ -103,7 +103,11 @@ footer {
 #footer {
   margin: 0 auto;
   max-width: 960px;
-  padding: 3em 2em 1em 2em; 
+  padding: 3em 1em 0; 
+}
+
+#container-wrapper, footer {
+  min-width: 480px;
 }
 
 .modal-mask {

src/css/main.scss

@@ -58,9 +58,10 @@
         display: block;
         line-height: 45px;
         padding-left: 0;
+        font-size: 1rem;
 
         &::before {
-          margin-left: -7em;
+          margin-left: -6em;
           margin-top: 0;
           right: auto;
         }
@@ -89,8 +90,8 @@
   header, #board-moves-wrapper, #sounds-label {
     max-width: 470px;
   }
-  #game-link {
-    font-size: 1rem;
+  #game-link, footer p, footer a {
+    font-size: .75rem;
   }
   ul#clock {
     width: 118px;

src/js/components/Index.js

@@ -7,7 +7,7 @@ import io from '../io';
 const Index = React.createClass({
   
   propTypes: {
-    io: React.PropTypes.object
+    io: React.PropTypes.object.isRequired
   },
 
   getInitialState() {
@@ -25,7 +25,8 @@ const Index = React.createClass({
       const {time, inc} = this.state;
 
       this.setState({
-        link: `${document.location.origin}/play/${data.token}/${time}/${inc}`
+        link: `${document.location.origin}/play/${data.token}/${time}/${inc}`,
+        hasExpired: false
       });
     });
     io.on('ready', () => {
@@ -85,7 +86,7 @@ const Index = React.createClass({
 
     if (isInvalid) {
       // fallback for old browsers
-      return window.alert('Form is invalid.');
+      return window.alert('Form is invalid. Enter numbers between 0 and 50.');
     } else {
       this.props.io.emit('start');
     }