Skip to content

Commit 9e6b8cf

Browse files
vtm9vtm9
committed
Improve styles
1 parent f1b99c0 commit 9e6b8cf

9 files changed

Lines changed: 155 additions & 115 deletions

File tree

‎services/app/apps/codebattle/assets/css/style.scss‎

Lines changed: 52 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
$body-bg: #e5e5e5;
22
$cb-text-color: #999;
3+
$cb-text-light-color: #ddd;
34
$cb-border-radius: 0.5rem;
45
$cb-success: #46a077;
56
$cb-hovered-success: #398862;
@@ -51,13 +52,21 @@ $orange: rgba(238, 55, 55, 0.76);
5152
$link-hover-color: $orange;
5253
$border-radius-sm: 0%;
5354
$btn-border-width: 2px;
54-
55+
/*
5556
$gold: #c9a56c; // Grand Slam – polished gold highlight
5657
$silver: #a3acb9; // Masters – brighter brushed silver (more readable)
5758
$bronze: #b07a4a; // Elite – copper bronze highlight
5859
$platinum: #8b919a; // Pro – cooler, slightly darker than silver (clear separation)
5960
$steel: #6f7680; // Challenger – neutral steel (a touch lighter than iron)
6061
$iron: #59606a; // Rookie – darker iron (avoids “disabled outline” look)
62+
*/
63+
64+
$gold: #e0bf7a; // Grand Slam – brighter polished gold
65+
$silver: #c2c9d6; // Masters – cleaner, lighter brushed silver
66+
$bronze: #c48a57; // Elite – brighter copper bronze
67+
$platinum: #a4aab3; // Pro – lighter cool platinum, still distinct from silver
68+
$steel: #8a919c; // Challenger – brighter neutral steel
69+
$iron: #6f7782; // Rookie – lifted iron, no “disabled” vibes
6170

6271
$cb-grand-slam-bg: $gold;
6372
$cb-masters-bg: $silver;
@@ -1191,7 +1200,39 @@ a:hover {
11911200
max-width: 180px;
11921201
}
11931202

1203+
$cb-radius: 0.5rem;
1204+
$cb-inset-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
1205+
1206+
// Gold – warmer & shinier
1207+
$cb-gold-top: #b08d5d;
1208+
$cb-gold-bottom: #9a7b51;
1209+
1210+
// Silver – lighter steel, better contrast
1211+
$cb-silver-top: #565d6a;
1212+
$cb-silver-bottom: #4c535f;
1213+
1214+
// Bronze – brighter copper, still deep
1215+
$cb-bronze-top: #5a3c29;
1216+
$cb-bronze-bottom: #4a3223;
1217+
1218+
@mixin cb-place-bg($top, $bottom) {
1219+
background: linear-gradient(180deg, $top 0%, $bottom 100%) !important;
1220+
border-radius: $cb-radius;
1221+
box-shadow: $cb-inset-shadow;
1222+
}
11941223
.cb-gold-place-bg {
1224+
@include cb-place-bg($cb-gold-top, $cb-gold-bottom);
1225+
}
1226+
1227+
.cb-silver-place-bg {
1228+
@include cb-place-bg($cb-silver-top, $cb-silver-bottom);
1229+
}
1230+
1231+
.cb-bronze-place-bg {
1232+
@include cb-place-bg($cb-bronze-top, $cb-bronze-bottom);
1233+
}
1234+
1235+
/* .cb-gold-place-bg {
11951236
background: linear-gradient(180deg, #8f734c 0%, #7f6442 100%) !important;
11961237
border-radius: 0.5rem;
11971238
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
@@ -1207,7 +1248,7 @@ a:hover {
12071248
background: linear-gradient(180deg, #3a271a 0%, #2f2016 100%) !important;
12081249
border-radius: 0.5rem;
12091250
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
1210-
}
1251+
} */
12111252

