Fix eslint warnings, update readme, tweaked colors and renamed home to about

src/components/Button.js

@@ -133,7 +133,6 @@ export const ToggleButton = styled(Button)`
   background-color: ${({ theme, toggle }) => (toggle ? theme.button.toggled.background : null)};
 `;
 
-// TODO: extract text shadow colors
 export const IconButton = styled(Button)`
   margin: 0 0.2rem;
   display: inline-block;

src/containers/About.js

@@ -1,10 +1,10 @@
 import React from "react";
 import Title from "../components/Title.js";
 
-export const Home = () => (
+export const About = () => (
   <React.Fragment>
-    <Title large>Home Page</Title>
+    <Title large>About Page</Title>
   </React.Fragment>
 );
 
-export default Home;
+export default About;

src/containers/App.js

@@ -13,7 +13,7 @@ import GlobalStyle from "../theming/GlobalStyle.js";
 import Header from "./Header";
 import Footer from "./Footer";
 import Page from "../components/Page";
-import Home from "./Home";
+import About from "./About";
 import Snake from "./Snake";
 
 const App = ({ theme }) => (
@@ -25,7 +25,7 @@ const App = ({ theme }) => (
         <Switch>
           <Route exact path="/" component={Snake} />
           <Route exact path="/snake" component={Snake} />
-          <Route exact path="/about" component={Home} />
+          <Route exact path="/about" component={About} />
         </Switch>
       </Page>
       <Footer />

src/redux/highscore.spec.js

@@ -79,7 +79,7 @@ test("Register highscore when there are more than 10 scores stored and the new s
   });
 });
 
-test("Register highscore when there are more than 10 scores stored and the new score has the same score as the current pos 10", () => {
+test("Register highscore where the new score has the same score as the current pos 10", () => {
   const result = reducers({ highscores }, registerHighscore({ name: "test", score: 70, gameId: 99 }));
   expect(result).toStrictEqual({
     highscores: [

src/redux/ui.js

@@ -2,7 +2,7 @@ import Module from "./Module.js";
 
 export const MODULE_NAME = "UI";
 export const initialState = {
-  theme: "light"
+  theme: "dark"
 };
 
 export const module = new Module(MODULE_NAME, initialState);

src/theming/themes/darkOcean.js

@@ -9,7 +9,7 @@ export const colors = {
   color: "#7094db",
   colorActive: "#ecb1c5",
   colorInactive: "#7d98d4",
-  colorAlternate: "#ecb1c5",
+  colorAlternate: "#a1c0fc",
   shadowColor: "#222",
   borderColor: "#222",
   borderColorActive: "silver",

src/theming/themes/light.js

@@ -9,7 +9,7 @@ export const colors = {
   color: "palevioletred",
   colorActive: "#ecb1c5",
   colorInactive: "#e6b4c4",
-  colorAlternate: "#ecb1c5",
+  colorAlternate: "#db6b91",
   shadowColor: "#d0bfa3",
   shadowColorx: "gray",
   borderColor: "gray",