feat: add Copyright component

Add Copyright component to reduce the logic in the Footer component.
Add new global tailwind grey font variants.
Add a new constant for the app copyright holder.

config/tailwind.config.js

@@ -13,6 +13,9 @@ module.exports = {
     extend: {
       colors: {
         primary: "#5f51fc",
+        grey: "#888888",
+        "light-grey": "#b7bbc2",
+        "dark-grey": "#343333",
       },
     },
   },

src/components/Layout/Footer/Copyright.js

@@ -0,0 +1,28 @@
+import React from "react";
+
+// Constants
+import { COPYRIGHT_HOLDER } from "constants/app";
+
+/**
+ * Copyright component with the copyright holder and current year.
+ *
+ * @example
+ * return (
+ *   <Copyright />
+ * )
+ * @returns {React.Component} The footer component
+ */
+function Copyright() {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <span
+      className="font-thin text-grey text-xs block text-center mx-auto"
+      data-hj-allow
+    >
+      &copy; All rights reserved {COPYRIGHT_HOLDER} {currentYear}
+    </span>
+  );
+}
+
+export default Copyright;

src/components/Layout/Footer/index.js

@@ -1,8 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
+
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 
+// Components
+import Copyright from "./Copyright";
+
 // Constants
 import { SOCIAL_LINKS } from "constants/links";
 import { SUPPORT_EMAIL } from "constants/urls";
@@ -81,22 +85,12 @@ function Footer({ user }) {
     </ul>
   );
 
-  const renderCopyright = () => {
-    const currentYear = new Date().getFullYear();
-
-    return (
-      <span className="copyright block text-center mx-auto" data-hj-allow>
-        &copy; All rights reserved Joshua Booth {currentYear}
-      </span>
-    );
-  };
-
   return (
     <footer className="footer absolute mx-auto left-0 right-0">
       <div className="footer-wrapper w-full">
         {renderSocialLinks()}
         {renderTextLinks()}
-        {renderCopyright()}
+        <Copyright />
       </div>
     </footer>
   );

src/components/Layout/Footer/styles.scss

@@ -55,9 +55,3 @@
     }
   }
 }
-
-.copyright {
-  color: $grey;
-  font-size: 0.625em;
-  font-weight: 100;
-}

src/constants/app.js

@@ -14,3 +14,5 @@
  * @type {string}
  */
 export const APP_TITLE = "React Frontend";
+
+export const COPYRIGHT_HOLDER = "Joshua Booth";