Skip to content

Commit 807cfed

Browse files
Spidy394Spidy394
authored
Merge pull request #5 from GDG-on-Campus-GCECT/features
Minor UI/UX changes
2 parents 413bf6c + 7c06e34 commit 807cfed

File tree

4 files changed

+227
-17
lines changed

4 files changed

+227
-17
lines changed

‎src/components/progressboard/LinearTierProgress.jsx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -200,17 +200,27 @@ const LinearTierProgress = ({ participants = [] }) => {
200200

201201
if (!nextTier) {
202202
// All tiers unlocked
203-
return `All tiers unlocked! ${counts.participantsCompleted} participants completed all badges & games`;
203+
return (
204+
<>
205+
All tiers unlocked!{" "}
206+
<span className="bold-text">{counts.participantsCompleted}</span>{" "}
207+
participants completed all badges & games
208+
</>
209+
);
204210
}
205211

206212
// Calculate how many more participants needed to unlock this tier
207213
const neededCount =
208214
nextTier.requiredParticipants - counts.participantsCompleted;
209215
const tierNumber = nextTier.name.split(" ")[1];
210216

211-
return `${neededCount} more completion${
212-
neededCount !== 1 ? "s" : ""
213-
} to unlock Tier ${tierNumber}`;
217+
return (
218+
<>
219+
<span className="bold-text">{neededCount}</span> more completion
220+
{neededCount !== 1 ? "s" : ""} to unlock{" "}
221+
<span className="bold-text">Tier {tierNumber}</span>
222+
</>
223+
);
214224
};
215225

216226
// Handle tier icon click
@@ -328,8 +338,12 @@ const LinearTierProgress = ({ participants = [] }) => {
328338
<div className="progress-stat">
329339
<FaBullseye size={12} className="me-1" />
330340
<span>
331-
<strong>{overallScorePercentage.toFixed(2)}%</strong> of total score
332-
achieved ({totalCompletedScore} / {totalPossibleScore})
341+
<span className="bold-text">
342+
{overallScorePercentage.toFixed(2)}%
343+
</span>{" "}
344+
of total score achieved (
345+
<span className="bold-text">{totalCompletedScore}</span> /{" "}
346+
<span className="bold-text">{totalPossibleScore}</span>)
333347
</span>
334348
</div>
335349
</div>

‎src/components/progressboard/ParticipantDetailsModal.jsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
FaGamepad,
1313
FaCheckCircle,
1414
FaTimesCircle,
15+
FaStar,
1516
} from "react-icons/fa"; // Import icons
1617

