Skip to content

Commit 7822683

Browse files
jmgasperjmgasper
committed
Reskin TOP-1393
1 parent d06a21f commit 7822683

File tree

52 files changed

+935
-1082
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+935
-1082
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ exports[`Matches shallow shapshot 1`] = `
2323

2424
exports[`Matches shallow shapshot 2`] = `
2525
<span
26-
className="src-shared-components-TrackIcon-___style__trackIcon___3gJ9l"
26+
className="src-shared-components-TrackIcon-___style__trackIcon___3gJ9l src-shared-components-TrackIcon-___style__haveTco___2E6IG"
2727
>
2828
<div
2929
className="src-shared-components-TrackIcon-___style__CH___3YWAb src-shared-components-TrackIcon-___style__main-icon___1q-1_"
@@ -44,7 +44,7 @@ exports[`Matches shallow shapshot 2`] = `
4444

4545
exports[`Matches shallow shapshot 3`] = `
4646
<span
47-
className="src-shared-components-TrackIcon-___style__trackIcon___3gJ9l"
47+
className="src-shared-components-TrackIcon-___style__trackIcon___3gJ9l src-shared-components-TrackIcon-___style__haveTco___2E6IG"
4848
>
4949
<div
5050
className="src-shared-components-TrackIcon-___style__CH___3YWAb src-shared-components-TrackIcon-___style__main-icon___1q-1_"

‎__tests__/shared/components/__snapshots__/Switch.jsx.snap

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@
33
exports[`Matches shallow shapshot 1`] = `
44
<Switch
55
enabled={false}
6+
isBlue={false}
67
onSwitch={[Function]}
78
theme={
89
Object {
10+
"blue": "src-shared-components-Switch-style___blue___UCM-_3",
911
"disabled": "src-shared-components-Switch-style___disabled___EEAxIO",
1012
"enabled": "src-shared-components-Switch-style___enabled___7dhGcX",
1113
"handle": "src-shared-components-Switch-style___handle___3s_OOJ",

‎__tests__/shared/components/__snapshots__/SwitchWithLabel.jsx.snap

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
exports[`Matches shallow shapshot 1`] = `
44
<SwitchWithLabel
55
enabled={false}
6+
isBlue={false}
67
labelAfter=""
78
labelBefore=""
89
onSwitch={[Function]}

‎__tests__/shared/components/challenge-listing/Filters/__snapshots__/FiltersPanel.jsx.snap

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ exports[`Matches shallow shapshot 2`] = `
4545
className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__filters___3um3W"
4646
>
4747
<div
48-
className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__filter-row___2Vfd_"
48+
className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__filter-row___2Vfd_ src-shared-components-challenge-listing-Filters-FiltersPanel-___style__filter-row-search-bar___8N6by"
4949
>
5050
<div
5151
className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__search-bar___15MSx"
@@ -56,7 +56,7 @@ exports[`Matches shallow shapshot 2`] = `
5656
</div>
5757
</div>
5858
<div
59-
className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__filter-row___2Vfd_"
59+
className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__filter-row___2Vfd_ src-shared-components-challenge-listing-Filters-FiltersPanel-___style__filter-row-bucket-selector-mobile___2jOjh"
6060
>
6161
<div
6262
className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__bucket-selector-mobile___JbE2n"
@@ -79,7 +79,7 @@ exports[`Matches shallow shapshot 2`] = `
7979
<span
8080
className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__label___3W9TU"
8181
>
82-
Challenge Category
82+
Category
8383
</span>
8484
<div
8585
className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__switches___10Wrx"
@@ -93,6 +93,7 @@ exports[`Matches shallow shapshot 2`] = `
9393
composeAdhocTheme="deeply"
9494
composeContextTheme="softly"
9595
enabled={false}
96+
isBlue={true}
9697
labelAfter="Design"
9798
labelBefore=""
9899
mapThemrProps={[Function]}
@@ -109,6 +110,7 @@ exports[`Matches shallow shapshot 2`] = `
109110
composeAdhocTheme="deeply"
110111
composeContextTheme="softly"
111112
enabled={false}
113+
isBlue={true}
112114
labelAfter="Development"
113115
labelBefore=""
114116
mapThemrProps={[Function]}
@@ -125,6 +127,7 @@ exports[`Matches shallow shapshot 2`] = `
125127
composeAdhocTheme="deeply"
126128
composeContextTheme="softly"
127129
enabled={false}
130+
isBlue={true}
128131
labelAfter="Data Science"
129132
labelBefore=""
130133
mapThemrProps={[Function]}
@@ -141,6 +144,7 @@ exports[`Matches shallow shapshot 2`] = `
141144
composeAdhocTheme="deeply"
142145
composeContextTheme="softly"
143146
enabled={false}
147+
isBlue={true}
144148
labelAfter="QA"
145149
labelBefore=""
146150
mapThemrProps={[Function]}
@@ -160,7 +164,7 @@ exports[`Matches shallow shapshot 2`] = `
160164
<span
161165
className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__label___3W9TU"
162166
>
163-
Challenge Type
167+
Type
164168
</span>
165169
<div
166170
className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__checkboxes___3ukXp"
@@ -207,9 +211,6 @@ exports[`Matches shallow shapshot 2`] = `
207211
/>
208212
</div>
209213
</div>
210-
<hr
211-
className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__hr___1WvP7"
212-
/>
213214
</div>
214215
<div
215216
className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__buttons___2r3xW"
@@ -227,7 +228,7 @@ exports[`Matches shallow shapshot 2`] = `
227228
}
228229
themePriority="adhoc-default-context"
229230
>
230-
RESET FILTERS
231+
Reset filters
231232
</Button>
232233
</div>
233234
</div>

