From 0189f74634cc251240807d2192d2b8427ec8515b Mon Sep 17 00:00:00 2001 From: lunarkid Date: Tue, 7 Jun 2022 17:50:12 +0700 Subject: [PATCH 1/6] Revert "improvement(reskin-profile): qa link" This reverts commit 57c945d1d873aeb5769b12fd30261a8c3db84b21. --- .../components/ProfilePage/Activity/ActivityCard/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shared/components/ProfilePage/Activity/ActivityCard/index.jsx b/src/shared/components/ProfilePage/Activity/ActivityCard/index.jsx index 505a9215f3..d7028d17f5 100644 --- a/src/shared/components/ProfilePage/Activity/ActivityCard/index.jsx +++ b/src/shared/components/ProfilePage/Activity/ActivityCard/index.jsx @@ -42,7 +42,7 @@ const ActivityCard = ({ subTracks.map((subtrack, index) => (
- {_.upperFirst(subtrack.name.replace('FIRST_2_FINISH', 'FIRST2FINISH').replace(/_/g, ' ').toLowerCase())} + {subtrack.name.replace('FIRST_2_FINISH', 'FIRST2FINISH').replace(/_/g, ' ')}
@@ -96,7 +96,7 @@ const ActivityCard = ({ } From eb42961a7bd4ffacf911f786e192d8152677bc5d Mon Sep 17 00:00:00 2001 From: diazz Date: Tue, 28 Jun 2022 19:05:27 +0700 Subject: [PATCH 2/6] Challenge Icons Colors --- .../TrackIcon/__snapshots__/index.jsx.snap | 12 +-- src/shared/components/TrackIcon/index.jsx | 8 +- src/shared/components/TrackIcon/style.scss | 50 +++------- .../challenge-detail/Header/ChallengeTags.jsx | 80 +++++++--------- .../challenge-detail/Header/style.scss | 93 +++++++++++++++++++ src/styles/_mixins/_variables.scss | 8 ++ 6 files changed, 160 insertions(+), 91 deletions(-) diff --git a/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap b/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap index ffff9deca3..e7b8818dcb 100644 --- a/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap +++ b/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap @@ -5,7 +5,7 @@ exports[`Matches shallow shapshot 1`] = ` className="src-shared-components-TrackIcon-___style__trackIcon___3gJ9l" >
CH
@@ -13,7 +13,7 @@ exports[`Matches shallow shapshot 1`] = ` href="https://www.topcoder-dev.com/tco" >
TCO
@@ -26,7 +26,7 @@ exports[`Matches shallow shapshot 2`] = ` className="src-shared-components-TrackIcon-___style__trackIcon___3gJ9l" >
CH
@@ -34,7 +34,7 @@ exports[`Matches shallow shapshot 2`] = ` href="https://www.topcoder-dev.com/tco" >
TCO
@@ -47,7 +47,7 @@ exports[`Matches shallow shapshot 3`] = ` className="src-shared-components-TrackIcon-___style__trackIcon___3gJ9l" >
CH
@@ -55,7 +55,7 @@ exports[`Matches shallow shapshot 3`] = ` href="https://www.topcoder-dev.com/tco" >
TCO
diff --git a/src/shared/components/TrackIcon/index.jsx b/src/shared/components/TrackIcon/index.jsx index 411c71bf60..3553d8cf55 100644 --- a/src/shared/components/TrackIcon/index.jsx +++ b/src/shared/components/TrackIcon/index.jsx @@ -14,6 +14,10 @@ export default function TrackIcon({ }) { const TCO_URL = `${MAIN_URL}/tco`; const trackStyle = track.replace(' ', '-').toLowerCase(); + let abbreviationStyle = type.abbreviation; + if (['CH', 'F2F', 'TSK'].indexOf(abbreviationStyle) < 0) { + abbreviationStyle = ''; + } return ( {challengesUrl ? ( @@ -26,13 +30,13 @@ export default function TrackIcon({ ) : (
{type.abbreviation}
)} -
+
TCO
diff --git a/src/shared/components/TrackIcon/style.scss b/src/shared/components/TrackIcon/style.scss index 62ef3d0b69..e8eb09ffab 100644 --- a/src/shared/components/TrackIcon/style.scss +++ b/src/shared/components/TrackIcon/style.scss @@ -5,9 +5,6 @@ $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; @@ -34,25 +31,16 @@ $track-code-turquose: #0ab88a; border-bottom-left-radius: 0; border-bottom-right-radius: 0; - &.design, - &.generic { - background: $track-code-blue; - } - - &.develop, - &.development { + &.CH { background: $track-code-green; } - &.qa, - &.quality-assurance { - background: $track-code-turquose; + &.F2F { + background: $track-code-blue; } - &.data_science, - &.data-science, - &.data { - background: $tc-orange-110; + &.TSK { + background: $track-code-turquose; } } @@ -69,29 +57,19 @@ $track-code-turquose: #0ab88a; border-top-left-radius: 0; border-top-right-radius: 0; - &.design, - &.generic { - color: $tc-light-blue-110; - background: $tc-light-blue-10; - } - - &.develop, - &.development { - color: $tc-green-110; - background: $tc-green-10; + &.CH { + color: $track-code-green; + background: $track-code-green-light; } - &.qa, - &.quality-assurance { - color: #0ab88a; - background: #c1f5e7; + &.F2F { + color: $track-code-blue; + background: $track-code-blue-light; } - &.data_science, - &.data-science, - &.data { - color: $tc-orange-110; - background: $tc-orange-10; + &.TSK { + color: $track-code-turquose; + background: $track-code-turquose-light; } } diff --git a/src/shared/components/challenge-detail/Header/ChallengeTags.jsx b/src/shared/components/challenge-detail/Header/ChallengeTags.jsx index e9150ce43f..4c211c9c8e 100644 --- a/src/shared/components/challenge-detail/Header/ChallengeTags.jsx +++ b/src/shared/components/challenge-detail/Header/ChallengeTags.jsx @@ -13,21 +13,14 @@ import { config } from 'topcoder-react-utils'; import { Tag, - DataScienceTrackTag, - DataScienceTrackEventTag, - DesignTrackTag, - DesignTrackEventTag, DevelopmentTrackTag, - DevelopmentTrackEventTag, - QATrackTag, - QATrackEventTag, } from 'topcoder-react-ui-kit'; import { COMPETITION_TRACKS } from 'utils/tc'; import VerifiedTag from 'components/challenge-listing/VerifiedTag'; import MatchScore from 'components/challenge-listing/ChallengeCard/MatchScore'; import { calculateScore } from '../../../utils/challenge-listing/helper'; -import style from './style.scss'; +import './style.scss'; export default function ChallengeTags(props) { const { @@ -42,66 +35,59 @@ export default function ChallengeTags(props) { openForRegistrationChallenges, } = props; - let EventTag; - let TrackTag; - switch (track) { - case COMPETITION_TRACKS.DS: - EventTag = DataScienceTrackEventTag; - TrackTag = DataScienceTrackTag; - break; - case COMPETITION_TRACKS.DES: - EventTag = DesignTrackEventTag; - TrackTag = DesignTrackTag; - break; - case COMPETITION_TRACKS.DEV: - EventTag = DevelopmentTrackEventTag; - TrackTag = DevelopmentTrackTag; - break; - case COMPETITION_TRACKS.QA: - EventTag = QATrackEventTag; - TrackTag = QATrackTag; - break; - default: - throw new Error('Wrong competition track value'); - } - - const filteredChallenge = _.find(openForRegistrationChallenges, { id: challengeId }); const matchSkills = filteredChallenge ? filteredChallenge.match_skills || [] : []; const matchScore = filteredChallenge ? filteredChallenge.jaccard_index || [] : 0; const tags = technPlatforms.filter(tag => !matchSkills.includes(tag)); + const abbreviationName = challengeType ? challengeType.name : null; + let abbreviation; + switch (abbreviationName) { + case 'First2Finish': + abbreviation = 'F2F'; + break; + case 'Challenge': + abbreviation = 'CH'; + break; + case 'Task': + abbreviation = 'TSK'; + break; + default: + abbreviation = null; + } return (
{ - challengeType - && ( -
- + ( setImmediate(() => setChallengeListingFilter( - { types: [challengeType.abbreviation] }, + { types: [abbreviation] }, )) ) } - to={`${challengesUrl}?types[]=${encodeURIComponent(challengeType.abbreviation)}`} + to={`${challengesUrl}?types[]=${encodeURIComponent(abbreviation)}`} > - {challengeType.name} - + {abbreviationName} +
) } { - events.map(event => ( - ( +
- {event} - - )) + + {event} + +
+ )) : null } { matchScore > 0 && config.ENABLE_RECOMMENDER && ( diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss index 341a5372e7..16115573b9 100644 --- a/src/shared/components/challenge-detail/Header/style.scss +++ b/src/shared/components/challenge-detail/Header/style.scss @@ -1,3 +1,4 @@ +/* stylelint-disable no-descending-specificity */ @import '~styles/mixins'; .challengeAction { @@ -159,6 +160,98 @@ .type-tag { display: inline-block; + + a { + color: $tc-white; + + &:active, + &:focus, + &:hover { + color: $tc-white; + } + } + + &.CH { + a { + background: $track-code-green; + + &:active, + &:focus, + &:hover { + background-color: $track-code-green; + } + } + } + + &.F2F { + a { + background: $track-code-blue; + + &:active, + &:focus, + &:hover { + background-color: $track-code-blue; + } + } + } + + &.TSK { + a { + background: $track-code-turquose; + + &:active, + &:focus, + &:hover { + background-color: $track-code-turquose; + } + } + } +} + +.event-tag { + display: inline-block; + + &.CH { + a { + background-color: $track-code-green-light; + color: $track-code-green; + + &:active, + &:focus, + &:hover { + background-color: $track-code-green-light; + color: $track-code-green; + } + } + } + + &.F2F { + a { + background-color: $track-code-blue-light; + color: $track-code-blue; + + &:active, + &:focus, + &:hover { + background-color: $track-code-blue-light; + color: $track-code-blue; + } + } + } + + &.TSK { + a { + background-color: $track-code-turquose-light; + color: $track-code-turquose; + + &:active, + &:focus, + &:hover { + background-color: $track-code-turquose-light; + color: $track-code-turquose; + } + } + } } .qa { diff --git a/src/styles/_mixins/_variables.scss b/src/styles/_mixins/_variables.scss index 1d0be4396c..0acd0a36f6 100644 --- a/src/styles/_mixins/_variables.scss +++ b/src/styles/_mixins/_variables.scss @@ -45,3 +45,11 @@ $listing-avatar-white: #f0f0f0; $profile-skill-badge: #227681; $profile-member-wins: #1e94a3; $profile-border-gray: #e9e9e9; + +/* track color */ +$track-code-green: #35ac35; +$track-code-green-light: #d8fdd8; +$track-code-blue: #2984bd; +$track-code-blue-light: #bae1f9; +$track-code-turquose: #0ab88a; +$track-code-turquose-light: #c1f5e7; From eb11611e15230a94522a476ce46c0bd9a82c70e5 Mon Sep 17 00:00:00 2001 From: lunarkid Date: Thu, 7 Jul 2022 15:49:15 +0700 Subject: [PATCH 3/6] ci: set reskin to qa & beta --- .circleci/config.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 62b48152fc..34ea11b470 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -363,7 +363,7 @@ workflows: filters: branches: only: - - free + - reskin # This is beta env for production soft releases - "build-prod-beta": context : org-global @@ -371,7 +371,7 @@ workflows: branches: only: - footer-update - - reskin-profile + - reskin # This is stage env for production QA releases - "build-prod-staging": context : org-global From 41a5f7afdd13087f1f134aaf3f985a007ef24886 Mon Sep 17 00:00:00 2001 From: lunarkid Date: Fri, 8 Jul 2022 14:21:32 +0700 Subject: [PATCH 4/6] improvement(reskin): mm submission mobile --- .../Header/TabSelector/index.jsx | 4 +- .../challenge-detail/Header/index.jsx | 3 + .../Submissions/SubmissionRow/index.jsx | 37 +++---- .../Submissions/SubmissionRow/style.scss | 101 +++++++++++++++--- .../challenge-detail/Submissions/index.jsx | 39 +++++-- .../challenge-detail/Submissions/style.scss | 58 ++++++++++ .../icons/view-as-list-active.svg | 4 + .../icons/view-as-list-inactive.svg | 4 + .../icons/view-as-table-active.svg | 4 + .../icons/view-as-table-inactive.svg | 4 + .../containers/challenge-detail/index.jsx | 5 + 11 files changed, 223 insertions(+), 40 deletions(-) create mode 100644 src/shared/components/challenge-detail/icons/view-as-list-active.svg create mode 100644 src/shared/components/challenge-detail/icons/view-as-list-inactive.svg create mode 100644 src/shared/components/challenge-detail/icons/view-as-table-active.svg create mode 100644 src/shared/components/challenge-detail/icons/view-as-table-inactive.svg diff --git a/src/shared/components/challenge-detail/Header/TabSelector/index.jsx b/src/shared/components/challenge-detail/Header/TabSelector/index.jsx index 4b23fda667..c3d3fada3e 100644 --- a/src/shared/components/challenge-detail/Header/TabSelector/index.jsx +++ b/src/shared/components/challenge-detail/Header/TabSelector/index.jsx @@ -39,6 +39,7 @@ export default function ChallengeViewSelector(props) { hasRegistered, mySubmissions, onSort, + viewAsTable, } = props; const { type, tags } = challenge; @@ -376,7 +377,7 @@ export default function ChallengeViewSelector(props) { }
{ - isSubmissionTabSelected && ( + isSubmissionTabSelected && !viewAsTable && (
@@ -544,4 +546,5 @@ ChallengeHeader.propTypes = { mySubmissions: PT.arrayOf(PT.shape()).isRequired, openForRegistrationChallenges: PT.shape().isRequired, onSort: PT.func.isRequired, + viewAsTable: PT.bool.isRequired, }; diff --git a/src/shared/components/challenge-detail/Submissions/SubmissionRow/index.jsx b/src/shared/components/challenge-detail/Submissions/SubmissionRow/index.jsx index d9de9b9717..b7e550869f 100644 --- a/src/shared/components/challenge-detail/Submissions/SubmissionRow/index.jsx +++ b/src/shared/components/challenge-detail/Submissions/SubmissionRow/index.jsx @@ -20,7 +20,7 @@ import style from './style.scss'; export default function SubmissionRow({ isMM, openHistory, member, submissions, score, toggleHistory, - isReviewPhaseComplete, finalRank, provisionalRank, onShowPopup, rating, + isReviewPhaseComplete, finalRank, provisionalRank, onShowPopup, rating, viewAsTable, }) { const { submissionTime, provisionalScore, status, submissionId, @@ -59,19 +59,19 @@ export default function SubmissionRow({ }; return ( -
+
{ isMM ? ( -
-
FINAL RANK
+
+
FINAL RANK
{ isReviewPhaseComplete ? finalRank || 'N/A' : 'N/A' }
-
PROVISIONAL RANK
-
+
PROVISIONAL RANK
+
{ provisionalRank || 'N/A' }
@@ -79,14 +79,14 @@ export default function SubmissionRow({ ) : null } -
-
RATING
+
+
RATING
{rating || '-'}
-
-
USERNAME
+
+
USERNAME
-
-
FINAL SCORE
+
+
FINAL SCORE
{getFinalReviewResult()}
-
-
PROVISIONAL SCORE
+
+
PROVISIONAL SCORE
{getInitialReviewResult() ? getInitialReviewResult() : 'N/A'}
-
-
SUBMISSION DATE
+
+
SUBMISSION DATE
{moment(submissionTime).format('DD MMM YYYY')} {moment(submissionTime).format('HH:mm:ss')}
-
-
ACTIONS
+
+
ACTIONS
 - { +
+ View as + { + viewAsTable ? ( + + setViewAsTable(true)} /> + setViewAsTable(false)} /> + + ) : ( + + setViewAsTable(true)} /> + setViewAsTable(false)} /> + + ) + } +
+
+ { !isMM && (
{ @@ -564,9 +587,9 @@ class SubmissionsComponent extends React.Component {
) } - { + { isMM && ( -
+