Skip to content

Commit 613ed70

Browse files
Adez017Adez017
authored
Merge branch 'main' into Experiment
2 parents 1affcc6 + 7cfe0fb commit 613ed70

File tree

2 files changed

+315
-36
lines changed

2 files changed

+315
-36
lines changed

‎src/components/dashboard/LeaderBoard/leaderboard.css‎

Lines changed: 204 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,19 @@
5454
margin-bottom: 40px;
5555
}
5656

57+
.title-filter-container {
58+
display: flex;
59+
align-items: center;
60+
justify-content: center;
61+
flex-wrap: wrap;
62+
gap: 16px;
63+
margin-bottom: 24px;
64+
}
65+
5766
.top-performers-title {
5867
font-size: 24px;
5968
font-weight: 700;
60-
margin-bottom: 24px;
69+
margin: 0;
6170
}
6271

6372
.light .top-performers-title {
@@ -68,6 +77,27 @@
6877
color: #f1f1f1;
6978
}
7079

80+
.top-title-filter {
81+
display: flex;
82+
align-items: center;
83+
gap: 8px;
84+
min-width: 240px;
85+
}
86+
87+
.filter-label {
88+
font-size: 14px;
89+
font-weight: 600;
90+
white-space: nowrap;
91+
}
92+
93+
.light .filter-label {
94+
color: #4b5563;
95+
}
96+
97+
.dark .filter-label {
98+
color: #d1d5db;
99+
}
100+
71101
.top-performers-grid {
72102
display: grid;
73103
grid-template-columns: 1fr 1fr 1fr;
@@ -253,10 +283,12 @@
253283
color: #aaa;
254284
}
255285

256-
/* Search */
286+
/* Search and Filter */
257287
.search-container {
258288
display: flex;
259289
justify-content: center;
290+
flex-wrap: wrap;
291+
gap: 16px;
260292
margin-bottom: 40px;
261293
}
262294

@@ -266,6 +298,11 @@
266298
max-width: 500px;
267299
}
268300

