diff --git a/.circleci/config.yml b/.circleci/config.yml index 349c4c5d3c..e3bd11723e 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -343,6 +343,7 @@ workflows: branches: only: - develop + - new-challenge-listing # This is alternate dev env for parallel testing - "build-test": context : org-global diff --git a/__tests__/shared/components/SortingSelectBar.jsx b/__tests__/shared/components/SortingSelectBar.jsx index 665fe46e33..3e6e106892 100644 --- a/__tests__/shared/components/SortingSelectBar.jsx +++ b/__tests__/shared/components/SortingSelectBar.jsx @@ -1,6 +1,5 @@ import React from 'react'; import Renderer from 'react-test-renderer/shallow'; -import TU from 'react-dom/test-utils'; import SortingSelectBar from 'components/SortingSelectBar'; const mockData = { @@ -30,21 +29,3 @@ test('Matches shallow shapshot', () => { )); expect(renderer.getRenderOutput()).toMatchSnapshot(); }); - -class Wrapper extends React.Component { - componentDidMount() {} - - render() { - return ; - } -} - -const instance = TU.renderIntoDocument(()); - -test('Render properly', () => { - const dropdown = TU.findAllInRenderedTree(instance, item => item && item.className && item.className.match('Select-control')); - TU.Simulate.touchEnd(dropdown[0]); - const options = TU.findAllInRenderedTree(instance, item => item && item.className && item.className.match('Select-option')); - expect(options).toHaveLength(1); - TU.Simulate.click(options[0]); -}); diff --git a/__tests__/shared/components/__snapshots__/SortingSelectBar.jsx.snap b/__tests__/shared/components/__snapshots__/SortingSelectBar.jsx.snap index 4ab4cc370a..ac9b927ecd 100644 --- a/__tests__/shared/components/__snapshots__/SortingSelectBar.jsx.snap +++ b/__tests__/shared/components/__snapshots__/SortingSelectBar.jsx.snap @@ -12,44 +12,10 @@ exports[`Matches shallow shapshot 1`] = `
-

- Sort by: -

