Skip to content

Commit f1b99c0

Browse files
committed
Mega update
1 parent 5b46376 commit f1b99c0

56 files changed

Lines changed: 2106 additions & 1491 deletions

Some content is hidden

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

services/app/apps/codebattle/assets/css/custom.scss

Lines changed: 252 additions & 112 deletions
Large diffs are not rendered by default.

services/app/apps/codebattle/assets/css/external.scss

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -294,6 +294,27 @@ $dark-red: #b00020;
294294
border: 1px solid #8C64FF;
295295
}
296296

297+
.cb-ranking-page-btn {
298+
width: 2rem;
299+
height: 2rem;
300+
padding: 0;
301+
display: inline-flex;
302+
align-items: center;
303+
justify-content: center;
304+
}
305+
306+
.cb-ranking-pagination {
307+
gap: 0.5rem;
308+
}
309+
310+
.cb-ranking-pagination .cb-ranking-page-btn {
311+
margin: 0;
312+
}
313+
314+
.cb-ranking-pagination .cb-ranking-page-btn + .cb-ranking-page-btn {
315+
margin-left: 0.4rem;
316+
}
317+
297318
.cb-custom-event-stage-section {
298319
background-color: #30333F;
299320
border-radius: 25px;

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

Lines changed: 78 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
$body-bg: #e5e5e5;
2-
$success: #82b792;
32
$cb-text-color: #999;
43
$cb-border-radius: 0.5rem;
5-
$cb-success: #32cd32;
6-
$cb-hovered-success: #28a428;
4+
$cb-success: #46a077;
5+
$cb-hovered-success: #398862;
76
$cb-border-radius: 0.5rem;
87

98
$cb-secondary: #3a3f50;
@@ -52,14 +51,29 @@ $orange: rgba(238, 55, 55, 0.76);
5251
$link-hover-color: $orange;
5352
$border-radius-sm: 0%;
5453
$btn-border-width: 2px;
55-
$gold: #daa520;
5654

57-
$cb-rookie-bg: rgba(50, 205, 50, 1);
58-
$cb-challenger-bg: rgba(87, 187, 61, 1);
59-
$cb-pro-bg: rgba(125, 169, 72, 1);
60-
$cb-masters-bg: rgba(162, 137, 83, 1);
61-
$cb-elite-bg: rgba(200, 99, 69, 1);
62-
$cb-grand-slam-bg: rgba(238, 55, 55, 1);
55+
$gold: #c9a56c; // Grand Slam – polished gold highlight
56+
$silver: #a3acb9; // Masters – brighter brushed silver (more readable)
57+
$bronze: #b07a4a; // Elite – copper bronze highlight
58+
$platinum: #8b919a; // Pro – cooler, slightly darker than silver (clear separation)
59+
$steel: #6f7680; // Challenger – neutral steel (a touch lighter than iron)
60+
$iron: #59606a; // Rookie – darker iron (avoids “disabled outline” look)
61+
62+
$cb-grand-slam-bg: $gold;
63+
$cb-masters-bg: $silver;
64+
$cb-elite-bg: $bronze;
65+
$cb-pro-bg: $platinum;
66+
$cb-challenger-bg: $steel;
67+
$cb-rookie-bg: $iron;
68+
69+
:root {
70+
--cb-grade-grand_slam: #{$cb-grand-slam-bg};
71+
--cb-grade-masters: #{$cb-masters-bg};
72+
--cb-grade-elite: #{$cb-elite-bg};
73+
--cb-grade-pro: #{$cb-pro-bg};
74+
--cb-grade-challenger: #{$cb-challenger-bg};
75+
--cb-grade-rookie: #{$cb-rookie-bg};
76+
}
6377

6478
@import "variables";
6579
@import "bootstrap/scss/bootstrap";
@@ -224,41 +238,70 @@ input[type="range"] {
224238
.alert-dark-theme {
225239
border: none;
226240
backdrop-filter: blur(10px);
227-
241+
228242
&.alert-info {
229-
background: linear-gradient(135deg, rgba(13, 110, 253, 0.9), rgba(13, 110, 253, 0.7));
243+
background: linear-gradient(
244+
135deg,
245+
rgba(13, 110, 253, 0.9),
246+
rgba(13, 110, 253, 0.7)
247+
);
230248
color: #ffffff;
231249
border-left: 4px solid #0d6efd;
232250
}
233-
251+
234252
&.alert-success {
235-
background: linear-gradient(135deg, rgba(25, 135, 84, 0.9), rgba(25, 135, 84, 0.7));
253+
background: linear-gradient(
254+
135deg,
255+
rgba(25, 135, 84, 0.9),
256+
rgba(25, 135, 84, 0.7)
257+
);
236258
color: #ffffff;
237259
border-left: 4px solid #198754;
238260
}
239-
261+
240262
&.alert-danger {
241-
background: linear-gradient(135deg, rgba(220, 53, 69, 0.9), rgba(220, 53, 69, 0.7));
263+
background: linear-gradient(
264+
135deg,
265+
rgba(220, 53, 69, 0.9),
266+
rgba(220, 53, 69, 0.7)
267+
);
242268
color: #ffffff;
243269
border-left: 4px solid #dc3545;
244270
}
245-
271+
246272
&.alert-warning {
247-
background: linear-gradient(135deg, rgba(255, 193, 7, 0.9), rgba(255, 193, 7, 0.7));
273+
background: linear-gradient(
274+
135deg,
275+
rgba(255, 193, 7, 0.9),
276+
rgba(255, 193, 7, 0.7)
277+
);
248278
color: #000000;
249279
border-left: 4px solid #ffc107;
250280
}
251-
281+
252282
.close {
253283
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
254284
opacity: 0.8;
255-
285+
256286
&:hover {
257287
opacity: 1;
258288
}
259289
}
260290
}
261291

292+
.alert-dark-theme.cb-game-win-alert.alert-success {
293+
background: linear-gradient(
294+
135deg,
295+
rgba(25, 135, 84, 0.95),
296+
rgba(240, 199, 94, 0.75)
297+
);
298+
color: #ffffff;
299+
border-left: 4px solid #f0c75e;
300+
box-shadow:
301+
0 0 0 1px rgba(240, 199, 94, 0.25),
302+
0 10px 24px rgba(0, 0, 0, 0.35);
303+
}
304+
262305
.gutter-vertical {
263306
background-image: url("../static/images/verticalGutter.svg");
264307
cursor: col-resize;
@@ -1149,18 +1192,21 @@ a:hover {
11491192
}
11501193

11511194
.cb-gold-place-bg {
1152-
background-color: #fce300 !important;
1195+
background: linear-gradient(180deg, #8f734c 0%, #7f6442 100%) !important;
11531196
border-radius: 0.5rem;
1197+
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
11541198
}
11551199

11561200
.cb-silver-place-bg {
1157-
background-color: #c3c2bc !important;
1201+
background: linear-gradient(180deg, #3a3f4a 0%, #343944 100%) !important;
11581202
border-radius: 0.5rem;
1203+
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
11591204
}
11601205

11611206
.cb-bronze-place-bg {
1162-
background-color: #ff9c41 !important;
1207+
background: linear-gradient(180deg, #3a271a 0%, #2f2016 100%) !important;
11631208
border-radius: 0.5rem;
1209+
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
11641210
}
11651211

11661212
#tasklang-dropdown {
@@ -1918,15 +1964,21 @@ a:hover {
19181964
}
19191965

19201966
.cb-gold-place-bg {
1921-
background-color: #fce300 !important;
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);
19221970
}
19231971

19241972
.cb-silver-place-bg {
1925-
background-color: #c3c2bc !important;
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);
19261976
}
19271977

19281978
.cb-bronze-place-bg {
1929-
background-color: #ff9c41 !important;
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);
19301982
}
19311983

19321984
.user-select-none {

services/app/apps/codebattle/assets/js/staticAssets.js

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,47 @@
33
// These can then be referenced in server-rendered templates using the Vite helper.
44

55
// Main logo (used in header, og images, etc.)
6-
import '../static/images/logo.svg';
6+
import '../static/images/logo.svg?url';
77

88
// Fight icon (used in header)
9-
import '../static/images/fight.svg';
9+
import '../static/images/fight.svg?url';
1010

1111
// Landing page images
12-
import '../static/images/landing/github.svg';
13-
import '../static/images/landing/flowchart.svg';
14-
import '../static/images/landing/beginner.svg';
15-
import '../static/images/landing/experienced.svg';
16-
import '../static/images/landing/friends.svg';
17-
import '../static/images/landing/enthusiast.svg';
12+
import '../static/images/landing/github.svg?url';
13+
import '../static/images/landing/flowchart.svg?url';
14+
import '../static/images/landing/beginner.svg?url';
15+
import '../static/images/landing/experienced.svg?url';
16+
import '../static/images/landing/friends.svg?url';
17+
import '../static/images/landing/enthusiast.svg?url';
1818

1919
// Landing page photos and comments
20-
import '../static/images/landing/photo1.png';
21-
import '../static/images/landing/photo2.png';
22-
import '../static/images/landing/photo3.png';
23-
import '../static/images/landing/photo4.png';
24-
import '../static/images/landing/comment.png';
25-
import '../static/images/landing/comment2.png';
26-
import '../static/images/landing/comment3.png';
27-
import '../static/images/landing/html.png';
20+
import '../static/images/landing/photo1.png?url';
21+
import '../static/images/landing/photo2.png?url';
22+
import '../static/images/landing/photo3.png?url';
23+
import '../static/images/landing/photo4.png?url';
24+
import '../static/images/landing/comment.png?url';
25+
import '../static/images/landing/comment2.png?url';
26+
import '../static/images/landing/comment3.png?url';
27+
import '../static/images/landing/html.png?url';
2828

2929
// Landing page language icons
30-
import '../static/images/landing/languages/clojure.svg';
31-
import '../static/images/landing/languages/cpp.svg';
32-
import '../static/images/landing/languages/c-sharp.svg';
33-
import '../static/images/landing/languages/dart.svg';
34-
import '../static/images/landing/languages/elixir.svg';
35-
import '../static/images/landing/languages/go.svg';
36-
import '../static/images/landing/languages/haskell.svg';
37-
import '../static/images/landing/languages/java.svg';
38-
import '../static/images/landing/languages/js.svg';
39-
import '../static/images/landing/languages/kotlin.svg';
40-
import '../static/images/landing/languages/php.svg';
41-
import '../static/images/landing/languages/python.svg';
42-
import '../static/images/landing/languages/ruby.svg';
43-
import '../static/images/landing/languages/rust.svg';
44-
import '../static/images/landing/languages/swift.svg';
45-
import '../static/images/landing/languages/ts.svg';
46-
import '../static/images/landing/languages/zig.svg';
30+
import '../static/images/landing/languages/clojure.svg?url';
31+
import '../static/images/landing/languages/cpp.svg?url';
32+
import '../static/images/landing/languages/c-sharp.svg?url';
33+
import '../static/images/landing/languages/dart.svg?url';
34+
import '../static/images/landing/languages/elixir.svg?url';
35+
import '../static/images/landing/languages/go.svg?url';
36+
import '../static/images/landing/languages/haskell.svg?url';
37+
import '../static/images/landing/languages/java.svg?url';
38+
import '../static/images/landing/languages/js.svg?url';
39+
import '../static/images/landing/languages/kotlin.svg?url';
40+
import '../static/images/landing/languages/php.svg?url';
41+
import '../static/images/landing/languages/python.svg?url';
42+
import '../static/images/landing/languages/ruby.svg?url';
43+
import '../static/images/landing/languages/rust.svg?url';
44+
import '../static/images/landing/languages/swift.svg?url';
45+
import '../static/images/landing/languages/ts.svg?url';
46+
import '../static/images/landing/languages/zig.svg?url';
4747

4848
// Note: Favicons are intentionally NOT imported here because:
4949
// 1. They rarely change

services/app/apps/codebattle/assets/js/widgets/components/InvitesContainer.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { useDispatch, useSelector } from 'react-redux';
88

99
import { unfollowUser, followUser } from '@/middlewares/Main';
1010

11-
import fightSvg from '../../../static/images/fight.svg';
1211
import i18n from '../../i18n';
1312
import { initInvites } from '../middlewares/Invite';
1413
import initPresence from '../middlewares/Main';
@@ -19,6 +18,8 @@ import { isSafari } from '../utils/browser';
1918

2019
import InvitesList from './InvitesList';
2120

21+
const fightSvg = '/assets/images/fight.svg';
22+
2223
function InvitesContainer() {
2324
const dispatch = useDispatch();
2425

services/app/apps/codebattle/assets/js/widgets/components/SeasonLeaderboard/index.jsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ export const ITEMS_PER_PAGE_OPTIONS = [25, 50, 100];
99
export const DEFAULT_ITEMS_PER_PAGE = 25;
1010

1111
export const GRADE_COLORS = {
12-
grand_slam: '#ffd700',
13-
masters: '#e91e63',
14-
elite: '#9c27b0',
15-
pro: '#2196f3',
16-
challenger: '#4caf50',
17-
rookie: '#ff9800',
12+
grand_slam: 'var(--cb-grade-grand_slam)',
13+
masters: 'var(--cb-grade-masters)',
14+
elite: 'var(--cb-grade-elite)',
15+
pro: 'var(--cb-grade-pro)',
16+
challenger: 'var(--cb-grade-challenger)',
17+
rookie: 'var(--cb-grade-rookie)',
1818
};
1919

2020
export const ALL_GRADES = ['grand_slam', 'masters', 'elite', 'pro', 'challenger', 'rookie'];

services/app/apps/codebattle/assets/js/widgets/components/UserInfo.jsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ function UserPopoverContent({ user }) {
4646

4747
function UserInfo({
4848
className,
49+
linkClassName: linkClassNameProp,
4950
user,
5051
banned = false,
5152
lang,
@@ -74,10 +75,12 @@ function UserInfo({
7475
'cb-opacity-50': loading,
7576
'text-danger': banned,
7677
});
77-
const linkClassName = cn(className, {
78-
'text-white': !banned,
79-
'text-danger': banned,
80-
});
78+
const linkClassName = linkClassNameProp
79+
? cn(linkClassNameProp, { 'text-danger': banned })
80+
: cn(className, {
81+
'text-white': !banned,
82+
'text-danger': banned,
83+
});
8184

8285
if (hideInfo) {
8386
return (

0 commit comments

Comments
 (0)