diff --git a/.circleci/config.yml b/.circleci/config.yml index 3c07d67901..2a26df6d2a 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -1,37 +1,37 @@ version: 2.1 parameters: - run_basedeployment: - default: true - type: boolean - run_smoketesting: - default: false - type: boolean - run_performancetesting: - default: false - type: boolean + run_basedeployment: + default: true + type: boolean + run_smoketesting: + default: false + type: boolean + run_performancetesting: + default: false + type: boolean defaults: &defaults - docker: - - image: docker:20.10.21-git - environment: - ENV: $BASH_ENV + docker: + - image: docker:20.10.21-git + environment: + ENV: $BASH_ENV install_dependency: &install_dependency - name: Installation of build and deployment dependencies. - command: | - apk update - apk add --no-cache bash openssl curl - apk upgrade - apk add --no-cache jq py-pip sudo - sudo pip install awscli --upgrade + name: Installation of build and deployment dependencies. + command: | + apk update + apk add --no-cache bash openssl curl + apk upgrade + apk add --no-cache jq py-pip sudo + sudo pip install awscli --upgrade install_deploysuite: &install_deploysuite - name: Installation of install_deploysuite. - command: | - git clone --branch v1.4.14 https://github.com/topcoder-platform/tc-deploy-scripts ../buildscript - cp ./../buildscript/master_deploy.sh . - cp ./../buildscript/buildenv.sh . - cp ./../buildscript/awsconfiguration.sh . + name: Installation of install_deploysuite. + command: | + git clone --branch v1.4.14 https://github.com/topcoder-platform/tc-deploy-scripts ../buildscript + cp ./../buildscript/master_deploy.sh . + cp ./../buildscript/buildenv.sh . + cp ./../buildscript/awsconfiguration.sh . restore_cache_settings_for_build: &restore_cache_settings_for_build key: docker-node-modules-v3-{{ checksum "package-lock.json" }} @@ -41,11 +41,11 @@ save_cache_settings: &save_cache_settings - node_modules build_docker_image: &build_docker_image - name: Build of Docker image - command: | - source buildenvvar - ./build.sh - no_output_timeout: 20m + name: Build of Docker image + command: | + source buildenvvar + ./build.sh + no_output_timeout: 20m jobs: # Build & Deploy against development backend "build-dev": @@ -191,7 +191,7 @@ jobs: # command: | # source awsenvconf # source buildenvvar - # ./master_deploy.sh -d ECS -e PROD -t latest -s staging_communityapp_taskvar, -i communityapp + # ./master_deploy.sh -d ECS -e PROD -t latest -s staging_communityapp_taskvar, -i communityapp # curl --request POST \ # --url https://circleci.com/api/v2/project/github/$CIRCLE_PROJECT_USERNAME/$CIRCLE_PROJECT_REPONAME/pipeline \ # --header "Circle-Token: ${CIRCLE_TOKEN}" \ @@ -232,7 +232,7 @@ jobs: --data '{"branch":"'"$CIRCLE_BRANCH"'","parameters":{"run_smoketesting":true , "run_performancetesting":false, "run_basedeployment": false}}' # Automated Smoke Testing against Staging - # Deprecate this workflow due to beta env shutdown + # Deprecate this workflow due to beta env shutdown # https://topcoder.atlassian.net/browse/CORE-202 # Smoke-Testing-On-Staging: # <<: *defaults @@ -259,7 +259,7 @@ jobs: # - store_artifacts: # path: ./automated-smoke-test/test-results - # Automated Smoke Testing against Production + # Automated Smoke Testing against Production Smoke-Testing-On-Production: <<: *defaults steps: @@ -330,9 +330,9 @@ jobs: # Download and cache dependencies - restore_cache: keys: - - v1-dependencies-{{ checksum "pom.xml" }} - # fallback to using the latest cache if no exact match is found - - v1-dependencies- + - v1-dependencies-{{ checksum "pom.xml" }} + # fallback to using the latest cache if no exact match is found + - v1-dependencies- - run: mvn dependency:go-offline @@ -353,11 +353,12 @@ workflows: jobs: # Development builds are executed on "new-develop" branch only. - "build-dev": - context : org-global + context: org-global filters: branches: only: - develop + - TOP-1390 # This is alternate dev env for parallel testing # Deprecate this workflow due to beta env shutdown # https://topcoder.atlassian.net/browse/CORE-251 @@ -402,7 +403,7 @@ workflows: # deployed on the production # master branch. - "build-prod": - context : org-global + context: org-global filters: &filters-prod branches: only: @@ -422,7 +423,7 @@ workflows: - Hold [Smoke-Testing]: type: approval - Smoke-Testing-On-Production: - context : org-global + context: org-global requires: - Hold [Smoke-Testing] filters: diff --git a/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap b/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap index e7b8818dcb..d42db749f9 100644 --- a/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap +++ b/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap @@ -23,7 +23,7 @@ exports[`Matches shallow shapshot 1`] = ` exports[`Matches shallow shapshot 2`] = `
- Challenge Category + Category
- Challenge Type + Type
-
- RESET FILTERS + Reset filters
diff --git a/__tests__/shared/components/challenge-listing/Sidebar/__snapshots__/index.jsx.snap b/__tests__/shared/components/challenge-listing/Sidebar/__snapshots__/index.jsx.snap index 1baf5a8b91..cd26a155d0 100644 --- a/__tests__/shared/components/challenge-listing/Sidebar/__snapshots__/index.jsx.snap +++ b/__tests__/shared/components/challenge-listing/Sidebar/__snapshots__/index.jsx.snap @@ -17,9 +17,6 @@ exports[`Matches shallow shapshot 1`] = ` selectBucket={[MockFunction]} />
-
`; @@ -40,8 +37,5 @@ exports[`Matches shallow shapshot 2`] = ` selectBucket={[MockFunction]} />
-
`; diff --git a/src/assets/images/arrow-prev-blue.svg b/src/assets/images/arrow-prev-blue.svg new file mode 100644 index 0000000000..df9808ac0b --- /dev/null +++ b/src/assets/images/arrow-prev-blue.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons_upload.svg b/src/assets/images/icons_upload.svg new file mode 100644 index 0000000000..718229fdc9 --- /dev/null +++ b/src/assets/images/icons_upload.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/open_in_new.svg b/src/assets/images/open_in_new.svg new file mode 100644 index 0000000000..09faf25743 --- /dev/null +++ b/src/assets/images/open_in_new.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/shared/components/Dashboard/BlogFeed/index.jsx b/src/shared/components/Dashboard/BlogFeed/index.jsx index c808b3b693..48a0c0cf7a 100644 --- a/src/shared/components/Dashboard/BlogFeed/index.jsx +++ b/src/shared/components/Dashboard/BlogFeed/index.jsx @@ -7,40 +7,44 @@ import PT from 'prop-types'; import React from 'react'; import './styles.scss'; import { config } from 'topcoder-react-utils'; -import BlogArticlesIcon from 'assets/images/icon-blog-articles.svg'; -export default function BlogFeed({ - blogs, - loading, - theme, -}) { +export default function BlogFeed({ blogs, loading, theme }) { return (
- - BLOG ARTICLES + Blog Articles
View all + > + View all
- {loading ?
- : blogs.map(blog => ( -
+ {loading ? ( +
+ +
+ ) : ( + blogs.map(blog => ( +
{blog.title} + > + {blog.title}
- ))} + )) + )}
); diff --git a/src/shared/components/Dashboard/BlogFeed/styles.scss b/src/shared/components/Dashboard/BlogFeed/styles.scss index 483ba5a12d..46a04c6e42 100644 --- a/src/shared/components/Dashboard/BlogFeed/styles.scss +++ b/src/shared/components/Dashboard/BlogFeed/styles.scss @@ -18,7 +18,7 @@ color: $tc-gray-90; padding: 13px 12px 3px 12px; border-radius: 8px; - margin-bottom: 20px; + margin-bottom: 18px; } .header { @@ -28,18 +28,11 @@ padding-bottom: 10px; .title { - @include barlow-semi-bold; + @include roboto-bold; display: flex; font-size: 16px; align-items: center; - - .icon { - fill: $tc-gray-90; - width: 17px; - height: 17px; - margin-right: 9px; - } } .allLink { @@ -102,3 +95,29 @@ } } } + +.container.light { + color: #000; + background: #fff; + border: 1px solid #d4d4d4; + border-radius: 4px; + + .header { + .icon { + fill: $tc-white; + } + + .allLink { + color: #0d61bf; + font-size: 12px; + line-height: 20px; + text-decoration: none; + } + } + + .blogs { + .row:not(:first-child) { + border-top: 1px solid $dashboard-dark-bg; + } + } +} diff --git a/src/shared/components/Dashboard/Challenges/index.jsx b/src/shared/components/Dashboard/Challenges/index.jsx index 4f2829228b..bbc8d9d009 100644 --- a/src/shared/components/Dashboard/Challenges/index.jsx +++ b/src/shared/components/Dashboard/Challenges/index.jsx @@ -21,15 +21,24 @@ export default function ChallengesFeed({ {title} View all challenges + > + View all
- {loading ?
- : (challenges || []).map(challenge => ( + {loading ? ( +
+ +
+ ) : ( + (challenges || []).map(challenge => (
- {`$${_.sum(challenge.prizeSets - .filter(set => set.type === 'placement') - .map(item => _.sum(item.prizes.map(prize => prize.value)))).toLocaleString()}`} + {`$${_.sum( + challenge.prizeSets + .filter(set => set.type === 'placement') + .map(item => _.sum(item.prizes.map(prize => prize.value))), + ).toLocaleString()}`}
- ))} + )) + )}
) : null; @@ -55,7 +67,7 @@ export default function ChallengesFeed({ ChallengesFeed.defaultProps = { challenges: [], theme: 'light', - title: 'CHALLENGES', + title: 'Opportunities', challengeListingQuery: undefined, }; diff --git a/src/shared/components/Dashboard/Challenges/styles.scss b/src/shared/components/Dashboard/Challenges/styles.scss index aa3e21ff4a..da91e7b531 100644 --- a/src/shared/components/Dashboard/Challenges/styles.scss +++ b/src/shared/components/Dashboard/Challenges/styles.scss @@ -31,9 +31,9 @@ $dashboard-dark-bg: #2a2a2a; padding: 12px 0; .title { - @include barlow-semi-bold; + @include roboto-bold; - font-size: 16px; + font-size: 20px; } .allLink { @@ -120,8 +120,46 @@ $dashboard-dark-bg: #2a2a2a; .challenges { background-color: $dashboard-dark-card-bg; - .row:not(:first-child) { - border-top: 1px solid $dashboard-dark-bg; + // .row:not(:first-child) { + // border-top: 1px solid $dashboard-dark-bg; + // } + } +} + +.container.light { + color: $tc-white; + margin-bottom: 0; + + .header { + padding: 19px 0; + + .title { + color: #2a2a2a; + } + + .allLink { + color: #fff; + border-radius: 4px; + background-color: #0d61bf; + font-size: 14px; + font-weight: 500; + line-height: 22px; + padding: 1px 12px; + } + } + + .challenges { + background-color: transparent; + border-radius: 0; + color: #2a2a2a; + + .row { + background-color: #fff; + border: 1px solid #d4d4d4; + margin: 0; + margin-bottom: 10px; + border-radius: 4px; + padding: 11px 15px; } } } diff --git a/src/shared/components/Dashboard/TCTime/index.jsx b/src/shared/components/Dashboard/TCTime/index.jsx index adb3f8bd60..aab9e89471 100644 --- a/src/shared/components/Dashboard/TCTime/index.jsx +++ b/src/shared/components/Dashboard/TCTime/index.jsx @@ -4,13 +4,15 @@ import React, { useState, useEffect } from 'react'; import moment from 'moment-timezone'; import darkTheme from './dark.scss'; +import lightTheme from './light.scss'; const THEMES = { dark: darkTheme, + light: lightTheme, }; function TopcoderTime() { - const theme = THEMES.dark; // for v1 only dark theme + const theme = THEMES.light; let FORMAT = 'MMM Do, HH:mm UTC'; const TIMEZONE = 'America/New_York'; const now = moment.tz(new Date(), TIMEZONE); diff --git a/src/shared/components/Dashboard/TCTime/light.scss b/src/shared/components/Dashboard/TCTime/light.scss new file mode 100644 index 0000000000..87329b56ec --- /dev/null +++ b/src/shared/components/Dashboard/TCTime/light.scss @@ -0,0 +1,29 @@ +@import "~styles/mixins"; + +.container { + display: flex; + flex-direction: column; + padding: 12px; + margin-bottom: 18px; + + @media screen and (max-width: 425px) { + flex-direction: row; + justify-content: space-between; + align-items: center; + } + + .title { + color: #000; + font-size: 16px; + font-family: Roboto, sans-serif; + font-weight: bold; + line-height: 24px; + } + + .time { + color: #000; + font-size: 16px; + font-family: Roboto, sans-serif; + line-height: 24px; + } +} diff --git a/src/shared/components/Dashboard/ThriveArticlesFeed/index.jsx b/src/shared/components/Dashboard/ThriveArticlesFeed/index.jsx index 89bff6afaf..b80341e075 100644 --- a/src/shared/components/Dashboard/ThriveArticlesFeed/index.jsx +++ b/src/shared/components/Dashboard/ThriveArticlesFeed/index.jsx @@ -6,40 +6,41 @@ import LoadingIndicator from 'components/LoadingIndicator'; import PT from 'prop-types'; import React from 'react'; import './styles.scss'; -import ThriveArticlesIcon from 'assets/images/thrive-articles.svg'; -export default function ThriveArticlesFeed({ - articles, - loading, - theme, -}) { +export default function ThriveArticlesFeed({ articles, loading, theme }) { return (
- - THRIVE ARTICLES + Thrive Articles
- View all + + View all
- {loading ?
- : articles.map(article => ( -
+ {loading ? ( +
+ +
+ ) : ( + articles.map(article => ( +
{article.fields.title} + > + {article.fields.title}
- ))} + )) + )}
); diff --git a/src/shared/components/Dashboard/ThriveArticlesFeed/styles.scss b/src/shared/components/Dashboard/ThriveArticlesFeed/styles.scss index 7ee6fb6593..4a62b1b714 100644 --- a/src/shared/components/Dashboard/ThriveArticlesFeed/styles.scss +++ b/src/shared/components/Dashboard/ThriveArticlesFeed/styles.scss @@ -28,19 +28,11 @@ padding-bottom: 10px; .title { - @include barlow-semi-bold; + @include roboto-bold; display: flex; font-size: 16px; align-items: center; - - .icon { - fill: $tc-gray-90; - width: 17px; - height: 17px; - margin-right: 9px; - margin-bottom: 3px; - } } .allLink { @@ -103,3 +95,28 @@ } } } + +.container.light { + color: #000; + background: #fff; + border: 1px solid #d4d4d4; + border-radius: 4px; + + .header { + .icon { + fill: $tc-white; + } + + .allLink { + color: #0d61bf; + font-size: 12px; + line-height: 20px; + } + } + + .articles { + .row:not(:first-child) { + border-top: 1px solid #e9e9e9; + } + } +} diff --git a/src/shared/components/SortingSelectBar/style.scss b/src/shared/components/SortingSelectBar/style.scss index cf7694c388..9929f42c60 100644 --- a/src/shared/components/SortingSelectBar/style.scss +++ b/src/shared/components/SortingSelectBar/style.scss @@ -15,23 +15,20 @@ $down-arrow-size: $base-unit; .sortingBar { display: flex; justify-content: space-between; - padding: 10px 0 16px 0; position: relative; background-color: $tc-white; + padding: 20px 0; .title { - @include barlow-semi-bold; + @include roboto-bold; display: flex; align-items: center; color: $tco-black; - font-size: 18px; - line-height: 22px; - margin: 0; - padding: 4.5px 0 4.5px 10px; + font-size: 24px; + line-height: 32px; border: none; - text-transform: uppercase; - margin-left: 14px; + text-transform: capitalize; @include xs-to-md { margin-left: 16px; diff --git a/src/shared/components/Switch/index.jsx b/src/shared/components/Switch/index.jsx index e5c071a85a..6d596dcac0 100644 --- a/src/shared/components/Switch/index.jsx +++ b/src/shared/components/Switch/index.jsx @@ -14,10 +14,13 @@ function Switch({ enabled, onSwitch, theme, + isBlue, }) { return (
onSwitch(!enabled)} onKeyPress={() => onSwitch(!enabled)} > @@ -28,14 +31,17 @@ function Switch({ Switch.defaultProps = { enabled: false, + isBlue: false, }; Switch.propTypes = { enabled: PT.bool, + isBlue: PT.bool, theme: PT.shape({ disabled: PT.string.isRequired, enabled: PT.string.isRequired, switch: PT.string.isRequired, + blue: PT.string.isRequired, }).isRequired, onSwitch: PT.func.isRequired, }; diff --git a/src/shared/components/Switch/style.scss b/src/shared/components/Switch/style.scss index ef1e431faf..77662ffafd 100644 --- a/src/shared/components/Switch/style.scss +++ b/src/shared/components/Switch/style.scss @@ -10,6 +10,12 @@ width: 11px; } +.blue { + &.enabled { + background: $listing-checkbox-blue; + } +} + .disabled { background: $tc-gray-30; diff --git a/src/shared/components/SwitchWithLabel/index.jsx b/src/shared/components/SwitchWithLabel/index.jsx index edcc343934..3a42786372 100644 --- a/src/shared/components/SwitchWithLabel/index.jsx +++ b/src/shared/components/SwitchWithLabel/index.jsx @@ -17,6 +17,7 @@ function SwitchWithLabel({ labelBefore, onSwitch, theme, + isBlue, }) { return (
{labelAfter}
@@ -42,6 +44,7 @@ function SwitchWithLabel({ SwitchWithLabel.defaultProps = { enabled: false, + isBlue: false, labelAfter: '', labelBefore: '', }; @@ -55,6 +58,7 @@ SwitchWithLabel.propTypes = { wrapper: PT.string.isRequired, }).isRequired, onSwitch: PT.func.isRequired, + isBlue: PT.bool, }; export default themr('SwitchWithLabel', defaultStyle)(SwitchWithLabel); diff --git a/src/shared/components/SwitchWithLabel/style.scss b/src/shared/components/SwitchWithLabel/style.scss index 0627c2c18a..991460ad1d 100644 --- a/src/shared/components/SwitchWithLabel/style.scss +++ b/src/shared/components/SwitchWithLabel/style.scss @@ -1,17 +1,17 @@ @import '~styles/mixins'; .switch { - margin-right: 5px; position: relative; - top: 3px; } .wrapper { cursor: pointer; - display: inline-block; + display: flex; font-size: 14px; color: $tc-black; - line-height: 22px; + line-height: 18px; + align-items: center; + gap: 8px; @include roboto-regular; diff --git a/src/shared/components/TrackIcon/index.jsx b/src/shared/components/TrackIcon/index.jsx index 3553d8cf55..d9bbec0b51 100644 --- a/src/shared/components/TrackIcon/index.jsx +++ b/src/shared/components/TrackIcon/index.jsx @@ -19,24 +19,27 @@ export default function TrackIcon({ abbreviationStyle = ''; } return ( - + {challengesUrl ? ( {type.abbreviation} ) : ( -
+
{type.abbreviation}
)} -
+
TCO
diff --git a/src/shared/components/TrackIcon/style.scss b/src/shared/components/TrackIcon/style.scss index e8eb09ffab..d8039709f7 100644 --- a/src/shared/components/TrackIcon/style.scss +++ b/src/shared/components/TrackIcon/style.scss @@ -8,9 +8,7 @@ $track-radius-4: $corner-radius * 2; .trackIcon { display: flex; - width: $base-unit * 6; - height: $base-unit * 6; - margin-right: $track-space-20; + margin-right: 16px; flex-direction: column; @include sm { @@ -18,21 +16,26 @@ $track-radius-4: $corner-radius * 2; } .main-icon { - @include tc-label-md; + @include barlow-bold; text-align: center; - line-height: $track-space-15; color: $tc-white; - padding: $track-code-pad - 1 0 $track-code-pad; + padding: 5px 7px 7px 7px; border-radius: 4px; cursor: pointer; width: 100%; height: 100%; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + font-size: 14px; + line-height: 20px; + + &.haveTco { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } &.CH { - background: $track-code-green; + background: rgba(22, 103, 154, 0.5); + color: #2a2a2a; } &.F2F { diff --git a/src/shared/components/challenge-detail/Header/TabSelector/index.jsx b/src/shared/components/challenge-detail/Header/TabSelector/index.jsx index a5fdadf008..9c3e7cb300 100644 --- a/src/shared/components/challenge-detail/Header/TabSelector/index.jsx +++ b/src/shared/components/challenge-detail/Header/TabSelector/index.jsx @@ -183,7 +183,7 @@ export default function ChallengeViewSelector(props) { onKeyPress={(e) => { handleSelectorClicked(e, DETAIL_TABS.DETAILS); }} styleName={getSelectorStyle(selectedView, DETAIL_TABS.DETAILS)} > - DETAILS + Details { numOfRegistrants ? ( @@ -199,7 +199,7 @@ export default function ChallengeViewSelector(props) { }} styleName={getSelectorStyle(selectedView, DETAIL_TABS.REGISTRANTS)} > - REGISTRANTS + Registrants {numOfRegistrants} ) : null @@ -215,7 +215,7 @@ export default function ChallengeViewSelector(props) { onKeyPress={(e) => { handleSelectorClicked(e, DETAIL_TABS.CHECKPOINTS); }} styleName={getSelectorStyle(selectedView, DETAIL_TABS.CHECKPOINTS)} > - CHECKPOINTS + Checkpoints {checkpointCount} ) @@ -230,7 +230,7 @@ export default function ChallengeViewSelector(props) { onKeyPress={(e) => { handleSelectorClicked(e, DETAIL_TABS.SUBMISSIONS); }} styleName={getSelectorStyle(selectedView, DETAIL_TABS.SUBMISSIONS)} > - SUBMISSIONS + Submissions {numOfSub} ) : null @@ -245,7 +245,7 @@ export default function ChallengeViewSelector(props) { onKeyPress={(e) => { handleSelectorClicked(e, DETAIL_TABS.MY_SUBMISSIONS); }} styleName={getSelectorStyle(selectedView, DETAIL_TABS.MY_SUBMISSIONS)} > - MY SUBMISSIONS + My Submissions {mySubmissions.length} ) : null @@ -256,7 +256,7 @@ export default function ChallengeViewSelector(props) { to={`/challenges/${challenge.id}/my-submissions`} styleName="challenge-selector-common challenge-unselected-view" > - MY SUBMISSIONS + My Submissions ) } @@ -270,7 +270,7 @@ export default function ChallengeViewSelector(props) { onKeyPress={(e) => { handleSelectorClicked(e, DETAIL_TABS.WINNERS); }} styleName={getSelectorStyle(selectedView, DETAIL_TABS.WINNERS)} > - WINNERS + Winners {numWinners} ) : null @@ -286,7 +286,7 @@ export default function ChallengeViewSelector(props) { target="_blank" rel="oopener noreferrer" > - CHALLENGE DISCUSSION + Challenge Discussion )) ); @@ -299,7 +299,7 @@ export default function ChallengeViewSelector(props) { target="_blank" rel="oopener noreferrer" > - CHALLENGE FORUM + Challenge Forum ); } @@ -316,7 +316,7 @@ export default function ChallengeViewSelector(props) { onKeyPress={(e) => { handleSelectorClicked(e, DETAIL_TABS.MM_DASHBOARD); }} styleName={getSelectorStyle(selectedView, DETAIL_TABS.MM_DASHBOARD)} > - DASHBOARD + Dashboard ) } diff --git a/src/shared/components/challenge-detail/Header/TabSelector/style.scss b/src/shared/components/challenge-detail/Header/TabSelector/style.scss index f684f57548..48ccb3f99c 100644 --- a/src/shared/components/challenge-detail/Header/TabSelector/style.scss +++ b/src/shared/components/challenge-detail/Header/TabSelector/style.scss @@ -1,4 +1,4 @@ -@import "~styles/mixins"; +@import '~styles/mixins'; .mobile-wrapper { @include xs-to-sm { @@ -36,7 +36,6 @@ color: $tco-black; font-size: 14px; line-height: 20px; - text-transform: uppercase; padding-left: 16px; padding-top: 10px; } @@ -111,7 +110,6 @@ color: #555; font-size: 14px; line-height: 20px; - text-transform: uppercase; padding-left: 16px; padding-top: 10px; } @@ -134,9 +132,9 @@ display: flex; flex-wrap: wrap; position: relative; - padding-bottom: 10px; - border-bottom: silver solid 1px; - gap: 16px; + border-bottom: #e9e9e9 solid 1px; + gap: 24px; + padding: 0 8px; @include xs-to-sm { flex-wrap: nowrap; @@ -145,57 +143,44 @@ } .challenge-selector-common { - @include barlow-bold; + @include roboto-medium; - font-weight: 700; - line-height: 20px; - font-size: 14px; - margin: 10px 10px 0; + display: flex; + align-items: center; + line-height: 24px; + font-size: 16px; cursor: pointer; white-space: nowrap; position: relative; + padding: 12px 8px; + text-transform: capitalize; } .challenge-selected-view { - font-weight: 700 !important; - color: #2a2a2a; - - &::after { - content: ""; - background-image: url(assets/images/nav-active-item.svg); - height: 10px; - width: 40px; - justify-content: center; - z-index: 100; - display: block; - position: absolute; - top: 30px; - left: 20%; - } + color: #16679a; + border-bottom: 2px solid #16679a; } .challenge-unselected-view { - font-weight: 600; - color: #555; - position: relative; + color: #2a2a2a; } } .num { - background: #2c95d7; - border-radius: 50px; - padding: 0 8px; + font-weight: 400; + background: #16679a; + border-radius: 12px; + padding: 0.5px 5.5px; text-align: center; color: $tc-white; margin-left: 4px; + font-size: 12px; + line-height: 16.8px; } .container { - margin-top: 28px; - margin-left: 2px; - margin-right: 14px; position: relative; - background-color: #eaf6fd; + background-color: white; @include xs-to-md { background-color: transparent; diff --git a/src/shared/components/challenge-detail/Header/index.jsx b/src/shared/components/challenge-detail/Header/index.jsx index 5a7bfa1353..73e31221f2 100644 --- a/src/shared/components/challenge-detail/Header/index.jsx +++ b/src/shared/components/challenge-detail/Header/index.jsx @@ -21,10 +21,12 @@ import { isRegistrationPhase, } from 'utils/challenge-detail/helper'; -import LeftArrow from 'assets/images/arrow-prev.svg'; +import LeftArrow from 'assets/images/arrow-prev-blue.svg'; +import IconsOpenInNew from 'assets/images/open_in_new.svg'; import ArrowUp from '../../../../assets/images/icon-arrow-up.svg'; import ArrowDown from '../../../../assets/images/icon-arrow-down.svg'; +import IconsUpload from '../../../../assets/images/icons_upload.svg'; import Prizes from './Prizes'; import ChallengeTags from './ChallengeTags'; @@ -307,7 +309,7 @@ export default function ChallengeHeader(props) {
- +

@@ -362,169 +364,165 @@ export default function ChallengeHeader(props) {

-
-
-

- Key Information -

- - { - bonusType ? ( -
- { - bonusType === 'Bonus' - ? ( -

- - BONUS: - {' '} - {numberOfCheckpointsPrizes} - - ‌ - CHECKPOINTS AWARDED WORTH - ‌ - - $ - {topCheckPointPrize} - - ‌ - EACH -

- ) - : ( -

- - RELIABILITY BONUS: $ - {reliabilityBonus.toFixed()} - -

- ) - } -
- ) : null - } - { - drPoints ? ( -
-

- - POINTS: - {drPoints} - -

-
- ) : null - } -
-
- {!isTopCrowdChallenge ? ( -
- {hasRegistered ? ( - - Unregister - - ) : ( +
+
+
+ + { + bonusType ? ( +
+ { + bonusType === 'Bonus' + ? ( +

+ + BONUS: + {' '} + {numberOfCheckpointsPrizes} + + ‌ + CHECKPOINTS AWARDED WORTH + ‌ + + $ + {topCheckPointPrize} + + ‌ + EACH +

+ ) + : ( +

+ + RELIABILITY BONUS: $ + {reliabilityBonus.toFixed()} + +

+ ) + } +
+ ) : null + } + { + drPoints ? ( +
+

+ + POINTS: + {drPoints} + +

+
+ ) : null + } +
+
+ {!isTopCrowdChallenge ? ( +
+ {hasRegistered ? ( + + Unregister + + ) : ( + + Register + + )} - Register + + Submit a solution - )} - + View Submissions + + ) + } +
+ ) : ( + - Submit - + View details on Topcoder plaform + + + )} +
+
+
+
+
+ {nextDeadlineMsg} { - track === COMPETITION_TRACKS.DES && hasRegistered && !unregistering - && hasSubmissions && ( - - View Submissions - - ) - } -
- ) : ( -
- This challenge is hosted on the
- new Topcoder Platform - -
- - Visit Challenge Registration - -
+ (status || '').toLowerCase() === 'active' + && ( +
+ {currentPhases && `${currentPhases.name} Ends In: `} + + {timeDiff.text} + +
+ ) + }
- )} -
-
-
-
-
- {nextDeadlineMsg} - { - (status || '').toLowerCase() === 'active' - && ( -
- {currentPhases && `${currentPhases.name} Ends In: `} - - {timeDiff.text} + + {showDeadlineDetail + ? ( + + -
) - } + : ( + + + + ) + } +
- - {showDeadlineDetail - ? ( - - - - ) - : ( - - - - ) - } - + { + showDeadlineDetail + && + }
- { - showDeadlineDetail - && - }