Skip to content

Commit 31a4509

Browse files
SunilKumarKVSunilKumarKV
authored
Merge pull request #3 from SunilKumarKV/design/v1.1-premium-ui-system
design: upgrade premium UI system
2 parents 6854e7c + e4ef658 commit 31a4509

16 files changed

Lines changed: 645 additions & 173 deletions

‎src/App.css‎

Lines changed: 271 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -234,15 +234,27 @@ a:hover {
234234
margin-bottom: 36px;
235235
}
236236

237+
.page-header {
238+
display: grid;
239+
gap: 0;
240+
}
241+
237242
.page-header.page-header-left {
238243
text-align: left;
239244
}
240245

246+
.page-header-compact {
247+
margin-bottom: 28px;
248+
}
249+
241250
.page-header h1,
242251
.empty-state h1 {
243252
color: var(--text-color);
244-
font-size: clamp(2rem, 5vw, 3.5rem);
253+
font-size: clamp(2rem, 4.8vw, 3.7rem);
245254
margin-bottom: 14px;
255+
line-height: 1.02;
256+
letter-spacing: -0.05em;
257+
max-width: 14ch;
246258
}
247259

248260
.page-header p,
@@ -258,6 +270,119 @@ a:hover {
258270
margin-left: 0;
259271
}
260272

