fix issue 76

Author: tc_user

src/App.jsx

@@ -2,12 +2,12 @@
  * Main App component
  */
 import React, { useState, useLayoutEffect, useEffect, useRef } from "react";
-import { Router, useLocation } from "@reach/router";
+import { Router, useLocation, redirectTo } from "@reach/router";
 import Challenges from "./containers/Challenges";
 import Filter from "./containers/Filter";
 import Menu from "./components/Menu";
 import { disableSidebarForRoute } from "@topcoder/micro-frontends-navbar-app";
-import NoSidebarDemo from "./components/NoSidebarDemo";
+import Button from "./components/Button";
 import * as constants from "./constants";
 import actions from "./actions";
 import * as utils from "./utils";
@@ -84,9 +84,20 @@ const App = () => {
   return (
     <div className="layout">
       <aside className="sidebar">
-        {menu}
-        <hr />
-        <Filter />
+        <div className="sidebar-content">
+          {menu}
+          <hr />
+          <Filter />
+        </div>
+        <div className="sidebar-footer">
+          <a
+            className="button button-primary"
+            href="https://github.com/topcoder-platform/micro-frontends-earn-app/issues/new"
+            target="_blank"
+          >
+            GIVE APPLICATION FEEDBACK
+          </a>
+        </div>
       </aside>
       <div className="content">
         <Router>

src/components/Button/index.jsx

@@ -3,15 +3,23 @@ import PT from "prop-types";
 
 import "./styles.scss";
 
-const Button = ({ children, onClick }) => (
-  <button styleName="button" onClick={onClick}>
+const Button = ({ children, onClick, primary }) => (
+  <button
+    styleName={`${primary ? "button button-primary" : "button"}`}
+    onClick={onClick}
+  >
     {children}
   </button>
 );
 
+Button.defaultProps = {
+  primary: false,
+};
+
 Button.propTypes = {
   children: PT.node,
   onClick: PT.func,
+  primary: PT.bool,
 };
 
 export default Button;

src/styles/_utils.scss

@@ -6,16 +6,46 @@
       flex: 0 0 270px;
       min-height: calc(100vh - 60px);
       background: $white;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
 
-      > hr {
-        margin: 0 20px;
-        border-color: $tc-gray-05;
-        opacity: 0.5;
+      .sidebar-content {
+        > hr {
+          margin: 0 20px;
+          border-color: $tc-gray-05;
+          opacity: 0.5;
+        }
+
+        .content {
+          flex: 1 1 auto;
+        }
+      }
+
+      .sidebar-footer {
+        margin: 0 auto;
+        margin-bottom: 125px;
       }
     }
 
-    .content {
-      flex: 1 1 auto;
+    .button {
+      @include roboto-bold;
+
+      padding: 8px 12px;
+      font-size: $font-size-xs;
+      color: $green;
+      line-height: 1;
+      letter-spacing: 0.8px;
+      white-space: nowrap;
+      appearance: none;
+      background: $white;
+      border: 1px solid $green;
+      border-radius: 15px;
+    }
+
+    .button-primary {
+      color: $white;
+      background-color: $green;
     }
   }
 }