301+
.time-filter-wrapper {
302+
position: relative;
303+
min-width: 150px;
304+
}
305+
269306
.search-icon {
270307
position: absolute;
271308
top: 50%;
@@ -298,7 +335,89 @@
298335
.dark .search-input {
299336
background: #2b303b;
300337
border: 1px solid #444;
338+
}
339+
340+
.time-filter-wrapper {
341+
position: relative;
342+
min-width: 180px;
343+
}
344+
345+
@keyframes select-pulse {
346+
0% { border-color: #6366f1; box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
347+
70% { border-color: #6366f1; box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }
348+
100% { border-color: inherit; }
349+
}
350+
351+
.time-filter-select.highlight-change {
352+
animation: select-pulse 1.2s ease-out;
353+
}
354+
355+
.time-filter-wrapper::after {
356+
content: '';
357+
position: absolute;
358+
right: 15px;
359+
top: 50%;
360+
transform: translateY(-50%);
361+
width: 0;
362+
height: 0;
363+
border-left: 6px solid transparent;
364+
border-right: 6px solid transparent;
365+
border-top: 6px solid #6366f1;
366+
pointer-events: none;
367+
transition: transform 0.2s ease;
368+
}
369+
370+
.time-filter-wrapper:hover::after {
371+
transform: translateY(-50%) translateY(2px);
372+
}
373+
374+
.time-filter-select {
375+
width: 100%;
376+
padding: 12px 40px 12px 18px;
377+
border-radius: 12px;
378+
font-size: 15px;
379+
font-weight: 600;
380+
letter-spacing: 0.3px;
381+
appearance: none;
382+
background: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%);
383+
cursor: pointer;
384+
transition: all 0.25s ease;
385+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
386+
border: 2px solid transparent;
387+
}
388+
389+
.time-filter-select:hover {
390+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
391+
transform: translateY(-2px);
392+
background-position: right 15px center;
393+
}
394+
395+
.time-filter-select:focus {
396+
outline: none;
397+
border-color: #6366f1;
398+
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
399+
}
400+
401+
.light .time-filter-select {
402+
background-color: #fff;
403+
color: #333;
404+
border: 2px solid #e5e7eb;
405+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
406+
}
407+
408+
.light .time-filter-wrapper::after {
409+
border-top-color: #6366f1;
410+
}
411+
412+
.dark .time-filter-select {
413+
background-color: #2d3748;
301414
color: #f1f1f1;
415+
border: 2px solid #4b5563;
416+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
417+
}
418+
419+
.dark .time-filter-wrapper::after {
420+
border-top-color: #8b5cf6;
302421
}
303422

304423
/* Contributors List */
@@ -476,110 +595,165 @@
476595
display: flex;
477596
justify-content: center;
478597
align-items: center;
479-
gap: 8px;
598+
gap: 12px;
480599
padding: 24px 0;
600+
margin-top: 16px;
601+
border-top: 1px solid rgba(0, 0, 0, 0.1);
602+
}
603+
604+
.light .pagination {
605+
background-color: #f9fafb;
606+
border-top: 1px solid #e5e7eb;
607+
border-bottom-left-radius: 12px;
608+
border-bottom-right-radius: 12px;
609+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
610+
}
611+
612+
.dark .pagination {
613+
border-top: 1px solid rgba(255, 255, 255, 0.1);
614+
background-color: #1e293b;
615+
border-bottom-left-radius: 12px;
616+
border-bottom-right-radius: 12px;
481617
}
482618

483619
.pagination-btn {
484620
display: flex;
485621
justify-content: center;
486622
align-items: center;
487-
width: 40px;
488-
height: 40px;
623+
width: 44px;
624+
height: 44px;
489625
border-radius: 50%;
490-
border: none;
626+
border: 2px solid transparent;
491627
cursor: pointer;
492628
transition: all 0.2s ease;
629+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
493630
}
494631

495632
.light .pagination-btn {
496-
background: #e5e7eb;
497-
color: #6b7280;
633+
background: #836dff;
634+
color: #6366f1;
635+
border: 1px solid #006eff;
498636
}
499637

500638
.dark .pagination-btn {
501-
background: #374151;
502-
color: #d1d5db;
639+
background: #2d3748;
640+
color: #8b5cf6;
641+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
642+
border: 1px solid #4b5563;
503643
}
504644

505645
.pagination-btn:hover:not(.disabled) {
506-
background: #d1d5db;
646+
transform: translateY(-2px);
647+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
648+
}
649+
650+
.light .pagination-btn:hover:not(.disabled) {
651+
background: #0080ff;
652+
border-color: #6366f1;
653+
color: #4338ca;
507654
}
508655

509656
.dark .pagination-btn:hover:not(.disabled) {
510-
background: #4b5563;
657+
background: #374151;
658+
border-color: #8b5cf6;
659+
color: #a78bfa;
511660
}
512661

513662
.pagination-btn.disabled {
514-
opacity: 0.5;
663+
opacity: 0.4;
515664
cursor: not-allowed;
665+
box-shadow: none;
516666
}
517667

518668
.page-btn {
519669
display: flex;
520670
justify-content: center;
521671
align-items: center;
522-
width: 36px;
523-
height: 36px;
524-
border-radius: 8px;
525-
border: none;
672+
width: 40px;
673+
height: 40px;
674+
border-radius: 10px;
675+
border: 2px solid transparent;
526676
cursor: pointer;
527-
font-weight: bold;
677+
font-weight: 600;
678+
font-size: 15px;
528679
transition: all 0.2s ease;
529680
}
530681

531682
.light .page-btn {
532-
background: transparent;
533-
color: #666;
683+
background: #0044ff;
684+
color: #4b5563;
685+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
686+
border: 1px solid #e2e8f0;
534687
}
535688

536689
.dark .page-btn {
537-
background: transparent;
538-
color: #b3b3b3;
690+
background: #2d3748;
691+
color: #e5e7eb;
692+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
693+
border: 1px solid #4b5563;
539694
}
540695

541696
.page-btn:hover {
542-
background: #e5e7eb;
697+
transform: translateY(-1px);
698+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
699+
}
700+
701+
.light .page-btn:hover {
702+
background: #0080ff;
703+
border-color: #6366f1;
704+
color: #4338ca;
543705
}
544706

545707
.dark .page-btn:hover {
546708
background: #374151;
709+
border-color: #8b5cf6;
710+
color: #a78bfa;
547711
}
548712

549713
.page-btn.active {
550-
background: #2563eb;
714+
background: #6366f1;
551715
color: #fff;
716+
box-shadow: 0 3px 6px rgba(99, 102, 241, 0.4);
717+
transform: translateY(-1px);
718+
border-color: #6366f1;
552719
}
553720

554721
.dark .page-btn.active {
555-
background: #3b82f6;
722+
background: #8b5cf6;
556723
color: #fff;
724+
box-shadow: 0 3px 6px rgba(139, 92, 246, 0.4);
725+
border-color: #8b5cf6;
557726
}
558727

559728
.page-numbers {
560729
display: flex;
561-
gap: 8px;
730+
gap: 10px;
562731
flex-wrap: wrap;
563732
justify-content: center;
733+
align-items: center;
734+
padding: 0 8px;
564735
}
565736

566737
/* Pagination ellipsis */
567738
.pagination-ellipsis {
568739
display: flex;
569740
justify-content: center;
570741
align-items: center;
571-
width: 36px;
572-
height: 36px;
742+
width: 40px;
743+
height: 40px;
573744
font-weight: bold;
745+
font-size: 18px;
574746
user-select: none;
575747
}
576748

577749
.light .pagination-ellipsis {
578-
color: #666;
750+
color: #6366f1;
751+
opacity: 0.7;
579752
}
580753

581754
.dark .pagination-ellipsis {
582-
color: #b3b3b3;
755+
color: #8b5cf6;
756+
opacity: 0.8;
583757
}
584758

585759
/* CTA Footer */

0 commit comments

Comments
 (0)