Change footer

frontend/src/App.js

@@ -1,5 +1,6 @@
 import React from "react";
 import "./App.css";
+import "./styles/index.css"
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 
 import Main from "./Main";

frontend/src/components/Footer.js

@@ -1,13 +1,15 @@
 import React from 'react';
 
 const Footer = () => {
+    function getYear() {
+        const date = new Date();
+        const currentYear = date.getFullYear();
+        return currentYear;
+    }
+
     return ( 
-        <footer className="main-footer">
-            <strong>Copyright © 2014-2019 <a href="http://adminlte.io">AdminLTE.io</a>.</strong>
-            All rights reserved.
-            <div className="float-right d-none d-sm-inline-block">
-                <b>Version</b> 3.0.5
-            </div>
+        <footer className="main-footer Bk-color-black secondary-font">
+            <strong>Copyright © {getYear()} <a href="https://bakano.ec/" className='Bk-link'>BAKANO</a></strong>
         </footer>
      );
 }

frontend/src/components/Menu.js

@@ -26,7 +26,7 @@ const Menu = ({ history }) => {
     };
 
     return (
-        <aside className="main-sidebar sidebar-dark-primary elevation-4">
+        <aside className="main-sidebar sidebar-dark-primary elevation-4 Bk-bg-black">
             {/* Brand Logo */}
             <Link to={"/dashboard"} className="brand-link">
                 <img

frontend/src/screens/auth/LoginScreen.js

@@ -90,7 +90,7 @@ const LoginScreen = ({ history }) => {
                                 <div className="col-4">
                                     <button
                                         type="submit"
-                                        className="btn btn-primary btn-block"
+                                        className="btn btn-primary btn-block Bk-button"
                                     >
                                         Sign In
                                     </button>

frontend/src/styles/BkColors.css

@@ -0,0 +1,31 @@
+.Bk-color-black{
+  color: #191423;
+}
+.Bk-color-pink{
+  color: #e6285c;
+}
+
+.Bk-bg-black{
+  background-color: #191423;
+}
+.Bk-bg-pink{
+  background-color: #e6285c;
+}
+
+.Bk-link{
+  color: #e6285c;
+  &:hover{
+    color: #c2234e;
+  }
+}
+.Bk-button{
+  background-color: #e6285c;
+  color: #fff;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  &:hover{
+    background-color: #c2234e;
+  }
+}

frontend/src/styles/BkFontVariables.css

@@ -0,0 +1,53 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap');
+
+@font-face {
+  font-family: 'Mosk';
+  src: url('/fonts/Mosk-Light-300.ttf') format('truetype');
+  font-weight: 300;
+  font-style: light;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Mosk';
+  src: url('/fonts/Mosk-Normal-400.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Mosk';
+  src: url('/fonts/Mosk-Bold-700.ttf') format('truetype');
+  font-weight: 700;
+  font-style: bold;
+  font-display: swap;
+}
+
+.primary-font {
+  font-family: 'Mosk', sans-serif;
+}
+.secondary-font {
+  font-family: 'Inter', serif;
+}
+
+.font-size-small {
+  font-size: 0.75rem;
+}
+.font-size-normal {
+  font-size: 1rem;
+}
+.font-size-large {
+  font-size: 1.5rem;
+}
+.font-size-extra-large {
+  font-size: 3rem;
+}
+
+.font-weight-thin {
+  font-weight: 300;
+}
+.font-weight-normal {
+  font-weight: 400;
+}
+.font-weight-bold {
+  font-weight: 700;
+}

frontend/src/styles/index.css

@@ -0,0 +1,2 @@
+@import url('./BkColors.css');
+@import url('./BkFontVariables.css');