Add Footer

- Include app/project description - Include link to GitHub repository - Also add emojis to header
fterh · Sep 1, 2018 · 4a0fc6e · 4a0fc6e
1 parent 3c405c1
commit 4a0fc6e
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 3 deletions.
diff --git a/public/index.html b/public/index.html
@@ -20,7 +20,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Kopi Guru</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,800">
   </head>
   <body>
     <noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import Body from './Body';
+import Footer from './Footer';
 
 import styleClasses from './style/jss';
 
@@ -16,9 +17,15 @@ class App extends Component {
     return (
       <div className={styleClasses.app}>
         <header className={styleClasses.header}>
-          <h1>Kopi Guru</h1>
+          <h1>
+            <span role="img" aria-label="coffee">
+              ☕
+            </span>{' '}
+            Kopi Guru ☕
+          </h1>
         </header>
         <Body />
+        <Footer />
       </div>
     );
   }

diff --git a/src/Footer.js b/src/Footer.js
@@ -0,0 +1,30 @@
+// @flow
+
+import React from 'react';
+
+import styleClasses from './style/jss';
+
+export default function() {
+  return (
+    <div className={styleClasses.footer}>
+      <p>
+        <strong>
+          Kopi Guru: Demystifying kopitiam (coffeeshop) beverage ordering lingo
+          | Order like a pro{' '}
+          <span role="img" aria-label="fire">
+            🔥
+          </span>
+        </strong>
+      </p>
+      <p>
+        A project by Fabian Terh |{' '}
+        <a
+          className={styleClasses.anchor}
+          href="https://github.com/fterh/kopi-guru"
+        >
+          GitHub
+        </a>
+      </p>
+    </div>
+  );
+}
diff --git a/src/style/constants.js b/src/style/constants.js
@@ -1 +1,4 @@
-export default {};
+export default {
+  lightBrown: '#CC6600',
+  brown: '#663300'
+};
diff --git a/src/style/jss/index.js b/src/style/jss/index.js
@@ -1,6 +1,8 @@
 import jss from 'jss';
 import preset from 'jss-preset-default';
 
+import constants from './../constants';
+
 jss.setup(preset());
 
 const styles = {
@@ -10,6 +12,18 @@ const styles = {
   },
   header: {
     textAlign: 'center'
+  },
+  footer: {
+    color: constants.brown,
+    fontSize: '0.9em',
+    textAlign: 'center',
+    lineHeight: '0.5em',
+    '& a': {
+      color: constants.brown,
+      '&:hover': {
+        color: constants.lightBrown
+      }
+    }
   }
 };