From d06a21fa3a035f0194a52d585a358e0806f12850 Mon Sep 17 00:00:00 2001 From: Justin Gasper Date: Fri, 17 May 2024 07:11:37 +1000 Subject: [PATCH 01/18] Only show scores for non Marathon Match challenges that have completed --- src/shared/components/challenge-detail/Submissions/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shared/components/challenge-detail/Submissions/index.jsx b/src/shared/components/challenge-detail/Submissions/index.jsx index 704877020..6e6416105 100644 --- a/src/shared/components/challenge-detail/Submissions/index.jsx +++ b/src/shared/components/challenge-detail/Submissions/index.jsx @@ -905,7 +905,7 @@ class SubmissionsComponent extends React.Component {
INITIAL SCORE

{ - (!_.isEmpty(s.review) && !_.isEmpty(s.review[0]) && s.review[0].score) + (!_.isEmpty(s.review) && !_.isEmpty(s.review[0]) && s.review[0].score && challenge.status === 'Completed') ? Number(s.review[0].score).toFixed(2) : 'N/A' } @@ -915,7 +915,7 @@ class SubmissionsComponent extends React.Component {

FINAL SCORE

{ - (s.reviewSummation && s.reviewSummation[0].aggregateScore) + (s.reviewSummation && s.reviewSummation[0].aggregateScore && challenge.status === 'Completed') ? s.reviewSummation[0].aggregateScore.toFixed(2) : 'N/A' } From 78226836e467469903df6779c41bb4a444b3ba81 Mon Sep 17 00:00:00 2001 From: Justin Gasper Date: Sun, 19 May 2024 23:28:23 +0000 Subject: [PATCH 02/18] Reskin TOP-1393 --- .../TrackIcon/__snapshots__/index.jsx.snap | 4 +- .../components/__snapshots__/Switch.jsx.snap | 2 + .../__snapshots__/SwitchWithLabel.jsx.snap | 1 + .../__snapshots__/FiltersPanel.jsx.snap | 17 +- .../Sidebar/__snapshots__/index.jsx.snap | 6 - src/assets/images/arrow-prev-blue.svg | 3 + src/assets/images/icons_upload.svg | 3 + src/assets/images/open_in_new.svg | 8 + .../components/SortingSelectBar/style.scss | 13 +- src/shared/components/Switch/index.jsx | 8 +- src/shared/components/Switch/style.scss | 6 + .../components/SwitchWithLabel/index.jsx | 4 + .../components/SwitchWithLabel/style.scss | 8 +- src/shared/components/TrackIcon/index.jsx | 17 +- src/shared/components/TrackIcon/style.scss | 21 +- .../Header/TabSelector/index.jsx | 20 +- .../Header/TabSelector/style.scss | 55 +- .../challenge-detail/Header/index.jsx | 307 ++++++----- .../challenge-detail/Header/style.scss | 304 ++++------- .../challenge-detail/Registrants/style.scss | 4 +- .../Specification/SideBar/ShareSocial.jsx | 2 +- .../Specification/SideBar/index.jsx | 26 +- .../Specification/SideBar/mixins.scss | 6 +- .../Specification/SideBar/social_media.scss | 13 +- .../Specification/SideBar/styles.scss | 53 +- .../challenge-detail/Specification/index.jsx | 2 +- .../Specification/styles.scss | 19 +- .../challenge-detail/Submissions/style.scss | 4 +- .../challenge-detail/Winners/style.scss | 3 +- .../ChallengeCard/style.scss | 10 +- .../ChallengeProgressBar/style.scss | 8 +- .../challenge-listing/ChallengeTab/index.jsx | 65 +-- .../challenge-listing/ChallengeTab/style.scss | 53 +- .../Filters/Button/styles.scss | 20 +- .../Filters/ChallengeSearchBar/style.scss | 8 +- .../Filters/FiltersPanel/index.jsx | 23 +- .../Filters/FiltersPanel/style.scss | 76 ++- .../Listing/Bucket/style.scss | 9 +- .../challenge-listing/Listing/style.scss | 4 +- .../Sidebar/BucketSelector/Bucket/index.jsx | 1 + .../Sidebar/BucketSelector/Bucket/style.scss | 30 +- .../Sidebar/BucketSelector/style.scss | 4 +- .../challenge-listing/Sidebar/index.jsx | 1 - .../challenge-listing/Sidebar/style.scss | 34 +- .../components/challenge-listing/style.scss | 26 +- .../containers/challenge-detail/index.jsx | 482 +++++++++--------- .../containers/challenge-detail/styles.scss | 38 +- .../challenge-listing/ChallengeSearchBar.jsx | 2 +- .../challenge-listing/Listing/index.jsx | 168 +++--- .../challenge-listing/Listing/styles.scss | 12 + src/shared/utils/challenge-listing/buckets.js | 2 +- src/styles/_mixins/_variables.scss | 2 +- 52 files changed, 935 insertions(+), 1082 deletions(-) create mode 100644 src/assets/images/arrow-prev-blue.svg create mode 100644 src/assets/images/icons_upload.svg create mode 100644 src/assets/images/open_in_new.svg diff --git a/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap b/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap index e7b8818dc..d42db749f 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 1baf5a8b9..cd26a155d 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 000000000..df9808ac0 --- /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 000000000..718229fdc --- /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 000000000..09faf2574 --- /dev/null +++ b/src/assets/images/open_in_new.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/shared/components/SortingSelectBar/style.scss b/src/shared/components/SortingSelectBar/style.scss index cf7694c38..9929f42c6 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 e5c071a85..6d596dcac 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 ef1e431fa..77662ffaf 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 edcc34393..3a4278637 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 0627c2c18..991460ad1 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 3553d8cf5..d9bbec0b5 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 e8eb09ffa..d8039709f 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 a5fdadf00..9c3e7cb30 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 f684f5754..720a0601a 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 { @@ -134,9 +134,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 +145,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 5a7bfa135..6d7783e85 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,164 @@ 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 - - ) : ( - - Register - - )} - - Submit - - { - track === COMPETITION_TRACKS.DES && hasRegistered && !unregistering - && hasSubmissions && ( +
+
+
+ + { + bonusType ? ( +
+ { + bonusType === 'Bonus' + ? ( +

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

+ ) + : ( +

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

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

+ + POINTS: + {drPoints} + +

+
+ ) : null + } +
+
+ {!isTopCrowdChallenge ? ( +
+ {hasRegistered ? ( - View Submissions + Unregister - ) - } -
- ) : ( -
- This challenge is hosted on the
- new Topcoder Platform - -
- + Register + + )} + - Visit Challenge Registration - + + Submit a solution + + { + track === COMPETITION_TRACKS.DES && hasRegistered && !unregistering + && hasSubmissions && ( + + View Submissions + + ) + }
-
- )} + ) : ( + + View details on Topcoder plaform + + + )} +
-
-
-
-
- {nextDeadlineMsg} - { - (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 - && - }