Skip to content

Commit d7b0baa

Browse files
dedywahyudidedywahyudi
authored
Merge pull request #6568 from topcoder-platform/f2f-30277179-4
Topcoder Reskin - Challenge Icons Colors
2 parents f2ca64f + eb42961 commit d7b0baa

File tree

6 files changed

+160
-91
lines changed

6 files changed

+160
-91
lines changed

‎__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ exports[`Matches shallow shapshot 1`] = `
55
className="src-shared-components-TrackIcon-___style__trackIcon___3gJ9l"
66
>
77
<div
8-
className="src-shared-components-TrackIcon-___style__development___1LZdf src-shared-components-TrackIcon-___style__main-icon___1q-1_"
8+
className="src-shared-components-TrackIcon-___style__CH___3YWAb src-shared-components-TrackIcon-___style__main-icon___1q-1_"
99
>
1010
CH
1111
</div>
1212
<a
1313
href="https://www.topcoder-dev.com/tco"
1414
>
1515
<div
16-
className="src-shared-components-TrackIcon-___style__hidden___JXTEt"
16+
className="src-shared-components-TrackIcon-___style__CH___3YWAb src-shared-components-TrackIcon-___style__tco-icon___18ZV7 src-shared-components-TrackIcon-___style__hidden___JXTEt"
1717
>
1818
TCO
1919
</div>
@@ -26,15 +26,15 @@ exports[`Matches shallow shapshot 2`] = `
2626
className="src-shared-components-TrackIcon-___style__trackIcon___3gJ9l"
2727
>
2828
<div
29-
className="src-shared-components-TrackIcon-___style__development___1LZdf src-shared-components-TrackIcon-___style__main-icon___1q-1_"
29+
className="src-shared-components-TrackIcon-___style__CH___3YWAb src-shared-components-TrackIcon-___style__main-icon___1q-1_"
3030
>
3131
CH
3232
</div>
3333
<a
3434
href="https://www.topcoder-dev.com/tco"
3535
>
3636
<div
37-
className="src-shared-components-TrackIcon-___style__development___1LZdf src-shared-components-TrackIcon-___style__tco-icon___18ZV7"
37+
className="src-shared-components-TrackIcon-___style__CH___3YWAb src-shared-components-TrackIcon-___style__tco-icon___18ZV7"
3838
>
3939
TCO
4040
</div>
@@ -47,15 +47,15 @@ exports[`Matches shallow shapshot 3`] = `
4747
className="src-shared-components-TrackIcon-___style__trackIcon___3gJ9l"
4848
>
4949
<div
50-
className="src-shared-components-TrackIcon-___style__development___1LZdf src-shared-components-TrackIcon-___style__main-icon___1q-1_"
50+
className="src-shared-components-TrackIcon-___style__CH___3YWAb src-shared-components-TrackIcon-___style__main-icon___1q-1_"
5151
>
5252
CH
5353
</div>
5454
<a
5555
href="https://www.topcoder-dev.com/tco"
5656
>
5757
<div
58-
className="src-shared-components-TrackIcon-___style__development___1LZdf src-shared-components-TrackIcon-___style__tco-icon___18ZV7"
58+
className="src-shared-components-TrackIcon-___style__CH___3YWAb src-shared-components-TrackIcon-___style__tco-icon___18ZV7"
5959
>
6060
TCO
6161
</div>

‎src/shared/components/TrackIcon/index.jsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ export default function TrackIcon({
1414
}) {
1515
const TCO_URL = `${MAIN_URL}/tco`;
1616
const trackStyle = track.replace(' ', '-').toLowerCase();
17+
let abbreviationStyle = type.abbreviation;
18+
if (['CH', 'F2F', 'TSK'].indexOf(abbreviationStyle) < 0) {
19+
abbreviationStyle = '';
20+
}
1721
return (
1822
<span styleName="trackIcon">
1923
{challengesUrl ? (
@@ -26,13 +30,13 @@ export default function TrackIcon({
2630
</a>
2731
) : (
2832
<div
29-
styleName={`${trackStyle} main-icon`}
33+
styleName={`${abbreviationStyle} main-icon`}
3034
>
3135
{type.abbreviation}
3236
</div>
3337
)}
3438
<a href={`${TCO_URL}`}>
35-
<div styleName={tcoEligible ? `${trackStyle} tco-icon` : 'hidden'}>
39+
<div styleName={`${abbreviationStyle} tco-icon ${tcoEligible ? '' : 'hidden'}`}>
3640
TCO
3741
</div>
3842
</a>

‎src/shared/components/TrackIcon/style.scss

Lines changed: 14 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,6 @@ $track-space-10: $base-unit * 2;
55
$track-space-15: $base-unit * 3;
66
$track-space-20: $base-unit * 4;
77
$track-radius-4: $corner-radius * 2;
8-
$track-code-green: #35ac35;
9-
$track-code-blue: #2984bd;
10-
$track-code-turquose: #0ab88a;
118

129
.trackIcon {
1310
display: flex;
@@ -34,25 +31,16 @@ $track-code-turquose: #0ab88a;
3431
border-bottom-left-radius: 0;
3532
border-bottom-right-radius: 0;
3633

37-
&.design,
38-
&.generic {
39-
background: $track-code-blue;
40-
}
41-
42-
&.develop,
43-
&.development {
34+
&.CH {
4435
background: $track-code-green;
4536
}
4637

47-
&.qa,
48-
&.quality-assurance {
49-
background: $track-code-turquose;
38+
&.F2F {
39+
background: $track-code-blue;
5040
}
5141

52-
&.data_science,
53-
&.data-science,
54-
&.data {
55-
background: $tc-orange-110;
42+
&.TSK {
43+
background: $track-code-turquose;
5644
}
5745
}
5846

@@ -69,29 +57,19 @@ $track-code-turquose: #0ab88a;
6957
border-top-left-radius: 0;
7058
border-top-right-radius: 0;
7159

72-
&.design,
73-
&.generic {
74-
color: $tc-light-blue-110;
75-
background: $tc-light-blue-10;
76-
}
77-
78-
&.develop,
79-
&.development {
80-
color: $tc-green-110;
81-
background: $tc-green-10;
60+
&.CH {
61+
color: $track-code-green;
62+
background: $track-code-green-light;
8263
}
8364

84-
&.qa,
85-
&.quality-assurance {
86-
color: #0ab88a;
87-
background: #c1f5e7;
65+
&.F2F {
66+
color: $track-code-blue;
67+
background: $track-code-blue-light;
8868
}
8969

90-
&.data_science,
91-
&.data-science,
92-
&.data {
93-
color: $tc-orange-110;
94-
background: $tc-orange-10;
70+
&.TSK {
71+
color: $track-code-turquose;
72+
background: $track-code-turquose-light;
9573
}
9674
}
9775

‎src/shared/components/challenge-detail/Header/ChallengeTags.jsx

Lines changed: 33 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,14 @@ import { config } from 'topcoder-react-utils';
1313

1414
import {
1515
Tag,
16-
DataScienceTrackTag,
17-
DataScienceTrackEventTag,
18-
DesignTrackTag,
19-
DesignTrackEventTag,
2016
DevelopmentTrackTag,
21-
DevelopmentTrackEventTag,
22-
QATrackTag,
23-
QATrackEventTag,
2417
} from 'topcoder-react-ui-kit';
2518

2619
import { COMPETITION_TRACKS } from 'utils/tc';
2720
import VerifiedTag from 'components/challenge-listing/VerifiedTag';
2821
import MatchScore from 'components/challenge-listing/ChallengeCard/MatchScore';
2922
import { calculateScore } from '../../../utils/challenge-listing/helper';
30-
import style from './style.scss';
23+
import './style.scss';
3124

3225
export default function ChallengeTags(props) {
3326
const {
@@ -42,66 +35,59 @@ export default function ChallengeTags(props) {
4235
openForRegistrationChallenges,
4336
} = props;
4437

45-
let EventTag;
46-
let TrackTag;
47-
switch (track) {
48-
case COMPETITION_TRACKS.DS:
49-
EventTag = DataScienceTrackEventTag;
50-
TrackTag = DataScienceTrackTag;
51-
break;
52-
case COMPETITION_TRACKS.DES:
53-
EventTag = DesignTrackEventTag;
54-
TrackTag = DesignTrackTag;
55-
break;
56-
case COMPETITION_TRACKS.DEV:
57-
EventTag = DevelopmentTrackEventTag;
58-
TrackTag = DevelopmentTrackTag;
59-
break;
60-
case COMPETITION_TRACKS.QA:
61-
EventTag = QATrackEventTag;
62-
TrackTag = QATrackTag;
63-
break;
64-
default:
65-
throw new Error('Wrong competition track value');
66-
}
67-
68-
6938
const filteredChallenge = _.find(openForRegistrationChallenges, { id: challengeId });
7039
const matchSkills = filteredChallenge ? filteredChallenge.match_skills || [] : [];
7140
const matchScore = filteredChallenge ? filteredChallenge.jaccard_index || [] : 0;
7241

7342
const tags = technPlatforms.filter(tag => !matchSkills.includes(tag));
43+
const abbreviationName = challengeType ? challengeType.name : null;
44+
let abbreviation;
45+
switch (abbreviationName) {
46+
case 'First2Finish':
47+
abbreviation = 'F2F';
48+
break;
49+
case 'Challenge':
50+
abbreviation = 'CH';
51+
break;
52+
case 'Task':
53+
abbreviation = 'TSK';
54+
break;
55+
default:
56+
abbreviation = null;
57+
}
7458

7559
return (
7660
<div>
7761
{
78-
challengeType
79-
&& (
80-
<div styleName={`type-tag ${track === COMPETITION_TRACKS.QA ? 'qa' : ''}`}>
81-
<TrackTag
62+
abbreviation && (
63+
<div styleName={`type-tag ${abbreviation} ${track === COMPETITION_TRACKS.QA ? 'qa' : ''}`}>
64+
<Tag
8265
onClick={() => (
8366
setImmediate(() => setChallengeListingFilter(
84-
{ types: [challengeType.abbreviation] },
67+
{ types: [abbreviation] },
8568
))
8669
)
8770
}
88-
to={`${challengesUrl}?types[]=${encodeURIComponent(challengeType.abbreviation)}`}
71+
to={`${challengesUrl}?types[]=${encodeURIComponent(abbreviation)}`}
8972
>
90-
{challengeType.name}
91-
</TrackTag>
73+
{abbreviationName}
74+
</Tag>
9275
</div>
9376
)
9477
}
9578
{
96-
events.map(event => (
97-
<EventTag
98-
to={`https://${event}.topcoder.com`}
79+
abbreviation ? events.map(event => (
80+
<div
9981
key={event}
100-
theme={track === COMPETITION_TRACKS.QA ? { button: style.qaTrackEventTag } : undefined}
82+
styleName={`event-tag ${abbreviation}`}
10183
>
102-
{event}
103-
</EventTag>
104-
))
84+
<Tag
85+
to={`https://${event}.topcoder.com`}
86+
>
87+
{event}
88+
</Tag>
89+
</div>
90+
)) : null
10591
}
10692
{
10793
matchScore > 0 && config.ENABLE_RECOMMENDER && (

‎src/shared/components/challenge-detail/Header/style.scss

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* stylelint-disable no-descending-specificity */
12
@import '~styles/mixins';
23

34
.challengeAction {
@@ -159,6 +160,98 @@
159160

160161
.type-tag {
161162
display: inline-block;
163+
164+
a {
165+
color: $tc-white;
166+
167+
&:active,
168+
&:focus,
169+
&:hover {
170+
color: $tc-white;
171+
}
172+
}
173+
174+
&.CH {
175+
a {
176+
background: $track-code-green;
177+
178+
&:active,
179+
&:focus,
180+
&:hover {
181+
background-color: $track-code-green;
182+
}
183+
}
184+
}
185+
186+
&.F2F {
187+
a {
188+
background: $track-code-blue;
189+
190+
&:active,
191+
&:focus,
192+
&:hover {
193+
background-color: $track-code-blue;
194+
}
195+
}
196+
}
197+
198+
&.TSK {
199+
a {
200+
background: $track-code-turquose;
201+
202+
&:active,
203+
&:focus,
204+
&:hover {
205+
background-color: $track-code-turquose;
206+
}
207+
}
208+
}
209+
}
210+
211+
.event-tag {
212+
display: inline-block;
213+
214+
&.CH {
215+
a {
216+
background-color: $track-code-green-light;
217+
color: $track-code-green;
218+
219+
&:active,
220+
&:focus,
221+
&:hover {
222+
background-color: $track-code-green-light;
223+
color: $track-code-green;
224+
}
225+
}
226+
}
227+
228+
&.F2F {
229+
a {
230+
background-color: $track-code-blue-light;
231+
color: $track-code-blue;
232+
233+
&:active,
234+
&:focus,
235+
&:hover {
236+
background-color: $track-code-blue-light;
237+
color: $track-code-blue;
238+
}
239+
}
240+
}
241+
242+
&.TSK {
243+
a {
244+
background-color: $track-code-turquose-light;
245+
color: $track-code-turquose;
246+
247+
&:active,
248+
&:focus,
249+
&:hover {
250+
background-color: $track-code-turquose-light;
251+
color: $track-code-turquose;
252+
}
253+
}
254+
}
162255
}
163256

164257
.qa {

‎src/styles/_mixins/_variables.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,11 @@ $listing-avatar-white: #f0f0f0;
4545
$profile-skill-badge: #227681;
4646
$profile-member-wins: #1e94a3;
4747
$profile-border-gray: #e9e9e9;
48+
49+
/* track color */
50+
$track-code-green: #35ac35;
51+
$track-code-green-light: #d8fdd8;
52+
$track-code-blue: #2984bd;
53+
$track-code-blue-light: #bae1f9;
54+
$track-code-turquose: #0ab88a;
55+
$track-code-turquose-light: #c1f5e7;

0 commit comments

Comments
 (0)