‎__tests__/shared/components/challenge-listing/Sidebar/__snapshots__/index.jsx.snap

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,6 @@ exports[`Matches shallow shapshot 1`] = `
1717
selectBucket={[MockFunction]}
1818
/>
1919
</div>
20-
<hr
21-
className="src-shared-components-challenge-listing-Sidebar-___style__hr___2GEB7"
22-
/>
2320
</div>
2421
`;
2522

@@ -40,8 +37,5 @@ exports[`Matches shallow shapshot 2`] = `
4037
selectBucket={[MockFunction]}
4138
/>
4239
</div>
43-
<hr
44-
className="src-shared-components-challenge-listing-Sidebar-___style__hr___2GEB7"
45-
/>
4640
</div>
4741
`;

‎src/assets/images/arrow-prev-blue.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/images/icons_upload.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/images/open_in_new.svg

Lines changed: 8 additions & 0 deletions
Loading

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,20 @@ $down-arrow-size: $base-unit;
1515
.sortingBar {
1616
display: flex;
1717
justify-content: space-between;
18-
padding: 10px 0 16px 0;
1918
position: relative;
2019
background-color: $tc-white;
20+
padding: 20px 0;
2121

2222
.title {
23-
@include barlow-semi-bold;
23+
@include roboto-bold;
2424

2525
display: flex;
2626
align-items: center;
2727
color: $tco-black;
28-
font-size: 18px;
29-
line-height: 22px;
30-
margin: 0;
31-
padding: 4.5px 0 4.5px 10px;
28+
font-size: 24px;
29+
line-height: 32px;
3230
border: none;
33-
text-transform: uppercase;
34-
margin-left: 14px;
31+
text-transform: capitalize;
3532

3633
@include xs-to-md {
3734
margin-left: 16px;

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,13 @@ function Switch({
1414
enabled,
1515
onSwitch,
1616
theme,
17+
isBlue,
1718
}) {
1819
return (
1920
<div
20-
className={`${theme.switch} ${enabled ? theme.enabled : theme.disabled}`}
21+
className={`${theme.switch} ${enabled ? theme.enabled : theme.disabled} ${
22+
isBlue ? theme.blue : ''
23+
}`}
2124
onClick={() => onSwitch(!enabled)}
2225
onKeyPress={() => onSwitch(!enabled)}
2326
>
@@ -28,14 +31,17 @@ function Switch({
2831

2932
Switch.defaultProps = {
3033
enabled: false,
34+
isBlue: false,
3135
};
3236

3337
Switch.propTypes = {
3438
enabled: PT.bool,
39+
isBlue: PT.bool,
3540
theme: PT.shape({
3641
disabled: PT.string.isRequired,
3742
enabled: PT.string.isRequired,
3843
switch: PT.string.isRequired,
44+
blue: PT.string.isRequired,
3945
}).isRequired,
4046
onSwitch: PT.func.isRequired,
4147
};

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@
1010
width: 11px;
1111
}
1212

13+
.blue {
14+
&.enabled {
15+
background: $listing-checkbox-blue;
16+
}
17+
}
18+
1319
.disabled {
1420
background: $tc-gray-30;
1521

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ function SwitchWithLabel({
1717
labelBefore,
1818
onSwitch,
1919
theme,
20+
isBlue,
2021
}) {
2122
return (
2223
<div
@@ -34,6 +35,7 @@ function SwitchWithLabel({
3435
theme={{
3536
switch: theme.switch,
3637
}}
38+
isBlue={isBlue}
3739
/>
3840
<span>{labelAfter}</span>
3941
</div>
@@ -42,6 +44,7 @@ function SwitchWithLabel({
4244

4345
SwitchWithLabel.defaultProps = {
4446
enabled: false,
47+
isBlue: false,
4548
labelAfter: '',
4649
labelBefore: '',
4750
};
@@ -55,6 +58,7 @@ SwitchWithLabel.propTypes = {
5558
wrapper: PT.string.isRequired,
5659
}).isRequired,
5760
onSwitch: PT.func.isRequired,
61+
isBlue: PT.bool,
5862
};
5963

6064
export default themr('SwitchWithLabel', defaultStyle)(SwitchWithLabel);

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
@import '~styles/mixins';
22

33
.switch {
4-
margin-right: 5px;
54
position: relative;
6-
top: 3px;
75
}
86

97
.wrapper {
108
cursor: pointer;
11-
display: inline-block;
9+
display: flex;
1210
font-size: 14px;
1311
color: $tc-black;
14-
line-height: 22px;
12+
line-height: 18px;
13+
align-items: center;
14+
gap: 8px;
1515

1616
@include roboto-regular;
1717

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,24 +19,27 @@ export default function TrackIcon({
1919
abbreviationStyle = '';
2020
}
2121
return (
22-
<span styleName="trackIcon">
22+
<span styleName={`trackIcon ${tcoEligible ? 'haveTco' : ''}`}>
2323
{challengesUrl ? (
2424
<a
25-
href={`${challengesUrl}?filter[types][0]=${
26-
encodeURIComponent(type.id)}`}
25+
href={`${challengesUrl}?filter[types][0]=${encodeURIComponent(
26+
type.id,
27+
)}`}
2728
styleName={`${trackStyle} main-icon`}
2829
>
2930
{type.abbreviation}
3031
</a>
3132
) : (
32-
<div
33-
styleName={`${abbreviationStyle} main-icon`}
34-
>
33+
<div styleName={`${abbreviationStyle} main-icon`}>
3534
{type.abbreviation}
3635
</div>
3736
)}
3837
<a href={`${TCO_URL}`}>
39-
<div styleName={`${abbreviationStyle} tco-icon ${tcoEligible ? '' : 'hidden'}`}>
38+
<div
39+
styleName={`${abbreviationStyle} tco-icon ${
40+
tcoEligible ? '' : 'hidden'
41+
}`}
42+
>
4043
TCO
4144
</div>
4245
</a>

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

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,31 +8,34 @@ $track-radius-4: $corner-radius * 2;
88

99
.trackIcon {
1010
display: flex;
11-
width: $base-unit * 6;
12-
height: $base-unit * 6;
13-
margin-right: $track-space-20;
11+
margin-right: 16px;
1412
flex-direction: column;
1513

1614
@include sm {
1715
margin-right: $track-space-15;
1816
}
1917

2018
.main-icon {
21-
@include tc-label-md;
19+
@include barlow-bold;
2220

2321
text-align: center;
24-
line-height: $track-space-15;
2522
color: $tc-white;
26-
padding: $track-code-pad - 1 0 $track-code-pad;
23+
padding: 5px 7px 7px 7px;
2724
border-radius: 4px;
2825
cursor: pointer;
2926
width: 100%;
3027
height: 100%;
31-
border-bottom-left-radius: 0;
32-
border-bottom-right-radius: 0;
28+
font-size: 14px;
29+
line-height: 20px;
30+
31+
&.haveTco {
32+
border-bottom-left-radius: 0;
33+
border-bottom-right-radius: 0;
34+
}
3335

3436
&.CH {
35-
background: $track-code-green;
37+
background: rgba(22, 103, 154, 0.5);
38+
color: #2a2a2a;
3639
}
3740

3841
&.F2F {

0 commit comments

Comments
 (0)