Merge branch 'issue-77' of https://github.com/nursoltan-s/micro-frontends-earn-app into nursoltan-s-issue-77

Author: luizrrodrigues

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

@@ -0,0 +1,61 @@
+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 ? "up" : "down"}`}
+          role="button"
+          tabIndex="0"
+          onClick={() => setIsExpanded(!isExpanded)}
+        >
+          <BannerChevronUp />
+        </span>
+      </p>
+
+      {isExpanded && (
+        <div styleName="content">
+          <h3>
+            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.
+          </h3>
+          <br />
+          <h3>NOTE THAT THIS IS NOT THE FINAL VERSION OF THE SITE.</h3>
+          <br />
+          <h3>
+            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.{" "}
+          </h3>
+          <br />
+          <h3>
+            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>
+            .
+          </h3>
+          <br />
+          <h3>Thank you!</h3>
+        </div>
+      )}
+    </div>
+  );
+};
+
+Banner.propTypes = {};
+
+export default Banner;

src/components/Banner/index.jsx

@@ -0,0 +1,58 @@
+@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%, $green 100%);
+  border-radius: 10px;
+  margin-bottom: 22px;
+  color: $white;
+  padding-left: 54px;
+
+  .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;
+
+    &.up {
+    }
+
+    &.down {
+      transform: rotate(180deg);
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    font-size: 16px;
+    margin-top: 24px;
+    margin-bottom: 12px;
+    width: 80%;
+
+    a {
+      text-decoration: underline;
+    }
+  }
+}

src/components/Banner/styles.scss

@@ -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

@@ -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,10 @@ $base-unit: 5px;
 $body-color: $tc-gray-90;
 $white: $tc-white;
 $green: #229174;
-$darkGreen: #137D60;
+$darkGreen: #137d60;
 $lightGreen: #0ab88a;
+$blue: #2c95d7;
+$green: #06d6a0;
 
 $border-radius: 6px;
 $border-radius-sm: 5px;
@@ -142,4 +144,4 @@ $border-radius-lg: 8px;
 $page-padding-x: 7 * $base-unit;
 $page-padding-y: 32px;
 
-$screen-xxl: 1366px;
+$screen-xxl: 1366px;