1718
const ParticipantDetailsModal = ({ participant, onHide }) => {
@@ -38,9 +39,15 @@ const ParticipantDetailsModal = ({ participant, onHide }) => {
3839
return (
3940
<Modal show={true} onHide={onHide} centered size="lg" scrollable>
4041
<Modal.Header closeButton>
41-
<Modal.Title className="d-flex align-items-center">
42-
<span className="me-3">{participant.name}</span>
42+
<Modal.Title className="d-flex align-items-center flex-wrap gap-2">
43+
<span className="me-2">{participant.name}</span>
4344
<Badge bg="secondary">Rank: {participant.rank}</Badge>
45+
{participant.allCompleted === "Yes" && (
46+
<Badge bg="success" className="d-flex align-items-center">
47+
<FaStar className="me-1" size={12} />
48+
Completed
49+
</Badge>
50+
)}
4451
</Modal.Title>
4552
</Modal.Header>
4653
<Modal.Body>

‎src/components/progressboard/ProgressboardHeader.jsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,14 @@ const ProgressboardHeader = ({ participants }) => {
66
<header className="progressboard-header mb-3">
77
<div className="progressboard-header-with-progress">
88
<div className="progressboard-header-text">
9-
<h1 className="h2 fw-bold mb-1">Cloud Study Jams Progressboard</h1>
10-
<p className="text-muted mb-0">
11-
If your name is not on the list, contact an organizer.
12-
</p>
9+
<div className="progressboard-title-container">
10+
<h1 className="progressboard-elegant-title mb-1">
11+
Cloud Study Jams Progressboard
12+
</h1>
13+
<p className="text-muted mb-0">
14+
If your name is not on the list, contact an organizer.
15+
</p>
16+
</div>
1317
</div>
1418
<div className="progressboard-header-progress">
1519
<LinearTierProgress participants={participants} />

‎src/pages/progressboard/Progressboard.css‎

Lines changed: 190 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/* Import Google Fonts for elegant typography */
2+
@import url("https://fonts.googleapis.com/css2?family=Bitcount+Grid+Single+Ink:wght@100..900&family=Bitcount+Grid+Single:wght@100..900&family=Bitcount+Prop+Double+Ink:wght@100..900&family=Dancing+Script:wght@400..700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Licorice&family=Pacifico&family=Press+Start+2P&display=swap");
13
/* ==========================================================================
24
Progressboard Page Layout
35
========================================================================== */
@@ -9,6 +11,121 @@
911
padding-bottom: 1rem;
1012
}
1113

14+
/* ==========================================================================
15+
Elegant Progressboard Title Styling
16+
========================================================================== */
17+
18+
.progressboard-elegant-title {
19+
font-family: "Press Start 2P", cursive;
20+
font-size: 3rem;
21+
font-weight: 400;
22+
color: #ea4335; /* Google Red solid color */
23+
margin-bottom: 0.75rem;
24+
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
25+
letter-spacing: 0.02em;
26+
line-height: 1.3;
27+
position: relative;
28+
padding-bottom: 0.2rem;
29+
}
30+
31+
.progressboard-elegant-title::before {
32+
content: "";
33+
position: absolute;
34+
top: 0;
35+
left: 0;
36+
right: 0;
37+
bottom: 0;
38+
background: linear-gradient(
39+
135deg,
40+
rgba(66, 133, 244, 0.1) 0%,
41+
rgba(234, 67, 53, 0.1) 25%,
42+
rgba(251, 188, 5, 0.1) 50%,
43+
rgba(52, 168, 83, 0.1) 75%,
44+
rgba(66, 133, 244, 0.1) 100%
45+
);
46+
border-radius: 12px;
47+
z-index: -1;
48+
filter: blur(20px);
49+
opacity: 0.6;
50+
animation: pulseGlow 4s ease-in-out infinite alternate;
51+
}
52+
53+
.progressboard-elegant-subtitle {
54+
font-family: "Bitcount Grid Single", monospace;
55+
font-size: 1.2rem;
56+
font-weight: 400;
57+
color: #6c757d;
58+
margin-bottom: 0;
59+
opacity: 0.9;
60+
transition: all 0.3s ease;
61+
letter-spacing: 0.05em;
62+
text-transform: uppercase;
63+
}
64+
65+
.progressboard-title-container:hover .progressboard-elegant-title {
66+
transform: translateY(-2px);
67+
transition: transform 0.3s ease;
68+
}
69+
70+
.progressboard-title-container:hover .progressboard-elegant-subtitle {
71+
color: #495057;
72+
opacity: 1;
73+
}
74+
75+
/* Gradient animation */
76+
@keyframes gradientShift {
77+
0% {
78+
background-position: 0% 50%;
79+
}
80+
50% {
81+
background-position: 100% 50%;
82+
}
83+
100% {
84+
background-position: 0% 50%;
85+
}
86+
}
87+
88+
/* Glow pulse animation */
89+
@keyframes pulseGlow {
90+
0% {
91+
opacity: 0.4;
92+
transform: scale(0.98);
93+
}
94+
100% {
95+
opacity: 0.8;
96+
transform: scale(1.02);
97+
}
98+
}
99+
100+
/* Responsive adjustments for the elegant title */
101+
@media (max-width: 768px) {
102+
.progressboard-elegant-title {
103+
font-size: 3.5rem;
104+
letter-spacing: 0.01em;
105+
line-height: 1.3;
106+
padding-bottom: 0.15rem;
107+
}
108+
109+
.progressboard-elegant-subtitle {
110+
font-size: 1rem;
111+
letter-spacing: 0.03em;
112+
}
113+
}
114+
115+
@media (max-width: 480px) {
116+
.progressboard-elegant-title {
117+
font-size: 2.8rem;
118+
letter-spacing: 0;
119+
line-height: 1.3;
120+
padding-bottom: 0.1rem;
121+
}
122+
123+
.progressboard-elegant-subtitle {
124+
font-size: 0.9rem;
125+
letter-spacing: 0.02em;
126+
}
127+
}
128+
12129
/* ==========================================================================
13130
Header and Dark Mode Button
14131
========================================================================== */
@@ -777,18 +894,61 @@
777894

778895
.linear-progress-info {
779896
display: flex;
897+
flex-direction: column;
780898
justify-content: center;
781899
align-items: center;
782-
margin-top: 0.5rem;
783-
font-size: 0.75rem;
784-
color: #6b7280;
900+
margin-top: 1rem;
901+
font-size: 0.8rem;
902+
color: #4b5563;
903+
gap: 0.75rem;
904+
padding: 1rem;
905+
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
906+
border-radius: 12px;
907+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
908+
border: 1px solid #e2e8f0;
785909
}
786910

787911
.progress-stat {
788912
display: flex;
789913
align-items: center;
790-
gap: 0.25rem;
791-
font-weight: 500;
914+
gap: 0.5rem;
915+
font-weight: 600;
916+
text-align: center;
917+
padding: 0.5rem 0.75rem;
918+
background: rgba(255, 255, 255, 0.7);
919+
border-radius: 8px;
920+
backdrop-filter: blur(10px);
921+
border: 1px solid rgba(255, 255, 255, 0.2);
922+
transition: all 0.3s ease;
923+
min-width: 280px;
924+
}
925+
926+
.progress-stat:hover {
927+
background: rgba(255, 255, 255, 0.9);
928+
transform: translateY(-1px);
929+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
930+
}
931+
932+
.progress-stat svg {
933+
color: #3b82f6;
934+
filter: drop-shadow(0 1px 2px rgba(59, 130, 246, 0.3));
935+
transition: all 0.3s ease;
936+
}
937+
938+
.progress-stat:hover svg {
939+
color: #2563eb;
940+
transform: scale(1.1);
941+
}
942+
943+
.progress-stat strong {
944+
color: #1e40af;
945+
font-weight: 700;
946+
}
947+
948+
/* Make numbers and tier names bold in progress text */
949+
.progress-stat .bold-text {
950+
font-weight: 700;
951+
color: #1e40af;
792952
}
793953

794954
/* Header with Linear Progress Layout */
@@ -860,6 +1020,31 @@
8601020
}
8611021

8621022
.progress-stat {
1023+
font-size: 0.75rem;
1024+
min-width: 240px;
1025+
padding: 0.4rem 0.6rem;
1026+
}
1027+
1028+
.linear-progress-info {
1029+
gap: 0.6rem;
1030+
margin-top: 1rem;
1031+
padding: 0.8rem;
1032+
}
1033+
}
1034+
1035+
@media (max-width: 480px) {
1036+
.linear-progress-info {
8631037
font-size: 0.7rem;
1038+
gap: 0.5rem;
1039+
margin-top: 1rem;
1040+
padding: 0.75rem 0.5rem;
1041+
}
1042+
1043+
.progress-stat {
1044+
flex-wrap: wrap;
1045+
justify-content: center;
1046+
line-height: 1.4;
1047+
min-width: 200px;
1048+
padding: 0.4rem 0.5rem;
8641049
}
8651050
}

0 commit comments

Comments
 (0)