Implement about page, updating readme file and inverse button color on banner

README.md

@@ -1,13 +1,26 @@
 # Crafity Snake
 
+Play snake in your browser with HTML 5. This game is developed using React with hooks and Redux. All the game state and highscores are stored in local storage.
+
+## Feature Technologies
+
+- React + React Router
+- Redux
+- Styled Components
+- Webpack + Babel
+- Jest
+- ESLint
+- pre-commit
+
 ## Todo
 
-[ ] Create welcome / instructions page / about page
-[ ] Link to repository
-[x] Add license
-[x] High score
-[ ] Docker build script
-[ ] Improve banner / popup windows
+[ ] Create welcome / instructions page / about page  
+[ ] Link to repository  
+[x] Add license  
+[x] High score  
+[ ] Docker build script  
+[ ] Improve banner / popup windows  
+[ ] Touch and mobile support
 
 ## License
 

src/containers/About.js

@@ -1,9 +1,59 @@
 import React from "react";
+import styled from "styled-components";
 import Title from "../components/Title.js";
 
+const Code = styled.code`
+  font-weight: bold;
+  color: white;
+`;
+
 export const About = () => (
   <React.Fragment>
-    <Title large>About Page</Title>
+    <Title large>About Crafity Snake</Title>
+    <p>Play snake in your browser using HTML 5 and Javascript.</p>
+    <Title>Introduction</Title>
+    <p>
+      This experiment has been created to test out React, Redux and Styled Components and see if it is possible to
+      create a simple web based game like snake. The source code for this game is open source and free to download and
+      change.
+    </p>
+    <p>
+      A couple of noticable features in this game are resumable game play using local storage. The page can be reloaded
+      or reopened any time and the game should continue from where it was left.
+    </p>
+    <Title>How to play</Title>
+    <p>
+      You control the snake using the arrow keys or the <Code>hjkl</Code> keys. Everytime the snake eats an apple the
+      tail of the snake grows longer. When the snake touches his own body the game is over.
+    </p>
+    <p>
+      Other keys to control the game are <Code>r</Code> to (re)start the game. The <Code>s</Code> key to stop the game
+      and <Code>p</Code> to pause the game.
+    </p>
+    <Title>Technology</Title>
+    <p>Snake has been developed with the folowing technologies.</p>
+    <ul>
+      <li>React + React Router</li>
+      <li>Redux</li>
+      <li>Styled Components</li>
+      <li>Webpack + Babel</li>
+      <li>Jest</li>
+      <li>ESLint</li>
+      <li>pre-commit</li>
+      <li>Docker</li>
+    </ul>
+    <Title>Source Code</Title>
+    <p>The source code is hosted on Crafity&apos;s git repositories at the following location:</p>
+    <p>
+      <a href="https://git.crafity.com">Crafity Snake</a>
+    </p>
+    <p>After donwloading the source code run the following commands:</p>
+    <p>
+      <Code>npm install</Code>
+    </p>
+    <p>
+      <Code>npm run dev</Code>
+    </p>
   </React.Fragment>
 );
 

src/containers/Snake.js

@@ -90,9 +90,13 @@ const Snake = ({
           </Stage>
           {!started && (
             <Banner fade>
-              <p>Press &apos;r&apos; to start the game</p>
+              <p>
+                Press &apos;<b>r</b>&apos; to start the game
+              </p>
               <ButtonContainer>
-                <Button onClick={startSnake}>Start</Button>
+                <Button inverse onClick={startSnake}>
+                  Start
+                </Button>
               </ButtonContainer>
             </Banner>
           )}