Footer and credits page done

public/css/index.css

@@ -190,7 +190,7 @@ header .account-preview .full-name.show {
 }
 .word .counter {
   font-size: 40pt;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Helvetica, sans-serif;
   margin-left: 3vw;
 }
 
@@ -239,7 +239,7 @@ header .account-preview .full-name.show {
 .categories-container .categories button, .categories-container .categories select {
   height: 10vh;
   width: 50vw;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Helvetica, sans-serif;
   font-size: 22pt;
   border: none;
   border-radius: 10px;
@@ -390,7 +390,7 @@ header .account-preview .full-name.show {
   }
 }
 .defeat, .victory {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Helvetica, sans-serif;
   position: absolute;
   left: 0;
   top: 0;
@@ -473,7 +473,7 @@ header .account-preview .full-name.show {
 }
 
 .form-container {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Helvetica, sans-serif;
 }
 .form-container .message {
   padding: 4vh 5vw;
@@ -709,7 +709,7 @@ header .account-preview .full-name.show {
 .control-panel .action-form form textarea {
   resize: none;
   outline: none;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Helvetica, sans-serif;
 }
 .control-panel .action-form form input[type=submit] {
   font-size: 12pt;
@@ -725,7 +725,7 @@ header .account-preview .full-name.show {
 }
 .control-panel .action-form form input[type=text] {
   height: 5vh;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Helvetica, sans-serif;
   font-size: 1.2vw;
   outline: none;
   border: none;
@@ -1011,5 +1011,23 @@ header.demo h1 span.demoSpan:hover, header.demo h1 span.demoSpan:focus, header.d
     height: 7vw;
   }
 }
+.made-with-love a {
+  color: #ff8787;
+}
+
+.made-with-love {
+  color: #b9b9b9;
+  margin-top: auto;
+  width: 100%;
+  padding-top: 5vh;
+  padding-bottom: 5vh;
+  padding-left: 3vw;
+  box-sizing: border-box;
+}
+
+.credits {
+  font-family: "Helveltica", sans-serif;
+  font-weight: 400;
+}
 
 /*# sourceMappingURL=index.css.map */

public/sass/_categories.scss

@@ -30,7 +30,7 @@
             height: 10vh;
             width: 50vw;
             
-            font-family: Arial, Helvetica, sans-serif;
+            font-family: Helvetica, sans-serif;
             font-size: 22pt;
 
             border: none;

public/sass/_credits.scss

@@ -0,0 +1,4 @@
+.credits {
+
+    @include bodyFont();
+}

public/sass/_defeat-victory.scss

@@ -1,5 +1,5 @@
 .defeat, .victory {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Helvetica, sans-serif;
     position: absolute;
     left: 0;
     top: 0;

public/sass/_footer.scss

@@ -0,0 +1,15 @@
+.made-with-love a {
+    color: #ff8787
+  }
+  
+  .made-with-love {
+    color:rgb(185, 185, 185);
+    margin-top: auto;
+    width: 100%;
+
+    padding-top: 5vh;
+    padding-bottom: 5vh;
+    padding-left: 3vw;
+
+    box-sizing: border-box;
+  }

public/sass/_identify.scss

@@ -1,6 +1,6 @@
 .form-container {
 
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Helvetica, sans-serif;
 
     @import './control-panel/message';
 

public/sass/_word.scss

@@ -30,7 +30,7 @@
     .counter {
         font-size: 40pt;
 
-        font-family:Arial, Helvetica, sans-serif;
+        font-family: Helvetica, sans-serif;
 
         margin-left: 3vw;
     }

public/sass/control-panel/_action-form.scss

@@ -32,7 +32,7 @@
             resize: none;
             outline: none;
 
-            font-family: Arial, Helvetica, sans-serif;
+            font-family: Helvetica, sans-serif;
         }
 
         input[type="submit"] {
@@ -59,7 +59,7 @@
         input[type="text"] {
 
             height: 5vh;
-            font-family: Arial, Helvetica, sans-serif;
+            font-family: Helvetica, sans-serif;
             font-size: 1.2vw;
 
             outline: none;

public/sass/index.scss

@@ -32,3 +32,5 @@ html, body {
 @import './control-panelDemo/demo-message';
 @import './control-panelDemo/admin-header-demo.scss';
 @import './info-account/info-account';
+@import 'footer';
+@import 'credits';

src/App.js

@@ -17,6 +17,8 @@ import AdminIdentify from "./components/Admin/AdminIdentify/AdminIdentify";
 import DemoControlPanel from "./components/Demo Admin/Control Panel/DemoControlPanel";
 import PasswordRecovery from "./components/Admin/AdminIdentify/Identify/PasswordRecovery/PasswordRecovery";
 import AccountInfo from "./components/Admin/Account/AccountInfo/AccountInfo";
+import Footer from "./components/Footer/Footer";
+import Credits from "./components/Footer/Credits/Credits";
 
 function App() {
   return (
@@ -54,13 +56,19 @@ function App() {
 
           </Route>
 
+          <Route path="/credits">
+
+            <Credits />
+
+          </Route>
+
           <Route path="/">
 
             <Game />
 
           </Route>
-
         </Switch>
+        <Footer />
       </>
    </Router>
   );

src/components/Footer/Credits/Credits.jsx

@@ -0,0 +1,110 @@
+import React from 'react'
+import { withRouter } from 'react-router'
+import AdminHeader from '../../Admin/Header/AdminHeader'
+import AppHeader from '../../Game/components/AppHeader/AppHeader'
+import IndividualCredit from './IndividualCredit'
+
+//<IndividualCredit
+    // titleElement
+    // resource
+    // resourceLink
+    // author
+    // authorLink
+///>
+
+const Credits = (props) => {
+    return (
+        <>
+        <header>
+            <h1>Credits</h1>
+            <h2
+                onClick={() => props.history.push('/')}
+            >
+                Back to the Game
+            </h2>
+        </header>
+        <div className="credits">
+            <ul>
+            {
+            <>
+
+                <IndividualCredit
+                    titleElement={'Hangman Vector'}
+                    resource={'hangman icon'}
+                    resourceLink={'https://www.iconbros.com/icons/ib-g-hangman'}
+                    author={"IconBros"}
+                    authorLink={'https://www.iconbros.com'}
+                />
+
+                <IndividualCredit
+                    titleElement={'Title Font'}
+                    resource={'Raleway'}
+                    resourceLink={'https://fonts.google.com/specimen/Raleway'}
+                    author={'Matt McInerney, Pablo Impallari, Rodrigo Fuenzalida'}
+                    authorLink={'https://fonts.google.com/specimen/Raleway'}
+                />
+
+                <IndividualCredit
+                    titleElement={'Body Font'}
+                    resource={'Helvetica'}
+                    resourceLink={'https://www.fonts.com/font/linotype/helvetica?QueryFontType=Web&src=GoogleWebFonts'}
+                    author={'Linotype'}
+                    authorLink={'https://www.fonts.com/font/linotype'}
+                />
+
+                <IndividualCredit
+                    titleElement={'CSS Animations'}
+                    resource={'Animate.CSS'}
+                    resourceLink={'https://animate.style'}
+                    author={'Daniel Eden and Friends'}
+                    authorLink={'https://animate.style/#contributors'}
+                />
+
+                <IndividualCredit
+                    titleElement={'Category Icon'}
+                    resource={'All categories icons'}
+                    resourceLink={'https://www.flaticon.com'}
+                    author={'Flaticon'}
+                    authorLink={'https://www.flaticon.com'}
+                />
+
+                <IndividualCredit
+                    titleElement={'Hangman game logic'}
+                    resource={'This video help me a lot...'}
+                    resourceLink={'https://www.youtube.com/watch?v=jj0W8tYX_q8'}
+                    author={'Traversy Media'}
+                    authorLink={'https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA'}
+                />
+
+                <IndividualCredit
+                    titleElement={'Sound - Letter introduced'}
+                    resource={'Multimedia button click, short and sharp'}
+                    resourceLink={'https://www.zapsplat.com/music/multimedia-button-click-short-and-sharp/'}
+                    author={'ZapSplat'}
+                    authorLink={'https://www.zapsplat.com/author/zapsplat/'}
+                />
+
+                <IndividualCredit
+                    titleElement={'Sound - Victoy'}
+                    resource={'Alert, mallet, success tone 1'}
+                    resourceLink={'https://www.zapsplat.com/music/alert-mallet-success-tone-1/'}
+                    author={'ZapSplat'}
+                    authorLink={'https://www.zapsplat.com/author/zapsplat/'}
+                />
+                
+                <IndividualCredit
+                    titleElement={'Sound - Defeat'}
+                    resource={'App, game or system interface deleted, removed or unsuccessful tone 2'}
+                    resourceLink={'https://www.zapsplat.com/music/app-game-or-system-interface-deleted-removed-or-unsuccessful-tone-2/'}
+                    author={'ZapSplat'}
+                    authorLink={'https://www.zapsplat.com/author/zapsplat/'}
+                />
+            </>
+            }
+            </ul>
+        </div>
+        </>
+    )
+}
+
+export default withRouter(Credits)

src/components/Footer/Credits/IndividualCredit.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+const IndividualCredit = ({titleElement, resource, resourceLink, author, authorLink}) => {
+    return (
+        <li className="credit">
+            <h3>{titleElement}</h3>
+            <p>
+                <a href={resourceLink}>
+                    {resource}
+                </a>
+                &nbsp;by&nbsp;
+                <a href={authorLink}>
+                    {author}
+                </a>
+            </p>
+        </li>
+    )
+}
+
+export default IndividualCredit

src/components/Footer/Footer.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+const Footer = (props) => {
+    return (
+        <footer className={props.darkMode ? 'made-with-love dark-mode-component' : 'made-with-love'}>
+            <p>
+                Made with 💓 by <a href="http://www.franp.xyz">Francisco Pessano</a>.
+            </p>
+            <a href="/credits">Credits</a>
+        </footer>
+    )
+}
+
+export default Footer