Skip to content

Commit e2e0f91

Browse files
kkartunovkkartunov
committed
his modal tco23 theme
1 parent 4259846 commit e2e0f91

File tree

5 files changed

+128
-74
lines changed

5 files changed

+128
-74
lines changed

‎__tests__/shared/components/Leaderboard/__snapshots__/LeaderboardTable.jsx.snap

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,8 @@ exports[`Matches shallow shapshot 1`] = `
5757
className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__col-handle___1wDhG"
5858
>
5959
<a
60-
href="undefined/members/undefined/"
60+
href="https://www.topcoder-dev.com/members/undefined/"
61+
rel="noreferrer"
6162
style={
6263
Object {
6364
"color": null,
@@ -111,7 +112,8 @@ exports[`Matches shallow shapshot 1`] = `
111112
className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__col-handle___1wDhG"
112113
>
113114
<a
114-
href="undefined/members/undefined/"
115+
href="https://www.topcoder-dev.com/members/undefined/"
116+
rel="noreferrer"
115117
style={
116118
Object {
117119
"color": null,
@@ -165,7 +167,8 @@ exports[`Matches shallow shapshot 1`] = `
165167
className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__col-handle___1wDhG"
166168
>
167169
<a
168-
href="undefined/members/undefined/"
170+
href="https://www.topcoder-dev.com/members/undefined/"
171+
rel="noreferrer"
169172
style={
170173
Object {
171174
"color": null,
@@ -219,7 +222,8 @@ exports[`Matches shallow shapshot 1`] = `
219222
className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__col-handle___1wDhG"
220223
>
221224
<a
222-
href="undefined/members/undefined/"
225+
href="https://www.topcoder-dev.com/members/undefined/"
226+
rel="noreferrer"
223227
style={
224228
Object {
225229
"color": null,

‎src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ import _ from 'lodash';
88
import PodiumSpot from '../PodiumSpot';
99

1010
import defaultTheme from './themes/styles.scss';
11-
import tco23Theme from './tco23.scss';
11+
import tco23Theme from './themes/tco23.scss';
1212

1313
const THEMES = {
1414
Default: defaultTheme,
1515
TCO23: tco23Theme,
16-
}
16+
};
1717

1818
class ChallengeHistoryModal extends Component {
1919
constructor(props) {
@@ -41,31 +41,32 @@ class ChallengeHistoryModal extends Component {
4141
const challengesOrdered = _.orderBy(challenges, [sortParam.field], [sortParam.order]);
4242
const placeLabel = competitor['member_profile_basic.handle'] ? 'tco_leaderboard.placement' : 'place';
4343
const pointsLabel = competitor['member_profile_basic.handle'] ? 'tco_leaderboard.tco_points' : 'points';
44+
const styles = THEMES[themeName] || THEMES.Default;
4445

4546
return (
4647
<Modal onCancel={onCancel} theme={THEMES[themeName] || THEMES.Default}>
4748
<h3>
4849
Completed Challenges History
4950
</h3>
50-
<div styleName="podium-spot-wrapper">
51+
<div className={styles['podium-spot-wrapper']}>
5152
<PodiumSpot
5253
competitor={competitor}
5354
isCopilot={isCopilot}
5455
isAlgo={isAlgo}
5556
themeName={themeName}
5657
/>
5758
</div>
58-
<table styleName="history-table">
59+
<table className={styles['history-table']}>
5960
<thead>
6061
<tr>
6162
<th>Challenge Name</th>
6263
{
6364
!isCopilot ? (
6465
<th>
65-
<div styleName="header-table-content">
66+
<div className={styles['header-table-content']}>
6667
<span>Placement</span>
6768
<button
68-
styleName="sort-container"
69+
className={styles['sort-container']}
6970
onClick={() => {
7071
if (!sortParam.field || sortParam.field !== placeLabel) {
7172
sortParam.field = placeLabel;
@@ -77,12 +78,12 @@ class ChallengeHistoryModal extends Component {
7778
}}
7879
type="button"
7980
>
80-
<div styleName={cn('sort-up', {
81-
active: sortParam.field === placeLabel && sortParam.order === 'asc',
81+
<div className={cn(styles['sort-up'], {
82+
active: sortParam.field === placeLabel && sortParam.order === styles.asc,
8283
})}
8384
/>
84-
<div styleName={cn('sort-down', {
85-
active: sortParam.field === placeLabel && sortParam.order === 'desc',
85+
<div className={cn(styles['sort-down'], {
86+
active: sortParam.field === placeLabel && sortParam.order === styles.desc,
8687
})}
8788
/>
8889
</button>
@@ -91,10 +92,10 @@ class ChallengeHistoryModal extends Component {
9192
) : null
9293
}
9394
<th>
94-
<div styleName="header-table-content">
95+
<div className={styles['header-table-content']}>
9596
<span>Points</span>
9697
<button
97-
styleName="sort-container"
98+
className={styles['sort-container']}
9899
onClick={() => {
99100
if (!sortParam.field || sortParam.field !== pointsLabel) {
100101
sortParam.field = pointsLabel;
@@ -106,12 +107,12 @@ class ChallengeHistoryModal extends Component {
106107
}}
107108
type="button"
108109
>
109-
<div styleName={cn('sort-up', {
110-
active: sortParam.field === pointsLabel && sortParam.order === 'asc',
110+
<div className={cn(styles['sort-up'], {
111+
active: sortParam.field === pointsLabel && sortParam.order === styles.asc,
111112
})}
112113
/>
113-
<div styleName={cn('sort-down', {
114-
active: sortParam.field === pointsLabel && sortParam.order === 'desc',
114+
<div className={cn(styles['sort-down'], {
115+
active: sortParam.field === pointsLabel && sortParam.order === styles.desc,
115116
})}
116117
/>
117118
</button>
@@ -122,19 +123,19 @@ class ChallengeHistoryModal extends Component {
122123
<tbody>
123124
{
124125
challengesOrdered.map(challenge => (
125-
<tr styleName="row" key={`${challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_id'] || challenge.challenge_id}`}>
126-
<td styleName="name">
127-
<a href={`${config.URL.BASE}/challenges/${challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_id'] || challenge.challenge_id || challenge['challenge.challenge_GUID']}/`} styleName="link" target="_blank" rel="noopener noreferrer">
126+
<tr className={styles.row} key={`${challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_id'] || challenge.challenge_id}`}>
127+
<td className={styles.name}>
128+
<a href={`${config.URL.BASE}/challenges/${challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_id'] || challenge.challenge_id || challenge['challenge.challenge_GUID']}/`} className={styles.link} target="_blank" rel="noopener noreferrer">
128129
{challenge.challenge_name || challenge['challenge.challenge_name'] || challenge['tco_leaderboard.challenge_id'] || challenge.challenge_id}
129130
</a>
130131
</td>
131132
{
132133
!isCopilot ? (
133-
<td styleName="placement">{challenge['tco_leaderboard.placement'] || challenge.place}</td>
134+
<td className={styles.placement}>{challenge['tco_leaderboard.placement'] || challenge.place}<span>placement</span></td>
134135
) : null
135136
}
136-
<td styleName="points">
137-
{challenge['tco_leaderboard.tco_points'] || challenge.points}
137+
<td className={styles.points}>
138+
{challenge['tco_leaderboard.tco_points'] || challenge.points}<span>points</span>
138139
</td>
139140
</tr>
140141
))
@@ -149,8 +150,8 @@ class ChallengeHistoryModal extends Component {
149150
<center><strong>No data available.</strong></center>
150151
)
151152
}
152-
<div styleName="buttons">
153-
<button onClick={onCancel} type="button" styleName="close-btn">
153+
<div className={styles.buttons}>
154+
<button onClick={onCancel} type="button" className={styles['close-btn']}>
154155
Return to page
155156
</button>
156157
</div>

‎src/shared/components/Leaderboard/ChallengeHistoryModal/themes/styles.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,17 @@ $light-gray: #d4d4d4;
123123
font-weight: 400;
124124
line-height: 51px;
125125
}
126+
127+
.placement,
128+
.points {
129+
@include sm {
130+
text-align: center;
131+
}
132+
133+
span {
134+
display: none;
135+
}
136+
}
126137
}
127138
}
128139

‎src/shared/components/Leaderboard/ChallengeHistoryModal/themes/tco23.scss

Lines changed: 81 additions & 43 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
$light-gray: #d4d4d4;
@@ -12,28 +13,29 @@ $light-gray: #d4d4d4;
1213
width: 70%;
1314
max-height: 90%;
1415
overflow-y: auto;
15-
padding: 60px 78px 80px;
16+
padding: 32px 32px 64px;
1617

1718
@media (max-width: 768px) {
1819
width: 90%;
19-
padding: 30px 15px;
20+
padding: 26px 16px 32px;
2021
}
2122

2223
h3 {
23-
color: #1e94a3;
24-
font-family: BarlowCondensed, sans-serif;
25-
font-size: 34px;
26-
font-weight: 500;
27-
line-height: 38px;
28-
text-align: center;
29-
margin-bottom: 40px;
24+
color: #2a2a2a;
25+
font-family: Barlow, sans-serif;
26+
font-size: 22px;
27+
font-weight: 600;
28+
line-height: 26px;
29+
padding-bottom: 24px;
3030
text-transform: uppercase;
31+
border-bottom: 1px solid #e9e9e9;
32+
margin-bottom: 24px;
3133

3234
@media (max-width: 768px) {
33-
font-size: 31px !important;
34-
font-weight: 500 !important;
35-
line-height: 33px !important;
36-
margin-bottom: 30px;
35+
font-size: 18px !important;
36+
line-height: 20px !important;
37+
padding-bottom: 18px;
38+
margin-bottom: 16px;
3739
}
3840
}
3941
}
@@ -75,53 +77,89 @@ $light-gray: #d4d4d4;
7577
margin-bottom: 62px;
7678

7779
thead {
80+
@include sm {
81+
display: none;
82+
}
83+
7884
th {
79-
color: #2a2a2a;
80-
font-family: Roboto, sans-serif;
81-
font-size: 14px;
82-
font-weight: 500;
83-
letter-spacing: 0.5px;
84-
line-height: 18px;
85-
text-align: left;
85+
color: #767676;
86+
font-family: Barlow, sans-serif;
87+
font-size: 11px;
88+
font-weight: 600;
8689
text-transform: uppercase;
87-
border-bottom: 1px solid #d4d4d4;
88-
padding-bottom: 15px;
90+
text-align: left;
91+
line-height: 14px;
92+
padding-bottom: 18px;
8993
}
9094
}
9195

9296
.row {
93-
border-bottom: 1px solid #d4d4d4;
97+
height: 56px;
98+
99+
@include sm {
100+
display: flex;
101+
flex-direction: column;
102+
height: auto;
103+
padding: 16px;
104+
width: calc(100vw - 78px);
105+
border-radius: 8px;
106+
background-color: #f4f4f4;
107+
margin-bottom: 8px;
108+
}
94109

95-
.name {
96-
.link {
97-
color: #0d61bf;
98-
font-size: 14px;
99-
font-weight: 400;
100-
line-height: 51px;
101-
text-decoration: underline;
110+
&:nth-child(odd) {
111+
background-color: #f4f4f4;
102112

103-
@media (max-width: 768px) {
104-
line-height: 30px;
105-
}
113+
td:first-child {
114+
border-top-left-radius: 8px;
115+
border-bottom-left-radius: 8px;
116+
}
117+
118+
td:last-child {
119+
border-top-right-radius: 8px;
120+
border-bottom-right-radius: 8px;
121+
}
122+
}
123+
124+
td {
125+
vertical-align: middle;
126+
127+
&:first-child {
128+
padding-left: 16px;
106129

107-
&:hover {
108-
text-decoration: none;
130+
@include sm {
131+
padding-left: 0;
109132
}
110133
}
111134
}
112135

113-
.placement {
114-
color: #2a2a2a;
115-
font-size: 14px;
116-
font-weight: 500;
117-
line-height: 51px;
136+
.name {
137+
.link {
138+
color: #0d61bf;
139+
font-size: 16px;
140+
font-weight: 500;
141+
line-height: 24px;
142+
text-decoration: none;
143+
144+
@include sm {
145+
text-decoration: underline;
146+
margin-bottom: 8px;
147+
display: block;
148+
}
149+
}
118150
}
119151

152+
.placement,
120153
.points {
121154
color: #2a2a2a;
122-
font-size: 14px;
123-
font-weight: 400;
124-
line-height: 51px;
155+
font-size: 16px;
156+
font-weight: 700;
157+
line-height: 24px;
158+
159+
span {
160+
font-weight: 400;
161+
padding-left: 8px;
162+
}
125163
}
126164
}
127165
}

‎src/shared/components/Leaderboard/LeaderboardTable/index.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ import React from 'react';
2727
import PT from 'prop-types';
2828
import { Avatar } from 'topcoder-react-ui-kit';
2929
import { config } from 'topcoder-react-utils';
30-
import _ from 'lodash';
3130
import DefaultAvatar from 'assets/images/default-avatar-photo.svg';
3231
import { getRatingColor } from 'utils/tc';
3332

@@ -121,8 +120,9 @@ export default function LeaderboardTable(props) {
121120
</div>
122121
) : (
123122
<a
124-
href={`${window.origin}/members/${competitor['member_profile_basic.handle'] || competitor.handle}/`}
125-
target={`${_.includes(window.origin, 'www') ? '_self' : '_blank'}`}
123+
href={`${config.URL.BASE}/members/${competitor['member_profile_basic.handle'] || competitor.handle}/`}
124+
target="_blank"
125+
rel="noreferrer"
126126
style={{ color: rating !== undefined ? getRatingColor(rating) : null }}
127127
>
128128
{

0 commit comments

Comments
 (0)