Skip to content

Commit 82b56fe

Browse files
Diogo-FerrazDiogo-Ferraz
committed
refactor(ui): standardize non-dashboard KPI cards with standalone pastel-themed design system
1 parent de73904 commit 82b56fe

20 files changed

Lines changed: 646 additions & 189 deletions

‎src/app/features/activity/components/activity-log/activity-log.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ <h2>Activity Log</h2>
2121
</p-card>
2222

2323
<div class="activity-log-kpis">
24-
<p-card class="kpi-card"><span class="kpi-card__label">Total Events</span><span class="kpi-card__value">{{ totalEvents }}</span></p-card>
25-
<p-card class="kpi-card"><span class="kpi-card__label">Visible Events</span><span class="kpi-card__value">{{ visibleEvents }}</span></p-card>
26-
<p-card class="kpi-card"><span class="kpi-card__label">Today</span><span class="kpi-card__value">{{ todayEvents }}</span></p-card>
27-
<p-card class="kpi-card"><span class="kpi-card__label">Project Events</span><span class="kpi-card__value">{{ projectEvents }}</span></p-card>
24+
<article class="kpi-card"><div class="kpi-card__shell kpi-card__shell--neutral"><div class="kpi-card__head"><span class="kpi-card__label">Total Events</span><span class="kpi-card__tag">Audit</span></div><span class="kpi-card__value">{{ totalEvents }}</span></div></article>
25+
<article class="kpi-card"><div class="kpi-card__shell kpi-card__shell--info"><div class="kpi-card__head"><span class="kpi-card__label">Visible Events</span><span class="kpi-card__tag">Filtered</span></div><span class="kpi-card__value">{{ visibleEvents }}</span></div></article>
26+
<article class="kpi-card"><div class="kpi-card__shell kpi-card__shell--warning"><div class="kpi-card__head"><span class="kpi-card__label">Today</span><span class="kpi-card__tag">Now</span></div><span class="kpi-card__value">{{ todayEvents }}</span></div></article>
27+
<article class="kpi-card"><div class="kpi-card__shell kpi-card__shell--accent"><div class="kpi-card__head"><span class="kpi-card__label">Project Events</span><span class="kpi-card__tag">Projects</span></div><span class="kpi-card__value">{{ projectEvents }}</span></div></article>
2828
</div>
2929

3030
<p-card class="activity-log-table-card">

‎src/app/features/activity/components/activity-log/activity-log.component.scss‎

Lines changed: 55 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,26 +46,73 @@
4646
}
4747

4848
.kpi-card {
49-
min-height: 6.1rem;
49+
margin: 0;
50+
min-height: 7.1rem;
51+
}
52+
53+
.kpi-card__shell {
54+
position: relative;
55+
height: 100%;
56+
border: 1px solid var(--surface-border);
57+
border-radius: 12px;
58+
background: var(--surface-card);
59+
padding: 0.78rem 0.9rem;
60+
display: flex;
61+
flex-direction: column;
62+
justify-content: space-between;
63+
gap: 0.45rem;
64+
overflow: hidden;
65+
}
66+
67+
.kpi-card__shell::before {
68+
content: '';
69+
position: absolute;
70+
inset: 0 auto auto 0;
71+
width: 100%;
72+
height: 3px;
73+
background: color-mix(in srgb, var(--surface-border) 85%, transparent);
74+
}
75+
76+
.kpi-card__head {
77+
display: flex;
78+
align-items: center;
79+
justify-content: space-between;
80+
gap: 0.5rem;
5081
}
5182

5283
.kpi-card__label {
5384
display: block;
54-
font-size: 0.8rem;
85+
font-size: 0.79rem;
86+
font-weight: 600;
5587
color: var(--text-color-secondary);
56-
margin-bottom: 0.35rem;
5788
}
5889

5990
.kpi-card__value {
60-
font-size: 1.7rem;
61-
font-weight: 600;
91+
display: block;
92+
font-size: 1.72rem;
93+
line-height: 1;
94+
font-weight: 700;
95+
color: var(--text-color);
6296
}
6397