273+
.page-meta-strip {
274+
display: grid;
275+
grid-template-columns: repeat(3, minmax(0, 1fr));
276+
gap: 14px;
277+
margin: -6px 0 26px;
278+
}
279+
280+
.page-meta-strip.compact {
281+
grid-template-columns: repeat(4, minmax(0, 1fr));
282+
}
283+
284+
.meta-strip-card {
285+
padding: 16px 18px;
286+
border-radius: 20px;
287+
background: color-mix(in srgb, var(--card-bg) 80%, transparent);
288+
border: 1px solid color-mix(in srgb, var(--input-border) 88%, transparent);
289+
box-shadow: var(--shadow-light);
290+
backdrop-filter: blur(12px);
291+
-webkit-backdrop-filter: blur(12px);
292+
display: grid;
293+
gap: 6px;
294+
}
295+
296+
.meta-strip-card span {
297+
color: var(--text-secondary);
298+
font-size: 0.82rem;
299+
font-weight: 700;
300+
}
301+
302+
.meta-strip-card strong {
303+
color: var(--text-color);
304+
font-size: clamp(1.45rem, 2.2vw, 2rem);
305+
line-height: 1;
306+
letter-spacing: -0.04em;
307+
}
308+
309+
.page-two-column {
310+
display: grid;
311+
grid-template-columns: minmax(230px, 0.32fr) minmax(0, 1fr);
312+
gap: 22px;
313+
align-items: start;
314+
}
315+
316+
.explorer-two-column .problem-grid {
317+
gap: 18px;
318+
}
319+
320+
.sidebar-panel {
321+
position: sticky;
322+
top: 94px;
323+
display: grid;
324+
gap: 16px;
325+
}
326+
327+
.sidebar-stat-list {
328+
display: grid;
329+
gap: 12px;
330+
}
331+
332+
.sidebar-stat-list div {
333+
display: flex;
334+
justify-content: space-between;
335+
gap: 16px;
336+
align-items: center;
337+
padding: 10px 0;
338+
border-top: 1px solid color-mix(in srgb, var(--input-border) 70%, transparent);
339+
}
340+
341+
.sidebar-stat-list div:first-child {
342+
border-top: 0;
343+
padding-top: 0;
344+
}
345+
346+
.sidebar-stat-list span {
347+
color: var(--text-secondary);
348+
}
349+
350+
.sidebar-stat-list strong {
351+
color: var(--text-color);
352+
font-size: 1.05rem;
353+
}
354+
355+
.dashboard-grid {
356+
display: grid;
357+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
358+
gap: 18px;
359+
}
360+
361+
.widget-card {
362+
min-height: 100%;
363+
}
364+
365+
.filter-shell {
366+
display: grid;
367+
gap: 18px;
368+
margin-bottom: 26px;
369+
}
370+
371+
.filter-shell-copy {
372+
display: grid;
373+
gap: 8px;
374+
}
375+
376+
.filter-shell-copy h3 {
377+
color: var(--text-color);
378+
font-size: 1.05rem;
379+
}
380+
381+
.filter-shell-copy p {
382+
color: var(--text-secondary);
383+
line-height: 1.7;
384+
}
385+
261386
.page-header-actions {
262387
display: flex;
263388
flex-wrap: wrap;
@@ -357,6 +482,14 @@ a:hover {
357482
letter-spacing: -0.04em;
358483
}
359484

485+
.stat-card.accent {
486+
background: linear-gradient(
487+
180deg,
488+
color-mix(in srgb, var(--card-bg) 94%, transparent),
489+
color-mix(in srgb, var(--accent-color) 7%, var(--card-bg))
490+
);
491+
}
492+
360493
.problem-card span,
361494
.page-button {
362495
color: var(--accent-color);
@@ -604,6 +737,24 @@ a:hover {
604737
animation: pageFadeUp 0.55s ease both;
605738
}
606739

740+
.section-panel-header {
741+
display: flex;
742+
justify-content: space-between;
743+
align-items: end;
744+
gap: 20px;
745+
margin-bottom: 28px;
746+
}
747+
748+
.section-panel-copy {
749+
min-width: 0;
750+
}
751+
752+
.section-panel-actions {
753+
display: flex;
754+
flex-wrap: wrap;
755+
gap: 12px;
756+
}
757+
607758
.section-panel h2 {
608759
font-size: clamp(1.9rem, 4vw, 3rem);
609760
color: var(--text-color);
@@ -655,6 +806,10 @@ a:hover {
655806
-webkit-backdrop-filter: blur(12px);
656807
}
657808

809+
.compact-card {
810+
min-height: 0;
811+
}
812+
658813
.glass-card h3 { margin-bottom: 10px; line-height: 1.25; }
659814
.glass-card p, .timeline-item p { color: var(--text-secondary); line-height: 1.7; }
660815

@@ -837,6 +992,7 @@ textarea:focus-visible {
837992
.achievement-card {
838993
display: grid;
839994
gap: 14px;
995+
min-height: 100%;
840996
}
841997

842998
.achievement-header {
@@ -883,18 +1039,94 @@ textarea:focus-visible {
8831039
background: linear-gradient(90deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 70%, #22c55e));
8841040
}
8851041

886-
.timeline-list { display: grid; gap: 18px; margin-bottom: 28px; }
887-
.timeline-item {
1042+
.timeline-month-list {
8881043
display: grid;
889-
grid-template-columns: 140px 1fr;
8901044
gap: 18px;
891-
padding: 20px;
892-
border-radius: 20px;
893-
background: color-mix(in srgb, var(--card-bg) 90%, var(--accent-color) 4%);
894-
border: 1px solid color-mix(in srgb, var(--input-border) 90%, transparent);
1045+
}
1046+
1047+
.timeline-month-card {
1048+
padding: 24px;
1049+
border-radius: 24px;
1050+
background: color-mix(in srgb, var(--card-bg) 90%, transparent);
1051+
border: 1px solid color-mix(in srgb, var(--input-border) 86%, transparent);
8951052
box-shadow: var(--shadow-light);
1053+
display: grid;
1054+
gap: 18px;
1055+
}
1056+
1057+
.timeline-month-head {
1058+
display: flex;
1059+
justify-content: space-between;
1060+
gap: 16px;
1061+
align-items: baseline;
1062+
}
1063+
1064+
.timeline-month-head span,
1065+
.timeline-item span {
1066+
color: var(--accent-color);
1067+
font-weight: 800;
1068+
}
1069+
1070+
.timeline-month-head strong {
1071+
color: var(--text-secondary);
1072+
font-size: 0.88rem;
1073+
}
1074+
1075+
.timeline-event-stack {
1076+
display: grid;
1077+
gap: 14px;
1078+
}
1079+
1080+
.journey-event {
1081+
padding: 16px 18px;
1082+
border-radius: 18px;
1083+
background: color-mix(in srgb, var(--accent-color) 5%, var(--card-bg));
1084+
border: 1px solid color-mix(in srgb, var(--accent-color) 10%, transparent);
1085+
}
1086+
1087+
.journey-event h3 {
1088+
margin-bottom: 8px;
1089+
}
1090+
1091+
.journey-event small {
1092+
display: inline-block;
1093+
margin-top: 8px;
1094+
color: var(--text-secondary);
1095+
}
1096+
1097+
.achievement-wall {
1098+
display: grid;
1099+
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
1100+
gap: 18px;
1101+
}
1102+
1103+
.state-card {
1104+
min-height: 0;
1105+
}
1106+
1107+
.loading-state-card {
1108+
border-style: dashed;
1109+
}
1110+
1111+
.error-state-card {
1112+
border-color: rgba(220, 38, 38, 0.24);
1113+
}
1114+
1115+
.empty-state-card {
1116+
border-style: solid;
1117+
}
1118+
1119+
.showcase-panel,
1120+
.explorer-panel,
1121+
.dashboard-panel,
1122+
.workflow-panel,
1123+
.timeline-panel,
1124+
.achievement-wall-panel,
1125+
.contact-panel,
1126+
.library-groups-panel,
1127+
.contact-cta-panel {
1128+
position: relative;
8961129
}
897-
.timeline-item span { color: var(--accent-color); font-weight: 800; }
8981130

8991131
.state-page,
9001132
.project-detail-page {
@@ -921,11 +1153,40 @@ textarea:focus-visible {
9211153
.project-detail-hero p { color: var(--text-secondary); line-height: 1.8; }
9221154

9231155
@media (max-width: 760px) {
924-
.timeline-item,
9251156
.project-detail-hero { grid-template-columns: 1fr; }
9261157
.section-panel { padding: 42px 18px; }
9271158
}
9281159

1160+
@media (max-width: 980px) {
1161+
.page-two-column {
1162+
grid-template-columns: 1fr;
1163+
}
1164+
1165+
.sidebar-panel {
1166+
position: static;
1167+
}
1168+
}
1169+
1170+
@media (max-width: 720px) {
1171+
.section-panel-header {
1172+
flex-direction: column;
1173+
align-items: stretch;
1174+
}
1175+
1176+
.page-meta-strip,
1177+
.page-meta-strip.compact {
1178+
grid-template-columns: repeat(2, minmax(0, 1fr));
1179+
}
1180+
}
1181+
1182+
@media (max-width: 480px) {
1183+
.page-meta-strip,
1184+
.page-meta-strip.compact,
1185+
.achievement-wall {
1186+
grid-template-columns: 1fr;
1187+
}
1188+
}
1189+
9291190
@keyframes pageFadeUp {
9301191
from {
9311192
opacity: 0;

‎src/achievements/AchievementsPage.jsx‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@ export default function AchievementsPage() {
170170
title="Achievements"
171171
description="Badges generated from real coding-journal activity, not manual claims."
172172
align="left"
173+
className="page-header-achievements"
173174
/>
174175

175176
{loading ? (
@@ -185,10 +186,24 @@ export default function AchievementsPage() {
185186
<EmptyState title="No achievements available" message="The current coding-journal feeds do not expose enough data to calculate achievements." />
186187
</SectionPanel>
187188
) : (
188-
<section className="section-panel">
189-
<span className="section-eyebrow">Milestone Board</span>
190-
<h2>Unlocked and In Progress</h2>
191-
<div className="feature-grid">
189+
<>
190+
<section className="page-meta-strip compact">
191+
<article className="meta-strip-card">
192+
<span>Unlocked</span>
193+
<strong>{achievements.filter((item) => item.unlocked).length}</strong>
194+
</article>
195+
<article className="meta-strip-card">
196+
<span>In Progress</span>
197+
<strong>{achievements.filter((item) => !item.unlocked).length}</strong>
198+
</article>
199+
<article className="meta-strip-card">
200+
<span>Total</span>
201+
<strong>{achievements.length}</strong>
202+
</article>
203+
</section>
204+
205+
<SectionPanel eyebrow="Milestone Board" title="Unlocked and In Progress" className="achievement-wall-panel">
206+
<div className="achievement-wall">
192207
{achievements.map((achievement) => {
193208
const progress = clampProgress(achievement.current, achievement.goal);
194209

@@ -211,7 +226,8 @@ export default function AchievementsPage() {
211226
);
212227
})}
213228
</div>
214-
</section>
229+
</SectionPanel>
230+
</>
215231
)}
216232
</main>
217233
);

0 commit comments

Comments
 (0)