Skip to content

Commit 7cfe0fb

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #583 from iitzIrFan/feature/leaderboard_filter
Feature/leaderboard filter
2 parents 578ab2d + 72db258 commit 7cfe0fb

File tree

2 files changed

+312
-41
lines changed

2 files changed

+312
-41
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 */
@@ -457,110 +576,165 @@
457576
display: flex;
458577
justify-content: center;
459578
align-items: center;
460-
gap: 8px;
579+
gap: 12px;
461580
padding: 24px 0;
581+
margin-top: 16px;
582+
border-top: 1px solid rgba(0, 0, 0, 0.1);
583+
}
584+
585+
.light .pagination {
586+
background-color: #f9fafb;
587+
border-top: 1px solid #e5e7eb;
588+
border-bottom-left-radius: 12px;
589+
border-bottom-right-radius: 12px;
590+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
591+
}
592+
593+
.dark .pagination {
594+
border-top: 1px solid rgba(255, 255, 255, 0.1);
595+
background-color: #1e293b;
596+
border-bottom-left-radius: 12px;
597+
border-bottom-right-radius: 12px;
462598
}
463599

464600
.pagination-btn {
465601
display: flex;
466602
justify-content: center;
467603
align-items: center;
468-
width: 40px;
469-
height: 40px;
604+
width: 44px;
605+
height: 44px;
470606
border-radius: 50%;
471-
border: none;
607+
border: 2px solid transparent;
472608
cursor: pointer;
473609
transition: all 0.2s ease;
610+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
474611
}
475612

476613
.light .pagination-btn {
477-
background: #e5e7eb;
478-
color: #6b7280;
614+
background: #836dff;
615+
color: #6366f1;
616+
border: 1px solid #006eff;
479617
}
480618

481619
.dark .pagination-btn {
482-
background: #374151;
483-
color: #d1d5db;
620+
background: #2d3748;
621+
color: #8b5cf6;
622+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
623+
border: 1px solid #4b5563;
484624
}
485625

486626
.pagination-btn:hover:not(.disabled) {
487-
background: #d1d5db;
627+
transform: translateY(-2px);
628+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
629+
}
630+
631+
.light .pagination-btn:hover:not(.disabled) {
632+
background: #0080ff;
633+
border-color: #6366f1;
634+
color: #4338ca;
488635
}
489636

490637
.dark .pagination-btn:hover:not(.disabled) {
491-
background: #4b5563;
638+
background: #374151;
639+
border-color: #8b5cf6;
640+
color: #a78bfa;
492641
}
493642

494643
.pagination-btn.disabled {
495-
opacity: 0.5;
644+
opacity: 0.4;
496645
cursor: not-allowed;
646+
box-shadow: none;
497647
}
498648

499649
.page-btn {
500650
display: flex;
501651
justify-content: center;
502652
align-items: center;
503-
width: 36px;
504-
height: 36px;
505-
border-radius: 8px;
506-
border: none;
653+
width: 40px;
654+
height: 40px;
655+
border-radius: 10px;
656+
border: 2px solid transparent;
507657
cursor: pointer;
508-
font-weight: bold;
658+
font-weight: 600;
659+
font-size: 15px;
509660
transition: all 0.2s ease;
510661
}
511662

512663
.light .page-btn {
513-
background: transparent;
514-
color: #666;
664+
background: #0044ff;
665+
color: #4b5563;
666+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
667+
border: 1px solid #e2e8f0;
515668
}
516669

517670
.dark .page-btn {
518-
background: transparent;
519-
color: #b3b3b3;
671+
background: #2d3748;
672+
color: #e5e7eb;
673+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
674+
border: 1px solid #4b5563;
520675
}
521676

522677
.page-btn:hover {
523-
background: #e5e7eb;
678+
transform: translateY(-1px);
679+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
680+
}
681+
682+
.light .page-btn:hover {
683+
background: #0080ff;
684+
border-color: #6366f1;
685+
color: #4338ca;
524686
}
525687

526688
.dark .page-btn:hover {
527689
background: #374151;
690+
border-color: #8b5cf6;
691+
color: #a78bfa;
528692
}
529693

530694
.page-btn.active {
531-
background: #2563eb;
695+
background: #6366f1;
532696
color: #fff;
697+
box-shadow: 0 3px 6px rgba(99, 102, 241, 0.4);
698+
transform: translateY(-1px);
699+
border-color: #6366f1;
533700
}
534701

535702
.dark .page-btn.active {
536-
background: #3b82f6;
703+
background: #8b5cf6;
537704
color: #fff;
705+
box-shadow: 0 3px 6px rgba(139, 92, 246, 0.4);
706+
border-color: #8b5cf6;
538707
}
539708

540709
.page-numbers {
541710
display: flex;
542-
gap: 8px;
711+
gap: 10px;
543712
flex-wrap: wrap;
544713
justify-content: center;
714+
align-items: center;
715+
padding: 0 8px;
545716
}
546717

547718
/* Pagination ellipsis */
548719
.pagination-ellipsis {
549720
display: flex;
550721
justify-content: center;
551722
align-items: center;
552-
width: 36px;
553-
height: 36px;
723+
width: 40px;
724+
height: 40px;
554725
font-weight: bold;
726+
font-size: 18px;
555727
user-select: none;
556728
}
557729

558730
.light .pagination-ellipsis {
559-
color: #666;
731+
color: #6366f1;
732+
opacity: 0.7;
560733
}
561734

562735
.dark .pagination-ellipsis {
563-
color: #b3b3b3;
736+
color: #8b5cf6;
737+
opacity: 0.8;
564738
}
565739

566740
/* CTA Footer */

0 commit comments

Comments
 (0)