Merge pull request #93 from topcoder-platform/bugbash

Welcome banner and feedback button

Author: luizrrodrigues

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?assignees=&labels=&template=bug_report.md&title="
+            target="_blank"
+          >
+            GIVE APPLICATION FEEDBACK
+          </a>
+        </div>
       </aside>
       <div className="content">
         <Router>

src/assets/icons/banner-chevron-up.svg

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import PT from "prop-types";
+import BannerChevronUp from "../../assets/icons/banner-chevron-up.svg";
+
+import "./styles.scss";
+
+const Banner = () => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const header =
+    "Welcome to our BETA work listings site - Tell us what you think!";
+
+  return (
+    <div styleName="banner">
+      <p styleName="header">
+        {header}
+
+        <span
+          styleName={`chevron ${isExpanded ? "" : "expanded"}`}
+          role="button"
+          tabIndex="0"
+          onClick={() => setIsExpanded(!isExpanded)}
+        >
+          <BannerChevronUp />
+        </span>
+      </p>
+
+      {isExpanded && (
+        <div styleName="content">
+          <p>
+            Welcome to the Beta version of the new Challenge Listings. During
+            this Beta phase, we will be fine-tuning the platform based on
+            feedback we receive from you, our community members.
+          </p>
+          <h3>NOTE THAT THIS IS NOT THE FINAL VERSION OF THE SITE.</h3>
+          <p>
+            You may encounter occasional broken links or error messages. If so,
+            please let us know! This is what the Beta phase is intended for, and
+            your feedback will enable us to greatly improve the new site.{" "}
+          </p>
+          <p>
+            You can click on the Feedback button on page or file a github ticket
+            at{" "}
+            <a href="http://https://github.com/topcoder-platform/micro-frontends-earn-app/issues/new">
+              https://github.com/topcoder-platform/micro-frontends-earn-app/issues/new
+            </a>
+            .
+          </p>
+          <p>Thank you!</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+Banner.propTypes = {};
+
+export default Banner;

src/components/Banner/index.jsx

@@ -0,0 +1,65 @@
+@import "styles/variables";
+@import "styles/mixins";
+@import "styles/GUIKit/default";
+
+.banner {
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+
+  width: 100%;
+  background: linear-gradient(90deg, $blue 0%, $lightGreen2 100%);
+  border-radius: 10px;
+  margin-bottom: 22px;
+  color: $white;
+  padding-left: 28px;
+
+  .header {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+    @include roboto-bold;
+    height: 50px;
+    font-size: 20px;
+    text-transform: uppercase;
+  }
+
+  .chevron {
+    margin-right: 20px;
+    margin-top: 5px;
+
+    &.expanded {
+      transform: rotate(180deg);
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    font-size: 16px;
+    margin-bottom: 24px;
+    width: 85%;
+
+    h3 {
+      font-size: 15px;
+      font-weight: bold;
+      margin-top: 15px;
+    }
+
+    p {
+      margin-top: 15px;
+    }
+
+    a {
+      text-decoration: underline;
+    }
+
+  }
+}

src/components/Banner/styles.scss

@@ -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/components/Button/index.jsx

@@ -24,7 +24,7 @@ const ChallengeItem = ({ challenge, onClickTag, onClickTrack, isLoggedIn }) => {
     challenge.prizeSets
   );
 
-  let submissionLink = `${process.env.URL.BASE}/challenges/${challenge.id}`;
+  let submissionLink = `${process.env.URL.BASE}/challenges/${challenge.id}`; // eslint-disable-line no-undef
 
   if (isLoggedIn && challenge.numOfSubmissions > 0) {
     submissionLink += "?tab=submissions";

src/containers/Challenges/Listing/ChallengeItem/index.jsx

@@ -10,6 +10,7 @@ import IconListView from "../../assets/icons/list-view.svg";
 import IconCardView from "../../assets/icons/card-view.svg";
 
 import "./styles.scss";
+import Banner from "../../components/Banner";
 
 const Challenges = ({
   challenges,
@@ -56,6 +57,7 @@ const Challenges = ({
 
   return (
     <div styleName="page">
+      <Banner />
       <h1 styleName="title">
         <span>CHALLENGES</span>
         <span styleName="view-mode">

src/containers/Challenges/index.jsx

@@ -6,16 +6,47 @@
       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;
+        }
+        
+      }
+
+      .sidebar-footer {
+        margin: 0 auto;
+        margin-bottom: 125px;
       }
     }
 
     .content {
       flex: 1 1 auto;
     }
+
+    .button {
+      @include roboto-bold;
+
+      padding: 12px 16px;
+      font-size: 13px;
+      color: $green;
+      line-height: 1;
+      letter-spacing: 0.8px;
+      white-space: nowrap;
+      appearance: none;
+      background: $white;
+      border: 1px solid $green2;
+      border-radius: 20px;
+    }
+
+    .button-primary {
+      color: $white;
+      background-color: $green2;
+    }
   }
 }

src/styles/_utils.scss

@@ -4,7 +4,7 @@
  * The standard TC UI pallete. Always prefer to use these constants to set
  * colors in your stylesheets.
  */
- /* Grayscale colors. */
+/* Grayscale colors. */
 $tc-black: #151516;
 $tc-gray-90: #2a2a2b;
 $tc-gray-80: #404041;
@@ -97,7 +97,7 @@ $tc-pastel-blue: #5656f4;
 $tc-pastel-yellow: #feb900;
 $tc-pastel-crimson: #e90c5a;
 
- /* Color aliases. */
+/* Color aliases. */
 
 /* Base metal colors. */
 $tc-gold: $tc-gold-100;
@@ -132,8 +132,11 @@ $base-unit: 5px;
 $body-color: $tc-gray-90;
 $white: $tc-white;
 $green: #229174;
-$darkGreen: #137D60;
+$green2: #287d61;
+$darkGreen: #137d60;
 $lightGreen: #0ab88a;
+$lightGreen2: #06d6a0;
+$blue: #2c95d7;
 
 $border-radius: 6px;
 $border-radius-sm: 5px;
@@ -142,4 +145,4 @@ $border-radius-lg: 8px;
 $page-padding-x: 7 * $base-unit;
 $page-padding-y: 32px;
 
-$screen-xxl: 1366px;
+$screen-xxl: 1366px;