64-
:host ::ng-deep .kpi-card .p-card-body,
65-
:host ::ng-deep .kpi-card .p-card-content {
66-
height: 100%;
98+
.kpi-card__tag {
99+
display: inline-flex;
100+
align-items: center;
101+
padding: 0.14rem 0.46rem;
102+
border-radius: 999px;
103+
border: 1px solid var(--surface-border);
104+
background: color-mix(in srgb, var(--surface-100) 70%, transparent);
105+
color: var(--text-color-secondary);
106+
font-size: 0.71rem;
107+
font-weight: 600;
108+
line-height: 1.2;
67109
}
68110

111+
.kpi-card__shell--neutral::before { background: linear-gradient(90deg, #cbd5e1, #e2e8f0); }
112+
.kpi-card__shell--info::before { background: linear-gradient(90deg, #93c5fd, #bfdbfe); }
113+
.kpi-card__shell--warning::before { background: linear-gradient(90deg, #fdba74, #fed7aa); }
114+
.kpi-card__shell--accent::before { background: linear-gradient(90deg, #c4b5fd, #ddd6fe); }
115+
69116
.activity-log-inline-error {
70117
border: 1px solid color-mix(in srgb, var(--red-500) 30%, transparent);
71118
background: color-mix(in srgb, var(--red-100) 60%, transparent);

‎src/app/features/activity/components/my-activity/my-activity.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ <h2>My Activity</h2>
2121
</p-card>
2222

2323
<div class="activity-kpis">
24-
<p-card class="kpi-card"><span class="kpi-card__label">Total Events</span><span class="kpi-card__value">{{ totalEvents }}</span></p-card>
25-
<p-card class="kpi-card"><span class="kpi-card__label">Today</span><span class="kpi-card__value">{{ todayEvents }}</span></p-card>
26-
<p-card class="kpi-card"><span class="kpi-card__label">Task Events</span><span class="kpi-card__value">{{ taskEvents }}</span></p-card>
27-
<p-card class="kpi-card"><span class="kpi-card__label">Project Events</span><span class="kpi-card__value">{{ projectEvents }}</span></p-card>
24+
<article class="kpi-card"><div class="kpi-card__shell kpi-card__shell--neutral"><div class="kpi-card__head"><span class="kpi-card__label">Total Events</span><span class="kpi-card__tag">Audit</span></div><span class="kpi-card__value">{{ totalEvents }}</span></div></article>
25+
<article class="kpi-card"><div class="kpi-card__shell kpi-card__shell--warning"><div class="kpi-card__head"><span class="kpi-card__label">Today</span><span class="kpi-card__tag">Now</span></div><span class="kpi-card__value">{{ todayEvents }}</span></div></article>
26+
<article class="kpi-card"><div class="kpi-card__shell kpi-card__shell--info"><div class="kpi-card__head"><span class="kpi-card__label">Task Events</span><span class="kpi-card__tag">Tasks</span></div><span class="kpi-card__value">{{ taskEvents }}</span></div></article>
27+
<article class="kpi-card"><div class="kpi-card__shell kpi-card__shell--accent"><div class="kpi-card__head"><span class="kpi-card__label">Project Events</span><span class="kpi-card__tag">Projects</span></div><span class="kpi-card__value">{{ projectEvents }}</span></div></article>
2828
</div>
2929

3030
<div class="activity-content-grid">

‎src/app/features/activity/components/my-activity/my-activity.component.scss‎

Lines changed: 55 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,26 +46,73 @@
4646
}
4747

4848
.kpi-card {
49-
min-height: 6.1rem;
49+
margin: 0;
50+
min-height: 7.1rem;
51+
}
52+
53+
.kpi-card__shell {
54+
position: relative;
55+
height: 100%;
56+
border: 1px solid var(--surface-border);
57+
border-radius: 12px;
58+
background: var(--surface-card);
59+
padding: 0.78rem 0.9rem;
60+
display: flex;
61+
flex-direction: column;
62+
justify-content: space-between;
63+
gap: 0.45rem;
64+
overflow: hidden;
65+
}
66+
67+
.kpi-card__shell::before {
68+
content: '';
69+
position: absolute;
70+
inset: 0 auto auto 0;
71+
width: 100%;
72+
height: 3px;
73+
background: color-mix(in srgb, var(--surface-border) 85%, transparent);
74+
}
75+
76+
.kpi-card__head {
77+
display: flex;
78+
align-items: center;
79+
justify-content: space-between;
80+
gap: 0.5rem;
5081
}
5182

5283
.kpi-card__label {
5384
display: block;
54-
font-size: 0.8rem;
85+
font-size: 0.79rem;
86+
font-weight: 600;
5587
color: var(--text-color-secondary);
56-
margin-bottom: 0.35rem;
5788
}
5889

5990
.kpi-card__value {
60-
font-size: 1.7rem;
61-
font-weight: 600;
91+
display: block;
92+
font-size: 1.72rem;
93+
line-height: 1;
94+
font-weight: 700;
95+
color: var(--text-color);
6296
}
6397

64-
:host ::ng-deep .kpi-card .p-card-body,
65-
:host ::ng-deep .kpi-card .p-card-content {
66-
height: 100%;
98+
.kpi-card__tag {
99+
display: inline-flex;
100+
align-items: center;
101+
padding: 0.14rem 0.46rem;
102+
border-radius: 999px;
103+
border: 1px solid var(--surface-border);
104+
background: color-mix(in srgb, var(--surface-100) 70%, transparent);
105+
color: var(--text-color-secondary);
106+
font-size: 0.71rem;
107+
font-weight: 600;
108+
line-height: 1.2;
67109
}
68110

111+
.kpi-card__shell--neutral::before { background: linear-gradient(90deg, #cbd5e1, #e2e8f0); }
112+
.kpi-card__shell--warning::before { background: linear-gradient(90deg, #fdba74, #fed7aa); }
113+
.kpi-card__shell--info::before { background: linear-gradient(90deg, #93c5fd, #bfdbfe); }
114+
.kpi-card__shell--accent::before { background: linear-gradient(90deg, #c4b5fd, #ddd6fe); }
115+
69116
.activity-content-grid {
70117
display: grid;
71118
grid-template-columns: repeat(12, minmax(0, 1fr));

‎src/app/features/admin/components/admin-dashboard/admin-dashboard.component.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@ <h2>Admin Dashboard</h2>
1616
</p-card>
1717

1818
<div class="admin-kpis">
19-
<p-card class="kpi-card"><span class="kpi-card__label">Active Users</span><span class="kpi-card__value">{{ activeUsersCount }}</span></p-card>
20-
<p-card class="kpi-card"><span class="kpi-card__label">Inactive Users</span><span class="kpi-card__value">{{ inactiveUsersCount }}</span></p-card>
21-
<p-card class="kpi-card"><span class="kpi-card__label">Administrators</span><span class="kpi-card__value">{{ adminUsersCount }}</span></p-card>
22-
<p-card class="kpi-card"><span class="kpi-card__label">Project Managers</span><span class="kpi-card__value">{{ projectManagerUsersCount }}</span></p-card>
23-
<p-card class="kpi-card"><span class="kpi-card__label">Users</span><span class="kpi-card__value">{{ standardUsersCount }}</span></p-card>
19+
<article class="kpi-card"><div class="kpi-card__shell kpi-card__shell--done"><div class="kpi-card__head"><span class="kpi-card__label">Active Users</span><span class="kpi-card__tag">Enabled</span></div><span class="kpi-card__value">{{ activeUsersCount }}</span></div></article>
20+
<article class="kpi-card"><div class="kpi-card__shell kpi-card__shell--warning"><div class="kpi-card__head"><span class="kpi-card__label">Inactive Users</span><span class="kpi-card__tag">Blocked</span></div><span class="kpi-card__value">{{ inactiveUsersCount }}</span></div></article>
21+
<article class="kpi-card"><div class="kpi-card__shell kpi-card__shell--accent"><div class="kpi-card__head"><span class="kpi-card__label">Administrators</span><span class="kpi-card__tag">Role</span></div><span class="kpi-card__value">{{ adminUsersCount }}</span></div></article>
22+
<article class="kpi-card"><div class="kpi-card__shell kpi-card__shell--info"><div class="kpi-card__head"><span class="kpi-card__label">Project Managers</span><span class="kpi-card__tag">Role</span></div><span class="kpi-card__value">{{ projectManagerUsersCount }}</span></div></article>
23+
<article class="kpi-card"><div class="kpi-card__shell kpi-card__shell--neutral"><div class="kpi-card__head"><span class="kpi-card__label">Users</span><span class="kpi-card__tag">Role</span></div><span class="kpi-card__value">{{ standardUsersCount }}</span></div></article>
2424
</div>
2525

2626
<p-card class="admin-table-card">

‎src/app/features/admin/components/admin-dashboard/admin-dashboard.component.scss‎

Lines changed: 57 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,21 +47,74 @@
4747
}
4848

4949
.kpi-card {
50-
min-height: 6rem;
50+
margin: 0;
51+
min-height: 7.1rem;
52+
}
53+
54+
.kpi-card__shell {
55+
position: relative;
56+
height: 100%;
57+
border: 1px solid var(--surface-border);
58+
border-radius: 12px;
59+
background: var(--surface-card);
60+
padding: 0.78rem 0.9rem;
61+
display: flex;
62+
flex-direction: column;
63+
justify-content: space-between;
64+
gap: 0.45rem;
65+
overflow: hidden;
66+
}
67+
68+
.kpi-card__shell::before {
69+
content: '';
70+
position: absolute;
71+
inset: 0 auto auto 0;
72+
width: 100%;
73+
height: 3px;
74+
background: color-mix(in srgb, var(--surface-border) 85%, transparent);
75+
}
76+
77+
.kpi-card__head {
78+
display: flex;
79+
align-items: center;
80+
justify-content: space-between;
81+
gap: 0.5rem;
5182
}
5283

5384
.kpi-card__label {
5485
display: block;
55-
font-size: 0.8rem;
86+
font-size: 0.79rem;
87+
font-weight: 600;
5688
color: var(--text-color-secondary);
57-
margin-bottom: 0.3rem;
5889
}
5990

6091
.kpi-card__value {
61-
font-size: 1.7rem;
92+
display: block;
93+
font-size: 1.72rem;
94+
line-height: 1;
95+
font-weight: 700;
96+
color: var(--text-color);
97+
}
98+
99+
.kpi-card__tag {
100+
display: inline-flex;
101+
align-items: center;
102+
padding: 0.14rem 0.46rem;
103+
border-radius: 999px;
104+
border: 1px solid var(--surface-border);
105+
background: color-mix(in srgb, var(--surface-100) 70%, transparent);
106+
color: var(--text-color-secondary);
107+
font-size: 0.71rem;
62108
font-weight: 600;
109+
line-height: 1.2;
63110
}
64111

112+
.kpi-card__shell--done::before { background: linear-gradient(90deg, #86efac, #bbf7d0); }
113+
.kpi-card__shell--warning::before { background: linear-gradient(90deg, #fdba74, #fed7aa); }
114+
.kpi-card__shell--accent::before { background: linear-gradient(90deg, #c4b5fd, #ddd6fe); }
115+
.kpi-card__shell--info::before { background: linear-gradient(90deg, #93c5fd, #bfdbfe); }
116+
.kpi-card__shell--neutral::before { background: linear-gradient(90deg, #cbd5e1, #e2e8f0); }
117+
65118
.table-caption {
66119
display: flex;
67120
align-items: center;

‎src/app/features/profile/components/user-profile-security/user-profile-security.component.html‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,10 @@ <h2>User Profile & Security</h2>
2828
</p-card>
2929

3030
<div class="profile-kpis">
31-
<div class="profile-kpis__item">
32-
<p-card class="kpi-card"><span class="kpi-card__label">Email</span><span class="kpi-card__value kpi-card__value--small">{{ userEmail() }}</span></p-card>
33-
</div>
34-
<div class="profile-kpis__item">
35-
<p-card class="kpi-card"><span class="kpi-card__label">Roles</span><span class="kpi-card__value">{{ roles().length }}</span></p-card>
36-
</div>
37-
<div class="profile-kpis__item">
38-
<p-card class="kpi-card"><span class="kpi-card__label">Scopes</span><span class="kpi-card__value">{{ scopes().length }}</span></p-card>
39-
</div>
40-
<div class="profile-kpis__item">
41-
<p-card class="kpi-card"><span class="kpi-card__label">Expires In</span><span class="kpi-card__value">{{ expiresInMinutes() }}m</span></p-card>
42-
</div>
31+
<article class="kpi-card"><div class="kpi-card__shell kpi-card__shell--info"><div class="kpi-card__head"><span class="kpi-card__label">Email</span><span class="kpi-card__tag">Identity</span></div><span class="kpi-card__value kpi-card__value--small">{{ userEmail() }}</span></div></article>
32+
<article class="kpi-card"><div class="kpi-card__shell kpi-card__shell--accent"><div class="kpi-card__head"><span class="kpi-card__label">Roles</span><span class="kpi-card__tag">Access</span></div><span class="kpi-card__value">{{ roles().length }}</span></div></article>
33+
<article class="kpi-card"><div class="kpi-card__shell kpi-card__shell--neutral"><div class="kpi-card__head"><span class="kpi-card__label">Scopes</span><span class="kpi-card__tag">Token</span></div><span class="kpi-card__value">{{ scopes().length }}</span></div></article>
34+
<article class="kpi-card"><div class="kpi-card__shell kpi-card__shell--warning"><div class="kpi-card__head"><span class="kpi-card__label">Expires In</span><span class="kpi-card__tag">Session</span></div><span class="kpi-card__value">{{ expiresInMinutes() }}m</span></div></article>
4335
</div>
4436

4537
<div class="profile-grid">

0 commit comments

Comments
 (0)