diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 0000000..05484df --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,30 @@ +--- +name: Bug report +about: Create a report to help us improve +title: '' +labels: '' +assignees: '' + +--- + +### Expected behavior +Describe. + +### Actual behavior +Describe. + +### Steps to reproduce the problem +- TBD. +- TBD. +- TBD. + +### Screenshot/screencast +Attach or link a resource. + +-- + +#### Environment +- OS: +- Browser (w/version): +- User role (client, copilot or manager): +- Account userd: diff --git a/src/App.jsx b/src/App.jsx index c494af2..99f5bb3 100644 --- a/src/App.jsx +++ b/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 (
diff --git a/src/assets/icons/banner-chevron-up.svg b/src/assets/icons/banner-chevron-up.svg new file mode 100644 index 0000000..96c5c3d --- /dev/null +++ b/src/assets/icons/banner-chevron-up.svg @@ -0,0 +1,17 @@ + + + banner chevron + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Banner/index.jsx b/src/components/Banner/index.jsx new file mode 100644 index 0000000..95c865f --- /dev/null +++ b/src/components/Banner/index.jsx @@ -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 ( +
+

+ {header} + + setIsExpanded(!isExpanded)} + > + + +

+ + {isExpanded && ( +
+

+ 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. +

+

NOTE THAT THIS IS NOT THE FINAL VERSION OF THE SITE.

+

+ 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.{" "} +

+

+ You can click on the Feedback button on page or file a github ticket + at{" "} + + https://github.com/topcoder-platform/micro-frontends-earn-app/issues/new + + . +

+

Thank you!

+
+ )} +
+ ); +}; + +Banner.propTypes = {}; + +export default Banner; diff --git a/src/components/Banner/styles.scss b/src/components/Banner/styles.scss new file mode 100644 index 0000000..2b8a9f5 --- /dev/null +++ b/src/components/Banner/styles.scss @@ -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; + } + + } +} diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx index 2d28836..ea9c7c2 100644 --- a/src/components/Button/index.jsx +++ b/src/components/Button/index.jsx @@ -3,15 +3,23 @@ import PT from "prop-types"; import "./styles.scss"; -const Button = ({ children, onClick }) => ( - ); +Button.defaultProps = { + primary: false, +}; + Button.propTypes = { children: PT.node, onClick: PT.func, + primary: PT.bool, }; export default Button; diff --git a/src/containers/Challenges/Listing/ChallengeItem/index.jsx b/src/containers/Challenges/Listing/ChallengeItem/index.jsx index da62621..c97395d 100644 --- a/src/containers/Challenges/Listing/ChallengeItem/index.jsx +++ b/src/containers/Challenges/Listing/ChallengeItem/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"; diff --git a/src/containers/Challenges/index.jsx b/src/containers/Challenges/index.jsx index 3513d4f..2285109 100644 --- a/src/containers/Challenges/index.jsx +++ b/src/containers/Challenges/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 (
+

CHALLENGES diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index d6bf2a2..ed9ff7a 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -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; + } } } diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 82bc7ae..5c77ee4 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.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; \ No newline at end of file +$screen-xxl: 1366px;