Add GitHub corner instead of menu link

README.md

@@ -8,6 +8,13 @@ JavaScript Design Patterns - a game to get familiar with the design patterns, te
 
 <img src="https://raw.githubusercontent.com/zoltantothcom/JavaScript-Design-Patterns/master/static/screenshot.png?sanitize=true&raw=true" alt="JavaScript Design Patterns - game results screenshot" />
 
+- [About](#about)
+- [How To Run Locally](#how-to-run-locally)
+- [Running the Tests](#running-the-tests)
+- [ToDo](#todo)
+- [Credits](#credits)
+- [License](#license)
+
 ## About
 
 This is a small game to get you familiar with all the 23 Gang of Four design patterns implemented in JavaScript.
@@ -44,7 +51,7 @@ This is a small game to get you familiar with all the 23 Gang of Four design pat
 - Template
 - Visitor
 
-## Run it locally
+## How To Run Locally
 
 1. Clone this repo
 
@@ -70,9 +77,9 @@ yarn
 yarn start
 ```
 
-5. Voila! The project is running on `http://localhost:8080`
+5. Voila! The project is running on [http://localhost:8080](http://localhost:8080)
 
-## Tests
+## Running the Tests
 
 - To run the tests
 
@@ -86,7 +93,7 @@ yarn test
 yarn test:coverage
 ```
 
-## TODO
+## ToDo
 
 - Write more unit tests
 - Add E2E tests (Cypress)

__tests__/Layout.test.js

@@ -64,8 +64,8 @@ describe('Layout', () => {
       expect(tree.find('Header').text()).toMatch('JavaScript Design Patterns');
     });
 
-    it('renders 3 links', () => {
-      expect(tree.find('a')).toHaveLength(3);
+    it('renders 2 links', () => {
+      expect(tree.find('a')).toHaveLength(2);
     });
 
     it('renders 2 toggle buttons', () => {
@@ -102,8 +102,8 @@ describe('Layout', () => {
       expect(tree.find('Header').text()).toMatch('JavaScript Design Patterns');
     });
 
-    it('renders 3 links', () => {
-      expect(tree.find('a')).toHaveLength(3);
+    it('renders 2 links', () => {
+      expect(tree.find('a')).toHaveLength(2);
     });
 
     it('renders 2 toggle buttons', () => {

__tests__/components/__snapshots__/Header.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Header /> component renders with DARK theme 1`] = `
-.c5 {
+.c4 {
   background-color: #222222;
   border: 1px solid #484848;
   border-radius: 50%;
@@ -13,41 +13,41 @@ exports[`<Header /> component renders with DARK theme 1`] = `
   width: 2.5rem;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: #484848;
 }
 
-.c5:hover svg,
-.c5:hover g {
+.c4:hover svg,
+.c4:hover g {
   fill: #ffffff;
 }
 
-.c5.active {
+.c4.active {
   background-color: #e22a23;
   border-color: #e22a23;
 }
 
-.c5.active svg,
-.c5.active g {
+.c4.active svg,
+.c4.active g {
   fill: #ffffff;
 }
 
-.c5.light {
+.c4.light {
   background-color: #ffffff;
   border-color: #c4c4c4;
 }
 
-.c5.light svg,
-.c5.light g {
+.c4.light svg,
+.c4.light g {
   fill: #707070;
 }
 
-.c5.light:hover svg,
-.c5.light:hover g {
+.c4.light:hover svg,
+.c4.light:hover g {
   fill: #707070;
 }
 
-.c6 {
+.c5 {
   font-family: 'Karla',sans-serif;
   padding: 1.5rem;
   border-radius: 4px;
@@ -70,10 +70,10 @@ exports[`<Header /> component renders with DARK theme 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
+  -webkit-box-pack: start;
+  -webkit-justify-content: start;
+  -ms-flex-pack: start;
+  justify-content: start;
   margin-top: 1rem;
 }
 
@@ -84,7 +84,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
   display: inline-flex;
 }
 
-.c4 {
+.c3 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -110,23 +110,13 @@ exports[`<Header /> component renders with DARK theme 1`] = `
   color: #f5f5f5;
 }
 
-.c3 {
-  border-bottom: 1px solid transparent;
-  color: #888888;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  font-size: 0.875rem;
-  margin: 0.5rem 2rem 0 0;
-  padding-bottom: 1px;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c3:hover {
-  border-bottom: 1px solid #f5f5f5;
-  color: #f5f5f5;
+@media (min-width:769px) {
+  .c0 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
 }
 
 <div>
@@ -150,19 +140,12 @@ exports[`<Header /> component renders with DARK theme 1`] = `
       >
         About
       </a>
-      <a
-        className="c3"
-        href="//github.com/zoltantothcom/javascript-patterns"
-        target="_blank"
-      >
-        GitHub
-      </a>
     </div>
     <div
-      className="c4"
+      className="c3"
     >
       <button
-        className="c5"
+        className="c4"
         onClick={[Function]}
       >
         <svg
@@ -189,7 +172,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
         </svg>
       </button>
       <button
-        className="c5"
+        className="c4"
         onClick={[Function]}
       >
         <svg
@@ -211,7 +194,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
       </button>
     </div>
     <h1
-      className="c6"
+      className="c5"
     >
       JavaScript Design Patterns
     </h1>
@@ -220,7 +203,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
 `;
 
 exports[`<Header /> component renders with LIGHT theme 1`] = `
-.c5 {
+.c4 {
   background-color: #f4f4f4;
   border: 1px solid #e8e8e8;
   border-radius: 50%;
@@ -232,41 +215,41 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
   width: 2.5rem;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: #e8e8e8;
 }
 
-.c5:hover svg,
-.c5:hover g {
+.c4:hover svg,
+.c4:hover g {
   fill: #ffffff;
 }
 
-.c5.active {
+.c4.active {
   background-color: #e22a23;
   border-color: #e22a23;
 }
 
-.c5.active svg,
-.c5.active g {
+.c4.active svg,
+.c4.active g {
   fill: #ffffff;
 }
 
-.c5.light {
+.c4.light {
   background-color: #ffffff;
   border-color: #aaaaaa;
 }
 
-.c5.light svg,
-.c5.light g {
+.c4.light svg,
+.c4.light g {
   fill: #cccccc;
 }
 
-.c5.light:hover svg,
-.c5.light:hover g {
+.c4.light:hover svg,
+.c4.light:hover g {
   fill: #cccccc;
 }
 
-.c6 {
+.c5 {
   font-family: 'Karla',sans-serif;
   padding: 1.5rem;
   border-radius: 4px;
@@ -289,10 +272,10 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
+  -webkit-box-pack: start;
+  -webkit-justify-content: start;
+  -ms-flex-pack: start;
+  justify-content: start;
   margin-top: 1rem;
 }
 
@@ -303,7 +286,7 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
   display: inline-flex;
 }
 
-.c4 {
+.c3 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -329,23 +312,13 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
   color: #707070;
 }
 
-.c3 {
-  border-bottom: 1px solid transparent;
-  color: #e22a23;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  font-size: 0.875rem;
-  margin: 0.5rem 2rem 0 0;
-  padding-bottom: 1px;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c3:hover {
-  border-bottom: 1px solid #707070;
-  color: #707070;
+@media (min-width:769px) {
+  .c0 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
 }
 
 <div>
@@ -369,19 +342,12 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
       >
         About
       </a>
-      <a
-        className="c3"
-        href="//github.com/zoltantothcom/javascript-patterns"
-        target="_blank"
-      >
-        GitHub
-      </a>
     </div>
     <div
-      className="c4"
+      className="c3"
     >
       <button
-        className="c5"
+        className="c4"
         onClick={[Function]}
       >
         <svg
@@ -408,7 +374,7 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
         </svg>
       </button>
       <button
-        className="c5"
+        className="c4"
         onClick={[Function]}
       >
         <svg
@@ -430,7 +396,7 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
       </button>
     </div>
     <h1
-      className="c6"
+      className="c5"
     >
       JavaScript Design Patterns
     </h1>