onSelect(item.value)} value={value} placeholder="Select an option" + arrowRenderer={ArrowIcon} />
) : null diff --git a/src/shared/components/SortingSelectBar/style.scss b/src/shared/components/SortingSelectBar/style.scss index 768994e45e..f9696ea943 100644 --- a/src/shared/components/SortingSelectBar/style.scss +++ b/src/shared/components/SortingSelectBar/style.scss @@ -14,32 +14,38 @@ $down-arrow-size: $base-unit; .sortingBar { display: flex; justify-content: space-between; - padding: 2 * $base-unit; + padding: 10px 0 16px 0; position: relative; + background-color: $tc-white; .title { + @include barlow-semi-bold; + display: flex; align-items: center; - color: $tc-gray-80; - font-size: 13px; - line-height: 13px; + color: $tco-black; + font-size: 18px; + line-height: 22px; margin: 0; padding: 4.5px 0 4.5px 10px; border: none; - text-transform: none; + text-transform: uppercase; + margin-left: 14px; + + @include xs-to-md { + margin-left: 16px; + font-size: 16px; + padding: 0; + } } .view-options-toggle-container { display: flex; align-items: center right; - } - - .view-options-toggle-container-label { - @include tc-label-sm; - display: flex; - align-items: center; - margin-right: $base-unit * 2; + @include xs-to-md { + margin-right: 16px; + } } .view-options { @@ -94,23 +100,23 @@ $down-arrow-size: $base-unit; } .is-focused { - outline: 3px auto #006dea; + outline: 3px auto $listing-checkbox-green !important; } .Select-control { line-height: 12px; - border-radius: 20px; padding: 4px 35px 4px 10px; + width: 208px; + height: 40px; background-color: $tc-white; font-weight: 400; font-size: 12px; text-transform: none; - border: 1px solid $tc-gray-neutral-dark; + border: 1px solid #aaa; color: $tc-gray-90; position: relative; overflow: hidden; box-sizing: border-box; - transition: all 200ms ease; } .Select-input { @@ -123,31 +129,46 @@ $down-arrow-size: $base-unit; .Select--single > .Select-control .Select-value { position: static; - line-height: 12px; padding: 0; overflow: visible; } + .Select.is-focused:not(.is-open) > .Select-control { + border-color: #137d60 !important; + } + + .Select-value-label { + @include roboto-regular; + + font-size: 400; + font-size: 14px; + line-height: 22px; + color: $tco-black; + vertical-align: middle; + } + .Select-arrow-zone { content: ' '; display: block; height: 0; position: absolute; - right: 15px; - top: 4px; + right: 17px; + top: 50%; width: 0; - } - .is-open > .Select-control { - border-radius: 12px; + svg { + width: 10px; + height: 10px; + } } .Select-menu-outer { + width: 100%; color: $tc-gray-90; font-weight: 400; font-size: 12px; background-color: $tc-white; - border: 1px solid $tc-gray-neutral-dark; + border: 1px solid #aaa; border-radius: $base-unit; box-shadow: 1px 5px 15px $tc-gray-20; box-sizing: border-box; @@ -156,7 +177,6 @@ $down-arrow-size: $base-unit; position: absolute; top: 100%; right: 0; - width: 140px; z-index: 1000; -webkit-overflow-scrolling: touch; } @@ -164,6 +184,9 @@ $down-arrow-size: $base-unit; .Select-menu { max-height: none; overflow-y: visible; + height: 22px; + font-size: 14px; + z-index: 10000; } .Select-option { @@ -172,6 +195,10 @@ $down-arrow-size: $base-unit; cursor: pointer; display: block; padding: 8px 20px; + z-index: 100000; + border-bottom: 1px solid #aaa; + border-left: 1px solid #aaa; + border-right: 1px solid #aaa; } .Select-option:last-child { @@ -186,11 +213,11 @@ $down-arrow-size: $base-unit; .Select-option.is-selected { color: $tc-black; font-weight: 500; - background: transparent; + background: $tc-white; } .Select-option.is-focused { - background: transparent; + background: $tc-white; } .Select-noresults { diff --git a/src/shared/components/Switch/style.scss b/src/shared/components/Switch/style.scss index 59bebc9a6b..ef1e431faf 100644 --- a/src/shared/components/Switch/style.scss +++ b/src/shared/components/Switch/style.scss @@ -19,7 +19,7 @@ } .enabled { - background: $tc-dark-blue; + background: $listing-checkbox-green; .handle { right: 0; diff --git a/src/shared/components/SwitchWithLabel/index.jsx b/src/shared/components/SwitchWithLabel/index.jsx index 43c3b0fba0..edcc343934 100644 --- a/src/shared/components/SwitchWithLabel/index.jsx +++ b/src/shared/components/SwitchWithLabel/index.jsx @@ -35,7 +35,7 @@ function SwitchWithLabel({ switch: theme.switch, }} /> - {labelAfter} + {labelAfter} ); } diff --git a/src/shared/components/SwitchWithLabel/style.scss b/src/shared/components/SwitchWithLabel/style.scss index ad87cc8e11..0627c2c18a 100644 --- a/src/shared/components/SwitchWithLabel/style.scss +++ b/src/shared/components/SwitchWithLabel/style.scss @@ -1,7 +1,7 @@ @import '~styles/mixins'; .switch { - margin: 0 5px; + margin-right: 5px; position: relative; top: 3px; } @@ -9,6 +9,11 @@ .wrapper { cursor: pointer; display: inline-block; - font-size: 12px; - font-weight: normal; + font-size: 14px; + color: $tc-black; + line-height: 22px; + + @include roboto-regular; + + font-weight: 400; } diff --git a/src/shared/components/Tooltip/style.scss b/src/shared/components/Tooltip/style.scss index 9e65bce94a..1f714259ca 100644 --- a/src/shared/components/Tooltip/style.scss +++ b/src/shared/components/Tooltip/style.scss @@ -8,7 +8,7 @@ } .rc-tooltip-inner { - border-radius: 3px; + border-radius: 8px; background: $tc-gray-80; padding: 0; } diff --git a/src/shared/components/TrackIcon/style.scss b/src/shared/components/TrackIcon/style.scss index 96c861f9db..7e5103132e 100644 --- a/src/shared/components/TrackIcon/style.scss +++ b/src/shared/components/TrackIcon/style.scss @@ -5,6 +5,9 @@ $track-space-10: $base-unit * 2; $track-space-15: $base-unit * 3; $track-space-20: $base-unit * 4; $track-radius-4: $corner-radius * 2; +$track-code-green: #35ac35; +$track-code-blue: #2984bd; +$track-code-turquose: #0ab88a; .trackIcon { display: flex; @@ -24,24 +27,24 @@ $track-radius-4: $corner-radius * 2; line-height: $track-space-15; color: $tc-white; padding: $track-code-pad - 1 0 $track-code-pad; - border-radius: $corner-radius; + border-radius: 4px; cursor: pointer; width: 100%; height: 100%; &.design, &.generic { - background: $tc-light-blue-110; + background: $track-code-blue; } &.develop, &.development { - background: $tc-green-110; + background: $track-code-green; } &.qa, &.quality-assurance { - background: $tc-purple-120; + background: $track-code-turquose; } &.data_science, diff --git a/src/shared/components/challenge-listing/ChallengeCard/NumRegistrants/style.scss b/src/shared/components/challenge-listing/ChallengeCard/NumRegistrants/style.scss index 9bc816da96..ead9f5b189 100644 --- a/src/shared/components/challenge-listing/ChallengeCard/NumRegistrants/style.scss +++ b/src/shared/components/challenge-listing/ChallengeCard/NumRegistrants/style.scss @@ -6,7 +6,7 @@ } .link:hover { - color: $tc-dark-blue-110; + color: $tc-black; } .number { @@ -18,9 +18,12 @@ } .tooltip { - font-weight: 500; - font-size: 13px; + font-weight: 400; + font-size: 14px; + line-height: 22px; color: $tc-white; letter-spacing: 0; - padding: 15px; + padding: 10px; + border-radius: 8px; + background-color: #2a2a2a; } diff --git a/src/shared/components/challenge-listing/ChallengeCard/NumSubmissions/style.scss b/src/shared/components/challenge-listing/ChallengeCard/NumSubmissions/style.scss index 9bc816da96..521c7584bb 100644 --- a/src/shared/components/challenge-listing/ChallengeCard/NumSubmissions/style.scss +++ b/src/shared/components/challenge-listing/ChallengeCard/NumSubmissions/style.scss @@ -18,9 +18,12 @@ } .tooltip { - font-weight: 500; - font-size: 13px; + font-weight: 400; + font-size: 14px; + line-height: 22px; color: $tc-white; letter-spacing: 0; - padding: 15px; + padding: 10px; + border-radius: 8px; + background-color: #2a2a2a; } diff --git a/src/shared/components/challenge-listing/ChallengeCard/Prize/Tip/style.scss b/src/shared/components/challenge-listing/ChallengeCard/Prize/Tip/style.scss index 9ef4a445d9..cb4a75e059 100644 --- a/src/shared/components/challenge-listing/ChallengeCard/Prize/Tip/style.scss +++ b/src/shared/components/challenge-listing/ChallengeCard/Prize/Tip/style.scss @@ -5,7 +5,7 @@ $prize-space-10: $base-unit * 2; @include roboto-regular; max-width: 480px; - padding: 15px; + padding: 10px 10px 0 10px; overflow: hidden; .bonuses { @@ -15,15 +15,17 @@ $prize-space-10: $base-unit * 2; } h1 { + @include roboto-regular; + border: none; color: $tc-white; - font-size: 15px; - line-height: 15px; + font-size: 14px; + line-height: 16px; margin: 0 0 $prize-space-10; padding: 0; text-align: left; text-transform: none; - font-weight: 700; + font-weight: 500; } } diff --git a/src/shared/components/challenge-listing/ChallengeCard/Prize/style.scss b/src/shared/components/challenge-listing/ChallengeCard/Prize/style.scss index 3744719a06..bd8473ba76 100644 --- a/src/shared/components/challenge-listing/ChallengeCard/Prize/style.scss +++ b/src/shared/components/challenge-listing/ChallengeCard/Prize/style.scss @@ -2,10 +2,11 @@ .label { cursor: default; - padding: 0 (2 * $base-unit); - background: $tc-gray-neutral-light; - font-size: 10px; - color: $tc-gray-70; + padding-top: 5px; + font-size: 11px; + font-weight: 500; + line-height: 10px; + color: $tco-black; white-space: nowrap; @include xs-to-sm { @@ -19,5 +20,5 @@ .symbol { display: inline-block; - color: $tc-gray-80; + color: $tco-black; } diff --git a/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx b/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx index 0d91283aa5..5b7b1c8a9b 100644 --- a/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx +++ b/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx @@ -153,7 +153,7 @@ export default function ChallengeStatus(props) { {timeNote} - to register + to Register ); diff --git a/src/shared/components/challenge-listing/ChallengeCard/Status/style.scss b/src/shared/components/challenge-listing/ChallengeCard/Status/style.scss index 730b05f6b2..54c298306d 100644 --- a/src/shared/components/challenge-listing/ChallengeCard/Status/style.scss +++ b/src/shared/components/challenge-listing/ChallengeCard/Status/style.scss @@ -16,11 +16,13 @@ $status-radius-4: $corner-radius * 2; @include xs-to-md { margin-top: $status-space-20 + 3; + margin-right: 16px; width: 100%; } @include xs-to-sm { margin-top: $status-space-15; + margin-right: 16px; } &.completed { @@ -59,7 +61,7 @@ $status-radius-4: $corner-radius * 2; min-width: 100%; &.with-register-button { - padding-right: 108px; + padding-right: 95px; @include xs-to-sm { padding-right: 0; @@ -68,11 +70,14 @@ $status-radius-4: $corner-radius * 2; } .current-phase { + @include roboto-medium; + float: left; - font-size: 13px; - font-weight: 400; - color: $tc-black; - line-height: $status-space-20; + font-size: 11px; + font-weight: 500; + color: $tco-black; + line-height: 10px; + margin-top: 6px; } .time-left { @@ -139,33 +144,37 @@ $status-radius-4: $corner-radius * 2; } // register btn a.register-button { + @include roboto-regular; + + font-weight: 400; display: block; position: absolute; - height: 100%; - background: $tc-gray-neutral-light; + height: 90%; + margin-top: 5px; + background: #f4f4f4; top: 0; right: 0; - width: 108px; - padding-left: $status-space-20; + width: 120px; + padding-left: 16px; text-align: left; - font-size: 13px; - color: $tc-black; - line-height: $status-space-20; + font-size: 14px; + color: $tco-black; + line-height: 24px; @include xs-to-sm { position: absolute; - height: 50px; + height: 42px; width: auto; left: 0; right: 0; top: auto; bottom: 0; text-align: center; - background: $tc-dark-blue-10; + background: #f4f4f4; } span { - font-size: 12px; + font-size: 14px; line-height: $status-space-15; font-weight: 500; display: block; @@ -178,7 +187,7 @@ $status-radius-4: $corner-radius * 2; display: inline-block; position: relative; margin-top: 0; - color: $tc-dark-blue; + color: $tco-black; } } @@ -193,8 +202,8 @@ $status-radius-4: $corner-radius * 2; } &:hover { - background: $tc-dark-blue-10; - color: $tc-dark-blue; + background: #137d60; + color: $tc-white; } } } diff --git a/src/shared/components/challenge-listing/ChallengeCard/style.scss b/src/shared/components/challenge-listing/ChallengeCard/style.scss index 9196473e75..f473ac12b1 100644 --- a/src/shared/components/challenge-listing/ChallengeCard/style.scss +++ b/src/shared/components/challenge-listing/ChallengeCard/style.scss @@ -17,10 +17,11 @@ $challenge-radius-4: $corner-radius * 2; justify-content: flex-start; position: relative; background: $tc-white; - padding: $challenge-space-20; + padding: $challenge-space-20 0; border-top: 1px solid $tc-gray-10; color: $tc-black; font-size: 15px; + margin-left: 24px; &:last-child { border-bottom: 1px solid $tc-gray-10; @@ -28,7 +29,10 @@ $challenge-radius-4: $corner-radius * 2; @include xs-to-md { flex-wrap: wrap; - padding: $base-unit * 3; + padding: $base-unit * 3 0; + margin-left: 0; + // min-height: 120px; + flex-direction: column; } @include xs-to-sm { @@ -47,10 +51,11 @@ $challenge-radius-4: $corner-radius * 2; .left-panel { display: flex; justify-content: flex-start; - width: 50%; + width: 45.5%; @include xs-to-md { width: 100%; + padding: 0 16px; } } @@ -61,10 +66,11 @@ $challenge-radius-4: $corner-radius * 2; @include xs-to-md { width: 100%; + display: flex; } @include xs-to-sm { - display: block; + display: flex; } } @@ -72,6 +78,7 @@ $challenge-radius-4: $corner-radius * 2; .challenge-track { display: inline-block; vertical-align: top; + border-radius: 4px 4px 0 0; > span:first-child { display: inline-block; @@ -114,7 +121,8 @@ $challenge-radius-4: $corner-radius * 2; // date and technologies .details-footer { width: 100%; - margin-top: $challenge-space-10; + margin-top: 16px; + display: flex; .date { font-size: 12px; @@ -161,13 +169,14 @@ $challenge-radius-4: $corner-radius * 2; right: 0; top: 20px; margin-right: $challenge-space-20; + width: 30% !important; } @include xs-to-sm { position: relative; width: 100%; margin-top: $challenge-space-20; - padding-left: $challenge-space-50; + padding-left: 16px; top: 0; } @@ -271,4 +280,8 @@ $challenge-radius-4: $corner-radius * 2; @extend .animated-placeholder-template; } + + .footer-template { + margin-top: 20px; + } } diff --git a/src/shared/components/challenge-listing/ChallengeProgressBar/style.scss b/src/shared/components/challenge-listing/ChallengeProgressBar/style.scss index d4c211d55e..0c6e46bc90 100644 --- a/src/shared/components/challenge-listing/ChallengeProgressBar/style.scss +++ b/src/shared/components/challenge-listing/ChallengeProgressBar/style.scss @@ -3,14 +3,17 @@ $progress-height: $base-unit - 1; $progress-space-3: $base-unit - 2; $progress-space-15: $base-unit * 3; $progress-radius-16: $corner-radius * 8; +$tc-progress-turquiose: #9d41c9; +$tc-progress-red: #ef476f; +$tc-progress-gray: #e9e9e9; .challenge-progress-bar { display: block; - height: $progress-height; + height: 6px; background: $tc-gray-neutral-dark; border-radius: $progress-radius-16; position: relative; - margin: $base-unit 0; + margin: 8px 0; .fill { display: inline-block; @@ -23,7 +26,7 @@ $progress-radius-16: $corner-radius * 8; top: -$progress-space-3; &.green { - background: $tc-green; + background: $tc-progress-turquiose; } &.gold { @@ -31,11 +34,11 @@ $progress-radius-16: $corner-radius * 8; } &.gray { - background: $tc-gray-20; + background: $tc-progress-gray; } &.red { - background: $tc-red-70; + background: $tc-progress-red; } } } diff --git a/src/shared/components/challenge-listing/ChallengeTab/index.jsx b/src/shared/components/challenge-listing/ChallengeTab/index.jsx new file mode 100644 index 0000000000..a9a4ba1956 --- /dev/null +++ b/src/shared/components/challenge-listing/ChallengeTab/index.jsx @@ -0,0 +1,147 @@ +import React, { useEffect, useState } from 'react'; +import { BUCKETS, isPastBucket } from 'utils/challenge-listing/buckets'; +import cn from 'classnames'; +import { useMediaQuery } from 'react-responsive'; +import ArrowIcon from 'assets/images/ico-arrow-down.svg'; +import PT from 'prop-types'; + +import './style.scss'; + +const ChallengeTab = ({ + activeBucket, + setPreviousBucketOfActiveTab, + setPreviousBucketOfPastChallengesTab, + previousBucketOfPastChallengesTab, + previousBucketOfActiveTab, + selectBucket, +}) => { + const past = isPastBucket(activeBucket); + const [currentSelected, setCurrentSelected] = useState(past); + const [isTabClosed, setIsTabClosed] = useState(true); + + useEffect(() => { + setCurrentSelected(isPastBucket(activeBucket)); + }, [activeBucket]); + + const onActiveClick = () => { + if (!past) { + return; + } + setPreviousBucketOfPastChallengesTab(activeBucket); + setCurrentSelected(0); + setIsTabClosed(true); + if (previousBucketOfActiveTab) { + selectBucket(previousBucketOfActiveTab); + } else { + selectBucket(BUCKETS.OPEN_FOR_REGISTRATION); + } + }; + + const onPastChallengesClick = () => { + if (past) { + return; + } + setPreviousBucketOfActiveTab(activeBucket); + setCurrentSelected(1); + setIsTabClosed(true); + if (previousBucketOfPastChallengesTab) { + selectBucket(previousBucketOfPastChallengesTab); + } else { + selectBucket(BUCKETS.ALL_PAST); + } + }; + + const desktop = useMediaQuery({ minWidth: 1024 }); + + const desktopTab = ( + + ); + + const mobileTab = ( + +
setIsTabClosed(!isTabClosed)} + > +

{currentSelected ? 'PAST CHALLENGES' : 'ACTIVE CHALLENGES'}

+
setIsTabClosed(!isTabClosed)} + > + +
+
+ { + !isTabClosed && ( +
+
+

ACTIVE CHALLENGES

+
+
+

PAST CHALLENGES

+
+
+ ) + } + + ); + + return desktop ? desktopTab : mobileTab; +}; + +ChallengeTab.defaultProps = { + setPreviousBucketOfActiveTab: () => {}, + setPreviousBucketOfPastChallengesTab: () => {}, + previousBucketOfActiveTab: null, + previousBucketOfPastChallengesTab: null, +}; + +ChallengeTab.propTypes = { + activeBucket: PT.string.isRequired, + setPreviousBucketOfActiveTab: PT.func, + setPreviousBucketOfPastChallengesTab: PT.func, + previousBucketOfActiveTab: PT.string, + selectBucket: PT.func.isRequired, + previousBucketOfPastChallengesTab: PT.string, +}; + +export default ChallengeTab; diff --git a/src/shared/components/challenge-listing/ChallengeTab/style.scss b/src/shared/components/challenge-listing/ChallengeTab/style.scss new file mode 100644 index 0000000000..575e052d7c --- /dev/null +++ b/src/shared/components/challenge-listing/ChallengeTab/style.scss @@ -0,0 +1,119 @@ +@import "~styles/mixins"; + +.mobile-tab-expanded { + margin: 0 16px; + background-color: $listing-light-blue; + + .item { + height: 40px; + margin: 0; + + p { + @include barlow-bold; + + font-weight: 600; + color: #555; + font-size: 14px; + line-height: 20px; + text-transform: uppercase; + padding-left: 16px; + padding-top: 10px; + } + } + + .active { + background-color: #bae1f9; + + p { + color: $tco-black; + font-weight: 700; + } + } +} + +.challenge-tab { + display: flex; + height: 42px; + margin-top: 24px; + background-color: $listing-light-blue; + border-radius: 4px 4px 0 0; + border-bottom: 1px solid $listing-light-gray; + + .item { + @include barlow; + + font-weight: 600; + font-size: 14px; + color: $member-gray; + line-height: 20px; + padding: 12px 16px 10px 16px; + cursor: pointer; + display: flex; + justify-content: center; + + &:not(.active):hover { + background-color: #bae1f9; + } + } + + .active { + color: $tc-black; + font-weight: 700; + + &::after { + content: ""; + background-image: url(assets/images/nav-active-item.svg); + height: 10px; + width: 40px; + margin-top: 10px; + justify-content: center; + z-index: 100; + display: block; + position: absolute; + top: 145px; + } + } +} + +.mobile-tab-container { + background-color: $listing-light-blue; + height: 40px; + margin-top: 32px; + display: flex; + justify-content: space-between; + border-radius: 4px 4px 0 0; + border-bottom: 1px solid #d4d4d4; + + .title { + @include barlow-bold; + + font-weight: 700; + color: $tco-black; + font-size: 14px; + line-height: 20px; + text-transform: uppercase; + padding-left: 16px; + padding-top: 10px; + } + + .icon { + width: 16px; + height: 9px; + margin-right: 15px; + display: flex; + flex-direction: column; + justify-content: center; + align-self: center; + cursor: pointer; + transform: scale(1.5); + } + + .down { + transform: scale(1.5) rotate(180deg); + margin-right: 20px !important; + } + + @include xs-to-md { + margin: 0 16px; + } +} diff --git a/src/shared/components/challenge-listing/Filters/Button/index.jsx b/src/shared/components/challenge-listing/Filters/Button/index.jsx new file mode 100644 index 0000000000..df15f56c8e --- /dev/null +++ b/src/shared/components/challenge-listing/Filters/Button/index.jsx @@ -0,0 +1,66 @@ +import React from 'react'; +import PT from 'prop-types'; + +import './styles.scss'; + +/** + * Displays a button. + * + * @param {Object} props component properties + * @returns {JSX.Element} + */ +const Button = ({ + children, + className, + onClick, + isInverted, + isPrimary, + isSelected, + isText, + shade, + size, + style, + disabled, + value, +}) => ( + +); + +Button.defaultProps = { + isInverted: false, + isPrimary: false, + disabled: false, +}; + +Button.propTypes = { + children: PT.node.isRequired, + className: PT.string.isRequired, + onClick: PT.func.isRequired, + isInverted: PT.bool, + isPrimary: PT.bool, + isSelected: PT.bool.isRequired, + isText: PT.bool.isRequired, + shade: PT.oneOf(['dark']).isRequired, + size: PT.string.isRequired, + style: PT.oneOf(['circle']).isRequired, + value: PT.any.isRequired, + disabled: PT.bool, +}; + +export default Button; diff --git a/src/shared/components/challenge-listing/Filters/Button/styles.scss b/src/shared/components/challenge-listing/Filters/Button/styles.scss new file mode 100644 index 0000000000..5b58bd0c45 --- /dev/null +++ b/src/shared/components/challenge-listing/Filters/Button/styles.scss @@ -0,0 +1,91 @@ +@import '~styles/mixins'; + +.button { + @include roboto-bold; + + padding: 8px 13px; + font-size: 12px; + color: $listing-checkbox-green; + line-height: 1; + letter-spacing: 0.8px; + white-space: nowrap; + appearance: none; + background: $tc-white; + border: 1px solid $listing-checkbox-green; + border-radius: 15px; + + &.is-selected { + color: $tc-gray-90; + border-color: $tc-gray-90; + } + + &.button-circle { + display: flex; + justify-content: center; + align-items: center; + padding: 0; + width: 30px; + height: 30px; + } + + &.button-primary { + &.button-inverted { + border: none; + padding: 9px 14px; + } + } +} + +.button-primary { + color: $tc-white; + background-color: $listing-checkbox-green; + + &.button-inverted { + color: $listing-checkbox-green; + background-color: $tc-white; + } +} + +.button-text { + padding: 0; + letter-spacing: 1px; + color: inherit; + border: none; + background: none; +} + +.button-lg { + padding: 12px 20px; + font-size: 12px; + border-radius: 20px; + + &.button-circle { + padding: 0; + width: 40px; + height: 40px; + } + + &.button-primary { + &.button-inverted { + padding: 13px 21px; + } + } +} + +.button-sm { + border-radius: 10px; + padding: 4px 13px; + font-size: 10px; + + &.button-circle { + padding: 0; + width: 20px; + height: 20px; + } + + &.button-primary { + &.button-inverted { + padding: 5px 14px; + } + } +} diff --git a/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/style.scss b/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/style.scss index c1141a4321..a196341a09 100644 --- a/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/style.scss +++ b/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/style.scss @@ -9,12 +9,13 @@ $challenge-radius-1: $corner-radius / 2; $challenge-radius-4: $corner-radius * 2; .container { - background: $tc-gray-neutral-light; border-bottom: 1px solid $tc-gray-30; - padding: 0 $base-unit * 3; + padding-bottom: 16px; + margin: 2px 12px 2px 14px; - @media (max-width: #{$screen-lg - 1px}) { - padding: 0 $base-unit * 2; + @include xs-to-md { + padding: 0; + margin: 0 16px; } } @@ -25,7 +26,7 @@ $challenge-radius-4: $corner-radius * 2; height: 60px; .input-container { - font-size: 12px; + font-size: 14px; display: flex; width: 100%; justify-content: center; @@ -45,8 +46,8 @@ $challenge-radius-4: $corner-radius * 2; @include placeholder { @include roboto-light; - font-size: 15px; - color: $tc-gray-50; + font-size: 14px; + color: $listing-placeholder-gray; text-transform: none; opacity: 1; } @@ -59,7 +60,7 @@ $challenge-radius-4: $corner-radius * 2; .SearchButton { background: $tc-white; cursor: pointer; - padding: $challenge-space-10 + 1 $challenge-space-20 $challenge-space-10 - 2; + padding: 11.4px 5.4px 14.4px 11.4px; border-radius: $challenge-radius-4 0 0 $challenge-radius-4; height: 40px; order: 1; @@ -67,8 +68,9 @@ $challenge-radius-4: $corner-radius * 2; border-right: 0; .zoomIcon { - height: 16px; - width: 16px; + height: 11.2px; + width: 11.2px; + margin-bottom: 6px; } &:hover { diff --git a/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/ui-zoom.svg b/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/ui-zoom.svg index dca2ed444b..8da0f696c3 100644 --- a/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/ui-zoom.svg +++ b/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/ui-zoom.svg @@ -1,5 +1,3 @@ - - - + + + diff --git a/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx b/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx index 7e354fb936..fed47a114f 100644 --- a/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx +++ b/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx @@ -27,18 +27,20 @@ import PT from 'prop-types'; import Select from 'components/Select'; import DateRangePicker from 'components/DateRangePicker'; import moment from 'moment'; -import { Button } from 'topcoder-react-ui-kit'; import Tooltip from 'components/Tooltip'; import { config, Link } from 'topcoder-react-utils'; import { COMPOSE, PRIORITY } from 'react-css-super-themr'; import { REVIEW_OPPORTUNITY_TYPES } from 'utils/tc'; import { isFilterEmpty, isPastBucket, BUCKETS } from 'utils/challenge-listing/buckets'; import SwitchWithLabel from 'components/SwitchWithLabel'; +import ChallengeSearchBar from 'containers/challenge-listing/ChallengeSearchBar'; import { challenge as challengeUtils } from 'topcoder-react-lib'; import { createStaticRanges } from 'utils/challenge-listing/date-range'; -import circleIcon from 'assets/images/icon-circle.png'; +import ArrowIcon from 'assets/images/ico-arrow-down.svg'; +import CircleIcon from 'assets/images/icon-circle.svg'; +import Button from '../Button'; import UiSimpleRemove from '../../Icons/ui-simple-remove.svg'; -import FiltersIcon from '../../Icons/filters-icon.svg'; +import BucketSelector from '../../Sidebar/BucketSelector'; import CheckmarkIcon from './CheckmarkIcon'; import style from './style.scss'; @@ -49,6 +51,8 @@ export default function FiltersPanel({ defaultCommunityId, filterState, // challenges, + disabled, + expanding, hidden, isAuth, auth, @@ -70,7 +74,7 @@ export default function FiltersPanel({ }) { if (hidden && !expanded) { return ( -
{ setExpanded(!expanded); @@ -84,8 +88,8 @@ export default function FiltersPanel({ tabIndex={0} role="button" > - More Filters -
+ More Filters + ); } @@ -347,37 +351,56 @@ export default function FiltersPanel({ */} +
+
+ +
+
+ +
+
+ +
+
+
- Track + Challenge Category
switchTrack('Des', on)} /> switchTrack('Dev', on)} /> switchTrack('DS', on)} /> switchTrack('QA', on)} /> @@ -442,7 +465,7 @@ export default function FiltersPanel({
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} { @@ -473,7 +496,7 @@ export default function FiltersPanel({
- Type + Challenge Type
{ @@ -481,16 +504,13 @@ export default function FiltersPanel({ .map(mapTypes) .map(option => ( - { + { let { types } = filterState; - if (e.target.checked) { + if (e) { types = types.concat(option.value); } else { types = types.filter(type => type !== option.value); @@ -499,7 +519,6 @@ export default function FiltersPanel({ setFilterState({ ..._.clone(filterState), types }); }} /> - )) } @@ -560,7 +579,7 @@ export default function FiltersPanel({
{ + onClick(); + }} + /> + {BUCKET_DATA[bucket].name} + {(bucket !== BUCKETS.ALL && count > 0) ? {count} : null}
); } diff --git a/src/shared/components/challenge-listing/Sidebar/BucketSelector/Bucket/style.scss b/src/shared/components/challenge-listing/Sidebar/BucketSelector/Bucket/style.scss index c71a328525..08fff51366 100644 --- a/src/shared/components/challenge-listing/Sidebar/BucketSelector/Bucket/style.scss +++ b/src/shared/components/challenge-listing/Sidebar/BucketSelector/Bucket/style.scss @@ -14,19 +14,68 @@ color: $tc-black; border-radius: 2 * $corner-radius; cursor: pointer; - padding: 0 2 * $base-unit 0 3 * $base-unit; + padding: 9px 10px 0 9px; + display: flex; // @include xs-to-sm { // font-size: 15px; // padding: 2px 0; // } -} -.right { - color: $tc-gray-70; - float: right; - position: static; - font-weight: 700; + & input { + width: 20px !important; + height: 20px !important; + background-color: $tc-white; + border-radius: 50% !important; + appearance: none; + border: 1.5px solid #7f7f7f; + position: relative; + + &:checked { + border-color: $listing-checkbox-green !important; + + &::after { + content: ''; + position: absolute; + left: 23%; + top: 23%; + width: 10px; + height: 10px; + border-radius: 50% !important; + background-color: $listing-checkbox-green !important; + } + } + } + + .bucketName { + @include roboto-regular; + + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: $tco-black; + margin-left: 5px; + } + + .count { + align-self: center; + background-color: $listing-checkbox-blue; + height: 16px; + border-radius: 50px; + color: $tc-white !important; + font-size: 14px; + line-height: 16px; + + @include roboto-regular; + + font-weight: 500; + letter-spacing: 0.5px; + text-transform: capitalize; + text-align: center; + padding: 0 8px; + margin-left: 8px; + margin-bottom: 5px; + } } .errorMsg { diff --git a/src/shared/components/challenge-listing/Sidebar/BucketSelector/index.jsx b/src/shared/components/challenge-listing/Sidebar/BucketSelector/index.jsx index 9d04ac7a03..cb82c288f0 100644 --- a/src/shared/components/challenge-listing/Sidebar/BucketSelector/index.jsx +++ b/src/shared/components/challenge-listing/Sidebar/BucketSelector/index.jsx @@ -82,14 +82,13 @@ export default function BucketSelector({ return (!past ? ( -
+
{getBucket(BUCKETS.ALL)} {isAuth ? getBucket(BUCKETS.MY) : null} {/* {extraBucket ? getBucket(extraBucket) : null} */} {getBucket(BUCKETS.OPEN_FOR_REGISTRATION)} {/* DISABLED: Until api receive fix community-app#5073 */} {/* {getBucket(BUCKETS.ONGOING)} */} -
{getBucket(BUCKETS.REVIEW_OPPORTUNITIES)} {/* {getBucket(BUCKETS.PAST)} */} {/* NOTE: We do not show upcoming challenges for now, for various reasons, diff --git a/src/shared/components/challenge-listing/Sidebar/BucketSelector/style.scss b/src/shared/components/challenge-listing/Sidebar/BucketSelector/style.scss index 391caad94d..49e63947ed 100644 --- a/src/shared/components/challenge-listing/Sidebar/BucketSelector/style.scss +++ b/src/shared/components/challenge-listing/Sidebar/BucketSelector/style.scss @@ -63,3 +63,7 @@ padding: 2px 0; } } + +.bucketSelector { + margin-top: 15px; +} diff --git a/src/shared/components/challenge-listing/Sidebar/index.jsx b/src/shared/components/challenge-listing/Sidebar/index.jsx index b6d50b915d..957447307c 100644 --- a/src/shared/components/challenge-listing/Sidebar/index.jsx +++ b/src/shared/components/challenge-listing/Sidebar/index.jsx @@ -18,7 +18,8 @@ import React from 'react'; import PT from 'prop-types'; // import _ from 'lodash'; -import { BUCKETS, isPastBucket } from 'utils/challenge-listing/buckets'; +import { isPastBucket } from 'utils/challenge-listing/buckets'; +import ChallengeSearchBar from 'containers/challenge-listing/ChallengeSearchBar'; import BucketSelector from './BucketSelector'; // import FiltersEditor from './FiltersEditor'; // import Footer from './Footer'; @@ -50,40 +51,13 @@ export default function SideBarFilters({ // updateAllSavedFilters, // updateSavedFilter, // setFilter, - previousBucketOfActiveTab, - previousBucketOfPastChallengesTab, - setPreviousBucketOfActiveTab, - setPreviousBucketOfPastChallengesTab, + setFilterState, }) { const past = isPastBucket(activeBucket); - const onActiveClick = () => { - if (!past) { - return; - } - setPreviousBucketOfPastChallengesTab(activeBucket); - if (previousBucketOfActiveTab) { - selectBucket(previousBucketOfActiveTab); - } else { - selectBucket(BUCKETS.OPEN_FOR_REGISTRATION); - } - }; - - const onPastChallengesClick = () => { - if (past) { - return; - } - setPreviousBucketOfActiveTab(activeBucket); - if (previousBucketOfPastChallengesTab) { - selectBucket(previousBucketOfPastChallengesTab); - } else { - selectBucket(BUCKETS.ALL_PAST); - } - }; - return (
-
    + {/*
    • Past Challenges
      • -
    +
*/}
+ + {/* { editSavedFiltersMode ? ( {}, - setPreviousBucketOfPastChallengesTab: () => {}, }; SideBarFilters.propTypes = { @@ -191,8 +163,5 @@ SideBarFilters.propTypes = { // updateAllSavedFilters: PT.func.isRequired, // updateSavedFilter: PT.func.isRequired, // setFilter: PT.func.isRequired, - previousBucketOfActiveTab: PT.string, - previousBucketOfPastChallengesTab: PT.string, - setPreviousBucketOfActiveTab: PT.func, - setPreviousBucketOfPastChallengesTab: PT.func, + setFilterState: PT.func.isRequired, }; diff --git a/src/shared/components/challenge-listing/Sidebar/style.scss b/src/shared/components/challenge-listing/Sidebar/style.scss index 211df578c1..33b6d1cf5c 100644 --- a/src/shared/components/challenge-listing/Sidebar/style.scss +++ b/src/shared/components/challenge-listing/Sidebar/style.scss @@ -6,6 +6,10 @@ font-size: 13px; line-height: 30px; width: 100%; + background-color: $listing-filter-bg; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + margin-bottom: 0; .StatusBar { display: flex; @@ -33,7 +37,6 @@ } .FilterBox { - background: $tc-white; padding: 2 * $base-unit; padding-bottom: 2 * $base-unit; border-radius: $corner-radius * 2; @@ -42,8 +45,12 @@ color: $tc-gray-10; background: $tc-gray-10; border: 0; - height: 1px; - margin: 2 * $base-unit; + height: 2px; + margin: 12px 12px 0; + } + + @include xs-to-md { + padding: 0; } } } diff --git a/src/shared/components/challenge-listing/Tags.jsx b/src/shared/components/challenge-listing/Tags.jsx index 92acedb091..9f938ee9c3 100644 --- a/src/shared/components/challenge-listing/Tags.jsx +++ b/src/shared/components/challenge-listing/Tags.jsx @@ -13,8 +13,8 @@ import './style.scss'; const VISIBLE_TAGS = 3; /** - * Implements component - */ + * Implements component + */ export default function Tags({ expand, isExpanded, tags, onTechTagClicked, challengesUrl, recommended, verifiedTags, }) { @@ -38,33 +38,33 @@ export default function Tags({ const additionalTags = (items, verifiedTagIndex) => (
{ - items.map((item, index) => { - if (index < verifiedTagIndex) { - return ( - - ); - } - return ( - ( -
- onClick(item.trim())} - key={item} - role="button" - to={tagRedirectLink(item)} - > - {item} - -
- ) - ); - }) - } + items.map((item, index) => { + if (index < verifiedTagIndex) { + return ( + + ); + } + return ( + ( +
+ onClick(item.trim())} + key={item} + role="button" + to={tagRedirectLink(item)} + > + {item} + +
+ ) + ); + }) + }
); @@ -83,57 +83,62 @@ export default function Tags({ display.push(expandItem); } return display.map((item, index) => { - if ((recommended && index < verifiedTags.length) || item[0] === '+') { - return ( - item[0] === '+' ? ( -
- - onClick(item.trim())} - key={item} - role="button" - to={tagRedirectLink(item)} + if (item) { + if ((recommended && index < verifiedTags.length) || item[0] === '+') { + return ( + item[0] === '+' ? ( +
+ - {item} - - -
- ) - : ( - + onClick(item.trim())} + key={item} + role="button" + to={tagRedirectLink(item)} + > + {item} + + +
) + : ( + + ) + ); + } + + return ( +
+ onClick(item.trim())} + key={item} + role="button" + to={tagRedirectLink(item)} + > + {item} + +
); } - return ( - onClick(item.trim())} - key={item} - role="button" - to={tagRedirectLink(item)} - > - {item} - - ); + return null; }); } return ''; }; return ( - + { renderTags() } ); diff --git a/src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/index.jsx b/src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/index.jsx index 65aac9c5f9..6cac3cdc44 100644 --- a/src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/index.jsx +++ b/src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/index.jsx @@ -57,6 +57,7 @@ function Phase({ }) { const limitProgress = parseFloat(_.replace(progress, '%', '')); const limitWidth = limitProgress <= 100 ? limitProgress : 100; + return (
diff --git a/src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/style.scss b/src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/style.scss index 0bba737f0e..2a2b3f1d2a 100644 --- a/src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/style.scss +++ b/src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/style.scss @@ -14,9 +14,11 @@ div.progress-bar-tooltip { color: $tc-white; max-width: none; padding: 0 $base-unit * 3; + background-color: #2a2a2a; .rc-tooltip-inner { padding: 0 $base-unit * 3; + border-radius: 8px; } .tip { @@ -28,7 +30,7 @@ div.progress-bar-tooltip { line-height: $tip-space-15; min-width: $tip-offset; padding: $tip-space-15 0; - background: $tc-gray-80; + background: #2a2a2a; width: $tip-space-95; &:last-child { @@ -49,13 +51,17 @@ div.progress-bar-tooltip { } .inner-bar { - background: $tc-light-blue; + background: #b671d7; position: relative; border-radius: $corner-radius * 4; border: 2px solid $tc-gray-80; top: -(($tip-space-15) - 1); height: $tip-space-10 - 2; z-index: 1; + + &.red { + background: #ef476f; + } } .point { @@ -72,7 +78,11 @@ div.progress-bar-tooltip { &.started { .point { - background: $tc-light-blue; + background: #b671d7; + + &.red { + background: #ef476f; + } } } } diff --git a/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx b/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx index 51d2ed9f9a..9cae10edab 100644 --- a/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx +++ b/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx @@ -12,16 +12,16 @@ import Tooltip from 'components/Tooltip'; import './style.scss'; /** - * Renders the tooltip's content. - */ + * Renders the tooltip's content. + */ function Tip({ - track, + // track, type, }) { - const trackStyle = track.replace(' ', '-').toLowerCase(); + // const trackStyle = track.replace(' ', '-').toLowerCase(); return (
-
+
{type.name}
@@ -32,11 +32,11 @@ function Tip({ } Tip.defaultProps = { - track: 'Development', + // track: 'Development', }; Tip.propTypes = { - track: PT.string, + // track: PT.string, type: PT.shape().isRequired, }; @@ -46,8 +46,8 @@ function placeArrow(TooltipNode) { } /** - * Renders the tooltip. - */ + * Renders the tooltip. + */ function TrackAbbreviationTooltip({ children, track, diff --git a/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/style.scss b/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/style.scss index f73e9db228..f3a759b02d 100644 --- a/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/style.scss +++ b/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/style.scss @@ -8,32 +8,20 @@ $track-radius-4: $corner-radius * 2; min-width: $base-unit * 45; max-width: $base-unit * 60; line-height: $track-space-20 - 2; - padding: 15px; + padding: 10px; + border-radius: 8px; + background-color: #2a2a2a; .header { - font-weight: 700; - padding-left: $base-unit * 2; - - &.design { - border-left: $track-radius-4 solid $tc-light-blue; - } - - &.development { - border-left: $track-radius-4 solid $tc-green; - } - - &.data-science { - border-left: $track-radius-4 solid $tc-orange; - } - - &.quality-assurance { - border-left: $track-radius-4 solid $tc-purple-120; - } + font-weight: 500; + font-size: 14px; + line-height: 16px; + margin-top: 5px; } .body { - font-weight: 300; - margin-top: $base-unit + 1; - color: $tc-gray-20; + font-weight: 400; + color: $tc-white; + font-size: 14px; } } diff --git a/src/shared/components/challenge-listing/index.jsx b/src/shared/components/challenge-listing/index.jsx index bc3bf94b7f..9200762e64 100644 --- a/src/shared/components/challenge-listing/index.jsx +++ b/src/shared/components/challenge-listing/index.jsx @@ -5,7 +5,6 @@ // import _ from 'lodash'; import FilterPanel from 'containers/challenge-listing/FilterPanel'; -import ChallengeSearchBar from 'containers/challenge-listing/ChallengeSearchBar'; // import moment from 'moment'; import React from 'react'; import PT from 'prop-types'; @@ -17,7 +16,7 @@ import { useMediaQuery } from 'react-responsive'; import Listing from './Listing'; // import ChallengeCardPlaceholder from './placeholders/ChallengeCard'; -import Banner from './Banner'; +import ChallengeTab from './ChallengeTab'; import './style.scss'; @@ -41,7 +40,7 @@ export default function ChallengeListing(props) { defaultCommunityId, expanding, // extraBucket, - filterState, + // filterState, hideSrm, // hideTcLinksInFooter, keepPastPlaceholders, @@ -50,6 +49,11 @@ export default function ChallengeListing(props) { // isBucketSwitching, isLoggedIn, setSearchText, + selectBucket, + setPreviousBucketOfActiveTab, + setPreviousBucketOfPastChallengesTab, + previousBucketOfPastChallengesTab, + previousBucketOfActiveTab, } = props; // const { challenges } = props; @@ -152,22 +156,24 @@ export default function ChallengeListing(props) { return (
- { - filterState.recommended && activeBucket === 'openForRegistration' - ? null - : ( - - ) - } - +

CHALLENGES

+
+ +
(
-
+
diff --git a/src/shared/components/challenge-listing/style.scss b/src/shared/components/challenge-listing/style.scss index 3e312335dd..5f3dc39577 100644 --- a/src/shared/components/challenge-listing/style.scss +++ b/src/shared/components/challenge-listing/style.scss @@ -18,12 +18,43 @@ $challenge-radius-4: $corner-radius * 2; // } .ChallengeFiltersExample { - background: $tc-gray-neutral-dark; + background: $tc-white; flex: 1; + margin: 0 32px; + + @include xs-to-md { + margin: 0; + } + + .tc-title { + @include barlow-condensed; + + color: $tco-black; + font-size: 32px; + margin: 32px 0 24px 0; + line-height: 32px; + font-weight: 600; + text-transform: uppercase; + + @include xs-to-md { + margin: 16px; + } + } + + .tc-seperator { + background-color: $listing-gray; + height: 2px; + opacity: 0.5; + margin: 0; + + @include xs-to-md { + margin: 0 16px; + } + } .tc-content-wrapper { display: flex; - padding: $challenge-space-10; + padding: 0; @include xs-to-md { display: block; @@ -71,26 +102,28 @@ $challenge-radius-4: $corner-radius * 2; .sidebar-container-mobile { margin: $challenge-space-20 $challenge-space-10 $challenge-space-10; display: none; + background-color: $listing-filter-bg; + border-radius: 8px; @include xs-to-md { display: block; - margin: 0; padding: $challenge-space-10; - width: 100%; + padding: 0; + margin-top: 24px; + margin-bottom: 16px; + margin-left: 16px; + margin-right: 16px; + padding-bottom: 16px; } } .sidebar-container-desktop { - margin: $challenge-space-20 $challenge-space-5 $challenge-space-10; - width: 30%; + margin: 35px 0 10px; + width: 23.5%; @include xs-to-md { display: none; } - - > * + * { - margin-top: 12px; - } } .hidden { @@ -98,18 +131,39 @@ $challenge-radius-4: $corner-radius * 2; } } +.tag { + button { + border-radius: 2px; + max-width: 400px; + font-size: 11px; + color: $tco-black; + font-weight: 500; + + &:hover { + background-color: #d4d4d4 !important; + } + } +} + .recommended-plus-tag { margin-left: 3px; display: inline-block; background-color: $tc-white; + + button:hover { + background-color: #d4d4d4 !important; + } } .additionalTagWrapper { - background: $tc-white; + background: $tc-black; display: inline-block; - border-radius: 3px; - padding: 5px 5px 10px 5px; + border-radius: 2px; + padding: 3px 4px; max-width: 400px; + font-size: 11px; + color: $tco-black; + font-weight: 500; } .additionalTagWrapper::after { @@ -131,4 +185,13 @@ $challenge-radius-4: $corner-radius * 2; margin-top: 5px; margin-left: 3px; display: inline-block; + + & > button:hover { + background-color: #d4d4d4 !important; + } +} + +.tagContainer { + display: flex; + margin-top: -2px; } diff --git a/src/shared/containers/challenge-listing/ChallengeSearchBar.jsx b/src/shared/containers/challenge-listing/ChallengeSearchBar.jsx index 254d144973..31b5220630 100644 --- a/src/shared/containers/challenge-listing/ChallengeSearchBar.jsx +++ b/src/shared/containers/challenge-listing/ChallengeSearchBar.jsx @@ -7,7 +7,7 @@ import challengeListingActions from 'actions/challenge-listing'; import ChallengeSearchBar from 'components/challenge-listing/Filters/ChallengeSearchBar'; import PT from 'prop-types'; import React from 'react'; -import { isReviewOpportunitiesBucket } from 'utils/challenge-listing/buckets'; +import { isReviewOpportunitiesBucket, isPastBucket } from 'utils/challenge-listing/buckets'; import { connect } from 'react-redux'; import _ from 'lodash'; @@ -34,6 +34,7 @@ export class Container extends React.Component { } = this.props; const isForReviewOpportunities = isReviewOpportunitiesBucket(activeBucket); + const searchPlaceholderText = isPastBucket(activeBucket) ? 'Search Past Challenges' : 'Search Active Challenges'; return ( ); diff --git a/src/shared/containers/challenge-listing/Listing/index.jsx b/src/shared/containers/challenge-listing/Listing/index.jsx index 9750569253..103ea774d4 100644 --- a/src/shared/containers/challenge-listing/Listing/index.jsx +++ b/src/shared/containers/challenge-listing/Listing/index.jsx @@ -40,6 +40,15 @@ const { mapToBackend } = challengeUtils.filter; let mounted = false; export class ListingContainer extends React.Component { + constructor(props) { + super(props); + + this.state = { + previousBucketOfActiveTab: null, + previousBucketOfPastChallengesTab: null, + }; + } + componentDidMount() { const { activeBucket, @@ -470,6 +479,11 @@ export class ListingContainer extends React.Component { filterState, } = this.props; + const { + previousBucketOfActiveTab, + previousBucketOfPastChallengesTab, + } = this.state; + const { tokenV3 } = auth; const handle = _.get(auth, 'user.handle'); @@ -642,6 +656,14 @@ export class ListingContainer extends React.Component { isLoggedIn={isLoggedIn} meta={meta} setSearchText={setSearchText} + previousBucketOfActiveTab={previousBucketOfActiveTab} + previousBucketOfPastChallengesTab={previousBucketOfPastChallengesTab} + setPreviousBucketOfActiveTab={(bucket) => { + this.setState({ previousBucketOfActiveTab: bucket }); + }} + setPreviousBucketOfPastChallengesTab={(bucket) => { + this.setState({ previousBucketOfPastChallengesTab: bucket }); + }} />
); diff --git a/src/shared/utils/challenge-listing/buckets.js b/src/shared/utils/challenge-listing/buckets.js index 55883e82a0..e58c9b5a66 100644 --- a/src/shared/utils/challenge-listing/buckets.js +++ b/src/shared/utils/challenge-listing/buckets.js @@ -56,7 +56,7 @@ export const BUCKET_DATA = { // status: ['Active'], // }, // hideCount: false, - name: 'Open for registration', + name: 'Open for Registration', sorts: [ // SORTS.BEST_MATCH, SORTS.MOST_RECENT_START_DATE, @@ -109,7 +109,7 @@ export const BUCKET_DATA = { [BUCKETS.REVIEW_OPPORTUNITIES]: { filter: {}, // hideCount: true, - name: 'Open for review', + name: 'Open for Review', sorts: [ SORTS.REVIEW_OPPORTUNITIES_START_DATE, SORTS.REVIEW_OPPORTUNITIES_PAYMENT, diff --git a/src/shared/utils/challenge-listing/date-range.js b/src/shared/utils/challenge-listing/date-range.js index ead001ec34..bb66396251 100644 --- a/src/shared/utils/challenge-listing/date-range.js +++ b/src/shared/utils/challenge-listing/date-range.js @@ -33,19 +33,13 @@ export function createStaticRanges() { endDate: now.clone().endOf('day').toDate(), }, { - label: 'Past 6 Months', - startDate: past6Months.startOf('day').toDate(), + label: 'Past 3 Month', + startDate: past3Months.startOf('day').toDate(), endDate: now.clone().endOf('day').toDate(), }, { - label: 'Custom Date', - startDate: null, - endDate: null, - isCustom: true, - }, - { - label: 'Past 3 Month', - startDate: past3Months.startOf('day').toDate(), + label: 'Past 6 Months', + startDate: past6Months.startOf('day').toDate(), endDate: now.clone().endOf('day').toDate(), }, { @@ -53,7 +47,12 @@ export function createStaticRanges() { startDate: pastYear.startOf('day').toDate(), endDate: now.clone().endOf('day').toDate(), }, - + { + label: 'Custom Date', + startDate: null, + endDate: null, + isCustom: true, + }, ]; return ranges.map(range => ({ ...staticRangeHandler, ...range })); diff --git a/src/shared/utils/challenge-listing/helper.js b/src/shared/utils/challenge-listing/helper.js index df0df26fe2..fb896d2aa3 100644 --- a/src/shared/utils/challenge-listing/helper.js +++ b/src/shared/utils/challenge-listing/helper.js @@ -41,3 +41,23 @@ export function phaseStartDate(phase) { export function calculateScore(score) { return Math.ceil(parseFloat(score) * 100.0); } + +/** + * Format number to ordinals. + * @param {Number} n + */ +export const formatOrdinals = (n) => { + let ord = ''; + switch (n) { + case '1': ord = '1st'; + break; + case '2': ord = '2nd'; + break; + case '3': ord = '3rd'; + break; + default: + ord = `${n}th`; + } + + return ord; +}; diff --git a/src/styles/_mixins/_variables.scss b/src/styles/_mixins/_variables.scss index e41271f4f1..3405df28c1 100644 --- a/src/styles/_mixins/_variables.scss +++ b/src/styles/_mixins/_variables.scss @@ -27,3 +27,12 @@ $dashboard-light-blue: #67aed6; $dashboard-blue: #009dce; $dashboard-border: #c4c4c4; $dashboard-text: #adadad; + +/* challenge listing colors */ +$listing-gray: #e5e5e5; +$listing-light-gray: #d4d4d4; +$listing-light-blue: #eaf6fd; +$listing-filter-bg: #f4f4f4; +$listing-placeholder-gray: #767676; +$listing-checkbox-green: #137d60; +$listing-checkbox-blue: #2c95d7;