Skip to content

Commit 2da963c

Browse files
kkartunovkkartunov
committed
challenges history theme init
1 parent 49f49ea commit 2da963c

File tree

4 files changed

+205
-2
lines changed

4 files changed

+205
-2
lines changed

‎src/shared/components/Contentful/_brackets.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,10 @@
154154
color: #0d61bf;
155155
text-decoration: none;
156156

157+
@include sm {
158+
text-decoration: underline;
159+
}
160+
157161
&:hover {
158162
text-decoration: none;
159163
color: #0d61bf;

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,16 @@ import LoadingIndicator from 'components/LoadingIndicator';
55
import { config } from 'topcoder-react-utils';
66
import cn from 'classnames';
77
import _ from 'lodash';
8-
import theme from './styles.scss';
98
import PodiumSpot from '../PodiumSpot';
109

10+
import defaultTheme from './themes/styles.scss';
11+
import tco23Theme from './tco23.scss';
12+
13+
const THEMES = {
14+
Default: defaultTheme,
15+
TCO23: tco23Theme,
16+
}
17+
1118
class ChallengeHistoryModal extends Component {
1219
constructor(props) {
1320
super(props);
@@ -36,7 +43,7 @@ class ChallengeHistoryModal extends Component {
3643
const pointsLabel = competitor['member_profile_basic.handle'] ? 'tco_leaderboard.tco_points' : 'points';
3744

3845
return (
39-
<Modal onCancel={onCancel} theme={theme}>
46+
<Modal onCancel={onCancel} theme={THEMES[themeName] || THEMES.Default}>
4047
<h3>
4148
Completed Challenges History
4249
</h3>

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

File renamed without changes.

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

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
@import "~styles/mixins";
2+
3+
$light-gray: #d4d4d4;
4+
5+
.container {
6+
@include roboto-regular;
7+
8+
color: $tc-gray-50;
9+
background: $tc-white;
10+
border-radius: 10px;
11+
top: 50%;
12+
width: 70%;
13+
max-height: 90%;
14+
overflow-y: auto;
15+
padding: 60px 78px 80px;
16+
17+
@media (max-width: 768px) {
18+
width: 90%;
19+
padding: 30px 15px;
20+
}
21+
22+
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;
30+
text-transform: uppercase;
31+
32+
@media (max-width: 768px) {
33+
font-size: 31px !important;
34+
font-weight: 500 !important;
35+
line-height: 33px !important;
36+
margin-bottom: 30px;
37+
}
38+
}
39+
}
40+
41+
.overlay {
42+
background-color: #2a2a2a;
43+
opacity: 0.95;
44+
border: none;
45+
height: 100%;
46+
left: 0;
47+
outline: none;
48+
position: fixed;
49+
top: 0;
50+
width: 100%;
51+
z-index: 998;
52+
}
53+
54+
.podium-spot-wrapper {
55+
text-align: center;
56+
display: flex;
57+
justify-content: center;
58+
margin-bottom: 50px;
59+
60+
> div > span {
61+
height: 128px;
62+
width: 128px;
63+
64+
img,
65+
svg {
66+
border-radius: 50%;
67+
height: 100%;
68+
width: 100%;
69+
}
70+
}
71+
}
72+
73+
.history-table {
74+
width: 100%;
75+
margin-bottom: 62px;
76+
77+
thead {
78+
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;
86+
text-transform: uppercase;
87+
border-bottom: 1px solid #d4d4d4;
88+
padding-bottom: 15px;
89+
}
90+
}
91+
92+
.row {
93+
border-bottom: 1px solid #d4d4d4;
94+
95+
.name {
96+
.link {
97+
color: #0d61bf;
98+
font-size: 14px;
99+
font-weight: 400;
100+
line-height: 51px;
101+
text-decoration: underline;
102+
103+
@media (max-width: 768px) {
104+
line-height: 30px;
105+
}
106+
107+
&:hover {
108+
text-decoration: none;
109+
}
110+
}
111+
}
112+
113+
.placement {
114+
color: #2a2a2a;
115+
font-size: 14px;
116+
font-weight: 500;
117+
line-height: 51px;
118+
}
119+
120+
.points {
121+
color: #2a2a2a;
122+
font-size: 14px;
123+
font-weight: 400;
124+
line-height: 51px;
125+
}
126+
}
127+
}
128+
129+
.buttons {
130+
margin-top: 10px;
131+
display: flex;
132+
flex-direction: row;
133+
justify-content: center;
134+
135+
.close-btn {
136+
color: #fafafb;
137+
font-family: Roboto, sans-serif;
138+
font-size: 14px;
139+
font-weight: 700;
140+
letter-spacing: 0.8px;
141+
line-height: 40px;
142+
background-color: #137d60;
143+
border-radius: 20px;
144+
border: none;
145+
text-transform: uppercase;
146+
padding: 0 20px;
147+
148+
&:hover {
149+
background-color: #0ab88a !important;
150+
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
151+
}
152+
}
153+
}
154+
155+
.header-table-content {
156+
display: flex;
157+
align-items: center;
158+
}
159+
160+
.sort-container {
161+
display: flex;
162+
flex-direction: column;
163+
margin-left: 5px;
164+
padding: 0;
165+
border: none;
166+
outline: none;
167+
background: transparent;
168+
}
169+
170+
.sort-container > div {
171+
width: 0;
172+
height: 0;
173+
border-left: 4px solid transparent;
174+
border-right: 4px solid transparent;
175+
}
176+
177+
.sort-up {
178+
border-bottom: 4px solid $light-gray;
179+
margin-bottom: 2px;
180+
181+
&.active {
182+
border-bottom: 4px solid $tc-black;
183+
}
184+
}
185+
186+
.sort-down {
187+
border-top: 4px solid $light-gray;
188+
189+
&.active {
190+
border-top: 4px solid $tc-black;
191+
}
192+
}

0 commit comments

Comments
 (0)