Merge pull request #72 from zoltantothcom/dev

Minor content and style changes

Author: zoltantothcom

README.md

@@ -4,7 +4,7 @@
 
 Design Patterns - a quick game to test your familiarity with the 'Gang of Four' design patterns implemented in JS.
 
-### :zap: [PLAY HERE](http://designpatternsgame.com/)
+### :zap: [PLAY HERE](https://designpatternsgame.com/)
 
 ![Design Patterns - game results screenshot](/static/screenshot.png?sanitize=true&raw=true)
 

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

@@ -53,7 +53,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
 }
 
 .c8 {
-  font: 400 0.925rem 'Karla',sans-serif;
+  font: 400 0.875rem 'Karla',sans-serif;
   color: #C8C8C8;
   margin: 0.75rem 0 0;
 }
@@ -226,7 +226,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
       <h2
         className="c8"
       >
-        implemented in JavaScript
+        “Gang of Four” patterns in JavaScript
       </h2>
     </div>
   </header>
@@ -286,7 +286,7 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
 }
 
 .c8 {
-  font: 400 0.925rem 'Karla',sans-serif;
+  font: 400 0.875rem 'Karla',sans-serif;
   color: #6F256F;
   margin: 0.75rem 0 0;
 }
@@ -459,7 +459,7 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
       <h2
         className="c8"
       >
-        implemented in JavaScript
+        “Gang of Four” patterns in JavaScript
       </h2>
     </div>
   </header>

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

@@ -16,6 +16,11 @@ exports[`REFERENCE - Patterns List renders all the patterns 1`] = `
   margin-top: 2.5rem;
 }
 
+.c0 h3 {
+  border-bottom: 1px solid;
+  padding-bottom: 1rem;
+}
+
 <div
   className="c0"
 >

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

@@ -18,7 +18,7 @@ exports[`<Title /> component renders with a DARK theme 1`] = `
 }
 
 .c2 {
-  font: 400 0.925rem 'Karla',sans-serif;
+  font: 400 0.875rem 'Karla',sans-serif;
   color: #C8C8C8;
   margin: 0.75rem 0 0;
 }
@@ -34,7 +34,7 @@ exports[`<Title /> component renders with a DARK theme 1`] = `
   <h2
     className="c2"
   >
-    implemented in JavaScript
+    “Gang of Four” patterns in JavaScript
   </h2>
 </div>
 `;
@@ -57,7 +57,7 @@ exports[`<Title /> component renders with a LIGHT theme 1`] = `
 }
 
 .c2 {
-  font: 400 0.925rem 'Karla',sans-serif;
+  font: 400 0.875rem 'Karla',sans-serif;
   color: #6F256F;
   margin: 0.75rem 0 0;
 }
@@ -73,7 +73,7 @@ exports[`<Title /> component renders with a LIGHT theme 1`] = `
   <h2
     className="c2"
   >
-    implemented in JavaScript
+    “Gang of Four” patterns in JavaScript
   </h2>
 </div>
 `;

__tests__/pages/__snapshots__/About.test.js.snap

@@ -16,7 +16,7 @@ exports[`About page renders with a DARK theme 1`] = `
 }
 
 .c1 {
-  color: #888888;
+  color: #F5F5F5;
   margin-top: 2rem;
 }
 

__tests__/pages/__snapshots__/Patterns.test.js.snap

@@ -16,6 +16,11 @@ exports[`Patterns page renders the Patterns list 1`] = `
   margin-top: 2.5rem;
 }
 
+.c0 h3 {
+  border-bottom: 1px solid;
+  padding-bottom: 1rem;
+}
+
 <div
   className="c0"
 >

package.json

@@ -1,7 +1,6 @@
 {
-  "name": "javascript-patterns",
-  "version": "0.1.0",
-  "private": true,
+  "name": "design-patterns-game",
+  "version": "1.0.0",
   "dependencies": {
     "prop-types": "^15.7.2",
     "react": "^16.8.6",

src/components/PatternsList.jsx

@@ -21,6 +21,12 @@ const StyledPatterns = styled.div`
     color: ${props => props.theme.header};
     margin-top: 2.5rem;
   }
+
+  h3 {
+    border-bottom: 1px solid ${props => props.theme.text};
+    color: ${props => props.theme.header};
+    padding-bottom: 1rem;
+  }
 `;
 
 const PatternsList = () => {

src/components/Title.jsx

@@ -18,15 +18,15 @@ const Heading = styled.h1`
 `;
 
 const SubHeading = styled.h2`
-  font: 400 0.925rem 'Karla', sans-serif;
+  font: 400 0.875rem 'Karla', sans-serif;
   color: ${props => props.theme.link};
   margin: 0.75rem 0 0;
 `;
 
 export const Title = () => (
   <TitleContainer>
     <Heading>Design Patterns Game</Heading>
-    <SubHeading>implemented in JavaScript</SubHeading>
+    <SubHeading>&ldquo;Gang of Four&rdquo; patterns in JavaScript</SubHeading>
   </TitleContainer>
 );
 

src/styles/themes/theme.dark.js

@@ -36,7 +36,7 @@ export const themeDark = {
   toggleActiveBorder: C.SILVER,
 
   // text and header
-  header: C.GRAY,
+  header: C.WILD_SAND,
   text: C.SILVER,
 
   border: C.TUNDORA