12121253
#tasklang-dropdown {
12131254
&-toggle,
@@ -1963,24 +2004,6 @@ a:hover {
19632004
max-width: 180px;
19642005
}
19652006

1966-
.cb-gold-place-bg {
1967-
background: linear-gradient(180deg, #8f734c 0%, #7f6442 100%) !important;
1968-
border-radius: 0.5rem;
1969-
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
1970-
}
1971-
1972-
.cb-silver-place-bg {
1973-
background: linear-gradient(180deg, #3a3f4a 0%, #343944 100%) !important;
1974-
border-radius: 0.5rem;
1975-
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
1976-
}
1977-
1978-
.cb-bronze-place-bg {
1979-
background: linear-gradient(180deg, #3a271a 0%, #2f2016 100%) !important;
1980-
border-radius: 0.5rem;
1981-
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
1982-
}
1983-
19842007
.user-select-none {
19852008
user-select: none;
19862009
-webkit-user-select: text;
@@ -2232,6 +2255,15 @@ a.cb-text:hover {
22322255
color: white;
22332256
}
22342257

2258+
.cb-text-light {
2259+
color: $cb-text-light-color;
2260+
font-family: "Arial", sans-serif;
2261+
}
2262+
2263+
a.cb-text-light:hover {
2264+
color: white;
2265+
}
2266+
22352267
.cb-text-success {
22362268
color: $cb-success;
22372269
}

‎services/app/apps/codebattle/assets/js/widgets/pages/rating/RatingList.jsx‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ const decorateJoinedDate = (str) => moment.utc(str).format('LL');
1515
const renderSortArrow = (attribute, sortParams) => {
1616
const { attribute: currentAttribute, direction } = sortParams;
1717
const classes = attribute === currentAttribute
18-
? `cb-sort-arrow ${direction}`
19-
: 'sort-arrows';
18+
? `cb-sort-arrow ${direction}`
19+
: 'sort-arrows';
2020

2121
return <span className={`d-inline-block ${classes}`} />;
2222
};
@@ -30,10 +30,18 @@ const renderUser = (page, pageSize, user, index) => (
3030
<td className="tex-left p-3 align-middle text-nowrap text-white cb-border-color">
3131
<UserInfo user={user} truncate />
3232
</td>
33-
<td className="p-3 align-middle text-nowrap text-white cb-border-color">{user.rank}</td>
34-
<td className="p-3 align-middle text-nowrap text-white cb-border-color">{user.points}</td>
35-
<td className="p-3 align-middle text-nowrap text-white cb-border-color">{user.rating}</td>
36-
<td className="p-3 align-middle text-nowrap text-white cb-border-color">{user.gamesPlayed}</td>
33+
<td className="p-3 align-middle text-nowrap text-white cb-border-color">
34+
{user.rank}
35+
</td>
36+
<td className="p-3 align-middle text-nowrap text-white cb-border-color">
37+
{user.points}
38+
</td>
39+
<td className="p-3 align-middle text-nowrap text-white cb-border-color">
40+
{user.rating}
41+
</td>
42+
<td className="p-3 align-middle text-nowrap text-white cb-border-color">
43+
{user.gamesPlayed}
44+
</td>
3745
<td className="p-3 align-middle text-nowrap text-white cb-border-color">
3846
{decorateJoinedDate(user.insertedAt)}
3947
</td>
@@ -165,17 +173,20 @@ function UsersRating() {
165173

166174
<ul className="nav nav-pills justify-content-center mb-3">
167175
{periods.map((period) => renderFilterPeriodButtons(
168-
period,
169-
filterParams,
170-
setFilterParams,
171-
setPage,
172-
))}
176+
period,
177+
filterParams,
178+
setFilterParams,
179+
setPage,
180+
))}
173181
</ul>
174182

175183
<div className="form-inline justify-content-between">
176184
<div className="input-group mb-3">
177185
<div className="input-group-prepend">
178-
<span className="input-group-text cb-bg-highlight-panel cb-border-color text-white" id="basic-addon1">
186+
<span
187+
className="input-group-text cb-bg-highlight-panel cb-border-color text-white"
188+
id="basic-addon1"
189+
>
179190
<FontAwesomeIcon icon="search" />
180191
</span>
181192
</div>
@@ -236,7 +247,7 @@ function UsersRating() {
236247
</div>
237248
<div className="overflow-auto">
238249
<table className="table">
239-
<thead className="text-left cb-text">
250+
<thead className="text-left cb-text-light">
240251
<tr>
241252
<th className="p-3 text-nowrap border-0">№</th>
242253
<th className="p-3 text-nowrap border-0">User</th>

‎services/app/apps/codebattle/assets/js/widgets/pages/tournament/FinishedLeaderboard.jsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ function FinishedLeaderboard({ leaderboard }) {
3434
const safePageNumber = Math.min(pageNumber, totalPages);
3535
const pagedLeaderboard = useMemo(
3636
() => leaderboard.slice(
37-
(safePageNumber - 1) * pageSize,
38-
safePageNumber * pageSize,
39-
),
37+
(safePageNumber - 1) * pageSize,
38+
safePageNumber * pageSize,
39+
),
4040
[leaderboard, pageSize, safePageNumber],
4141
);
4242
const canGoPrev = safePageNumber > 1;
@@ -77,7 +77,7 @@ function FinishedLeaderboard({ leaderboard }) {
7777
<span className="font-weight-bold">{i18next.t('Leaderboard')}</span>
7878
</div>
7979
<div className="d-flex cb-overflow-x-auto">
80-
<table className="table cb-text table-striped cb-custom-event-table m-1">
80+
<table className="table cb-text-light table-striped cb-custom-event-table m-1">
8181
<thead>
8282
<tr>
8383
<th className="p-1 pl-4 font-weight-light border-0">
@@ -133,10 +133,14 @@ function FinishedLeaderboard({ leaderboard }) {
133133
maxWidth: '13ch',
134134
}}
135135
>
136-
{(item?.userLang || item?.user_lang || item?.lang) && (
136+
{(item?.userLang
137+
|| item?.user_lang
138+
|| item?.lang) && (
137139
<LanguageIcon
138140
className="mr-1"
139-
lang={item?.userLang || item?.user_lang || item?.lang}
141+
lang={
142+
item?.userLang || item?.user_lang || item?.lang
143+
}
140144
/>
141145
)}
142146
{(item?.userName ?? '').slice(0, 9)

‎services/app/apps/codebattle/assets/js/widgets/pages/tournament/PlayersMatchesPanel.jsx‎

Lines changed: 50 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
import React, {
2-
useMemo,
3-
useState,
4-
useEffect,
5-
useRef,
6-
memo,
2+
useMemo, useState, useEffect, useRef, memo,
73
} from 'react';
84

95
import cn from 'classnames';
@@ -33,18 +29,15 @@ const filterControlsClassName = cn(
3329

3430
const searchLabelClassName = cn(
3531
'text-nowrap mb-0 mr-2 font-weight-bold text-uppercase small',
36-
'cb-text',
32+
'cb-text-light',
3733
);
3834

3935
const searchInputClassName = cn(
4036
'form-control form-control-sm',
4137
'cb-bg-highlight-panel cb-border-color text-white',
4238
);
4339

44-
const fuzzyBadgeClassName = cn(
45-
'badge cb-text ml-2',
46-
'cb-bg-panel',
47-
);
40+
const fuzzyBadgeClassName = cn('badge cb-text-light ml-2', 'cb-bg-panel');
4841

4942
const isFuzzyMatch = (value, query) => {
5043
if (!query) return true;
@@ -65,40 +58,32 @@ const isFuzzyMatch = (value, query) => {
6558

6659
const PlayersList = memo(
6760
({
68-
players,
69-
matchList,
70-
currentUserId,
71-
searchedUserId,
72-
hideBots,
73-
}) => players.map((player) => {
74-
if (player.id === searchedUserId) {
75-
return <></>;
76-
}
77-
78-
const userMatches = matchList.filter((match) => match.playerIds.includes(player.id));
79-
80-
return (
81-
<TournamentUserPanel
82-
key={`user-panel-${player.id}`}
83-
matches={userMatches}
84-
currentUserId={currentUserId}
85-
userId={player.id}
86-
name={player.name}
87-
score={player.score}
88-
place={player.place}
89-
isBanned={player.isBanned}
90-
searchedUserId={searchedUserId}
91-
hideBots={hideBots}
92-
/>
93-
);
94-
}),
61+
players, matchList, currentUserId, searchedUserId, hideBots,
62+
}) => players.map((player) => {
63+
if (player.id === searchedUserId) {
64+
return <></>;
65+
}
66+
67+
const userMatches = matchList.filter((match) => match.playerIds.includes(player.id));
68+
69+
return (
70+
<TournamentUserPanel
71+
key={`user-panel-${player.id}`}
72+
matches={userMatches}
73+
currentUserId={currentUserId}
74+
userId={player.id}
75+
name={player.name}
76+
score={player.score}
77+
place={player.place}
78+
isBanned={player.isBanned}
79+
searchedUserId={searchedUserId}
80+
hideBots={hideBots}
81+
/>
82+
);
83+
}),
9584
);
9685

97-
const SearchedUserPanel = memo(({
98-
searchedUser,
99-
matchList,
100-
currentUserId,
101-
}) => {
86+
const SearchedUserPanel = memo(({ searchedUser, matchList, currentUserId }) => {
10287
if (!searchedUser) {
10388
return <></>;
10489
}
@@ -164,23 +149,29 @@ function PlayersMatchesPanel({
164149

165150
const normalizedPageSize = Number(pageSize);
166151
const safePageSize = normalizedPageSize > 0 ? normalizedPageSize : 16;
167-
const totalPages = Math.max(1, Math.ceil(basePlayersList.length / safePageSize));
152+
const totalPages = Math.max(
153+
1,
154+
Math.ceil(basePlayersList.length / safePageSize),
155+
);
168156
const normalizedPageNumber = Number(pageNumber);
169157
const safePageNumber = Number.isFinite(normalizedPageNumber) && normalizedPageNumber > 0
170-
? Math.min(normalizedPageNumber, totalPages)
171-
: 1;
158+
? Math.min(normalizedPageNumber, totalPages)
159+
: 1;
172160

173161
const playersShowList = useMemo(
174162
() => basePlayersList
175-
.slice(safePageSize * (safePageNumber - 1), safePageSize * safePageNumber)
176-
.reduce((acc, player) => {
177-
if (player.id === currentUserId) {
178-
return [player, ...acc];
179-
}
180-
181-
acc.push(player);
182-
return acc;
183-
}, []),
163+
.slice(
164+
safePageSize * (safePageNumber - 1),
165+
safePageSize * safePageNumber,
166+
)
167+
.reduce((acc, player) => {
168+
if (player.id === currentUserId) {
169+
return [player, ...acc];
170+
}
171+
172+
acc.push(player);
173+
return acc;
174+
}, []),
184175
[basePlayersList, currentUserId, safePageSize, safePageNumber],
185176
);
186177

@@ -227,9 +218,11 @@ function PlayersMatchesPanel({
227218
}
228219

229220
requestAllPlayersInFlight.current = true;
230-
dispatch(requestAllPlayersAdmin(() => {
231-
requestAllPlayersInFlight.current = false;
232-
}));
221+
dispatch(
222+
requestAllPlayersAdmin(() => {
223+
requestAllPlayersInFlight.current = false;
224+
}),
225+
);
233226
}, [dispatch, canModerate, players, playersCount]);
234227

235228
useEffect(() => {

0 commit comments

Comments
 (0)