Skip to content

Commit f5691d9

Browse files
thekevinmthekevinm
committed
Refined the congrats popup and quick stats
1 parent c40f013 commit f5691d9

13 files changed

Lines changed: 464 additions & 292 deletions

‎src/app/adf-home/df-dashboard/df-dashboard-card/df-dashboard-card.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
class="dashboard-card"
33
[class]="'card-' + color"
44
[class.zero-value]="isZero"
5-
[class.shake-animation]="isZero"
65
[class.clickable]="clickable"
76
(click)="onClick()">
87
<mat-card-content>
@@ -20,8 +19,9 @@
2019

2120
<div class="card-body">
2221
<h3 class="card-title">{{ title }}</h3>
23-
<div class="card-value">{{ value }}</div>
24-
<p class="card-subtitle" *ngIf="subtitle">{{ subtitle }}</p>
22+
<div class="card-value" *ngIf="!isZero">{{ value }}</div>
23+
<div class="card-value zero-state-cta" *ngIf="isZero">{{ zeroStateText }}</div>
24+
<p class="card-subtitle" *ngIf="subtitle && !isZero">{{ subtitle }}</p>
2525
<ng-content></ng-content>
2626
</div>
2727

‎src/app/adf-home/df-dashboard/df-dashboard-card/df-dashboard-card.component.scss‎

Lines changed: 124 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
&.clickable {
1414
cursor: pointer;
15-
15+
1616
&:hover {
1717
transform: translateY(-4px);
1818
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
@@ -38,6 +38,9 @@
3838
display: flex;
3939
align-items: center;
4040
justify-content: center;
41+
position: relative;
42+
z-index: 1;
43+
transition: transform 0.3s ease;
4144

4245
fa-icon {
4346
font-size: 24px;
@@ -100,6 +103,18 @@
100103
font-weight: 600;
101104
color: #333;
102105
line-height: 1.2;
106+
107+
&.zero-state-cta {
108+
font-size: 20px;
109+
font-weight: 600;
110+
line-height: 1.3;
111+
background: linear-gradient(135deg, #7f11e0, #9333ea);
112+
-webkit-background-clip: text;
113+
-webkit-text-fill-color: transparent;
114+
background-clip: text;
115+
padding: 8px 0;
116+
transition: all 0.3s ease;
117+
}
103118
}
104119

105120
.card-subtitle {
@@ -120,160 +135,114 @@
120135
}
121136
}
122137

123-
// Prompt styling
138+
// Prompt styling - professional and clean
124139
::ng-deep [prompt] {
125-
font-size: 14px;
126-
color: #d32f2f;
127-
font-weight: 600;
140+
font-size: 13px;
141+
color: #666;
142+
font-weight: 400;
128143
display: flex;
129144
align-items: center;
130-
gap: 6px;
131-
animation: urgent-pulse 1.5s infinite;
132-
text-shadow: 0 0 8px rgba(211, 47, 47, 0.3);
133-
letter-spacing: 0.5px;
145+
gap: 8px;
146+
margin-top: 12px;
147+
padding: 8px 12px;
148+
background: rgba(127, 17, 224, 0.04);
149+
border-radius: 6px;
150+
transition: all 0.2s ease;
134151

135152
span {
136153
position: relative;
137-
138-
&::after {
139-
content: '';
140-
position: absolute;
141-
bottom: -2px;
142-
left: 0;
143-
right: 0;
144-
height: 2px;
145-
background: linear-gradient(90deg, transparent, #d32f2f, transparent);
146-
animation: underline-slide 2s infinite;
147-
}
148-
}
149-
}
150-
151-
@keyframes urgent-pulse {
152-
0%,
153-
100% {
154-
opacity: 0.9;
155-
transform: scale(1);
156-
}
157-
50% {
158-
opacity: 1;
159-
transform: scale(1.02);
160-
}
161-
}
162-
163-
@keyframes underline-slide {
164-
0% {
165-
transform: translateX(-100%);
166-
}
167-
100% {
168-
transform: translateX(100%);
154+
flex: 1;
169155
}
170156
}
171157

172-
@keyframes pulse {
173-
0% {
174-
opacity: 0.8;
175-
}
176-
50% {
177-
opacity: 1;
178-
}
179-
100% {
180-
opacity: 0.8;
181-
}
182-
}
183-
184-
// Zero value styling
158+
// Zero value styling - professional and inviting
185159
.dashboard-card.zero-value {
186-
background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
187-
border: 2px solid #ff6b6b;
160+
background: #ffffff;
161+
border: 1.5px solid rgba(147, 51, 234, 0.3);
188162
position: relative;
189163
overflow: hidden;
190-
box-shadow: 0 0 20px rgba(255, 107, 107, 0.2);
191-
animation: glow-pulse 2.5s infinite;
164+
box-shadow: 0 2px 12px rgba(147, 51, 234, 0.08);
165+
cursor: pointer !important;
166+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
192167

193168
&::before {
194169
content: '';
195170
position: absolute;
196-
top: -2px;
197-
left: -2px;
198-
right: -2px;
199-
bottom: -2px;
200-
background: linear-gradient(
201-
90deg,
202-
transparent,
203-
rgba(255, 107, 107, 0.3),
204-
transparent
205-
);
206-
animation: shimmer 3s infinite;
207-
}
208-
209-
.card-value {
210-
color: #d32f2f !important;
211-
font-weight: 700 !important;
212-
text-shadow: 0 0 3px rgba(211, 47, 47, 0.2);
171+
top: 0;
172+
left: 0;
173+
right: 0;
174+
height: 2px;
175+
background: linear-gradient(90deg, #7f11e0, #9333ea);
176+
opacity: 1;
213177
}
214178

215179
.icon-container {
216-
animation: attention-pulse 2s infinite;
217-
box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
180+
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
181+
182+
// Keep original colors for each icon type
183+
&.icon-primary {
184+
background: linear-gradient(135deg, #7f11e0 0%, #5c239a 100%);
185+
}
186+
187+
&.icon-success {
188+
background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
189+
}
190+
191+
&.icon-info {
192+
background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
193+
}
218194
}
219195

220-
&:hover {
221-
transform: translateY(-2px) scale(1.02);
222-
box-shadow: 0 4px 30px rgba(255, 107, 107, 0.3);
196+
.card-value.zero-state-cta {
197+
position: relative;
198+
199+
&::after {
200+
content: '→';
201+
position: absolute;
202+
right: -25px;
203+
top: 50%;
204+
transform: translateY(-50%);
205+
font-size: 20px;
206+
color: #9333ea;
207+
opacity: 0;
208+
transition: all 0.3s ease;
209+
}
223210
}
224-
}
225211

226-
@keyframes glow-pulse {
227-
0%,
228-
100% {
229-
box-shadow: 0 0 20px rgba(255, 107, 107, 0.2);
230-
}
231-
50% {
232-
box-shadow: 0 0 30px rgba(255, 107, 107, 0.4);
212+
::ng-deep [prompt] {
213+
background: rgba(127, 17, 224, 0.06);
214+
color: #7f11e0;
215+
font-weight: 500;
233216
}
234-
}
235217

236-
// Shake animation for zero value cards
237-
.dashboard-card.shake-animation {
238-
animation: subtle-shake 4s infinite;
239-
}
218+
&:hover {
219+
transform: translateY(-6px);
220+
box-shadow: 0 12px 28px rgba(147, 51, 234, 0.15);
221+
border-color: rgba(127, 17, 224, 0.5);
222+
background: linear-gradient(180deg, #ffffff 0%, #faf8ff 100%);
240223

241-
@keyframes subtle-shake {
242-
0%,
243-
90%,
244-
100% {
245-
transform: translateX(0);
246-
}
247-
92% {
248-
transform: translateX(-2px) rotate(-0.5deg);
249-
}
250-
94% {
251-
transform: translateX(2px) rotate(0.5deg);
252-
}
253-
96% {
254-
transform: translateX(-1px) rotate(-0.3deg);
255-
}
256-
98% {
257-
transform: translateX(1px) rotate(0.3deg);
258-
}
259-
}
224+
.icon-container {
225+
transform: scale(1.08);
226+
}
260227

261-
@keyframes shimmer {
262-
0% {
263-
transform: translateX(-100%);
264-
}
265-
100% {
266-
transform: translateX(200%);
267-
}
268-
}
228+
.card-value.zero-state-cta {
229+
transform: translateX(-5px);
230+
231+
&::after {
232+
opacity: 1;
233+
right: -30px;
234+
}
235+
}
269236

270-
@keyframes attention-pulse {
271-
0%,
272-
100% {
273-
transform: scale(1);
237+
::ng-deep [prompt] {
238+
background: rgba(127, 17, 224, 0.08);
239+
transform: translateY(-1px);
240+
}
274241
}
275-
50% {
276-
transform: scale(1.1);
242+
243+
&:active {
244+
transform: translateY(-3px);
245+
box-shadow: 0 6px 16px rgba(147, 51, 234, 0.12);
277246
}
278247
}
279248

@@ -289,6 +258,13 @@
289258

290259
.card-value {
291260
color: #fff;
261+
262+
&.zero-state-cta {
263+
background: linear-gradient(135deg, #bb86fc, #9333ea);
264+
-webkit-background-clip: text;
265+
-webkit-text-fill-color: transparent;
266+
background-clip: text;
267+
}
292268
}
293269

294270
.card-subtitle {
@@ -305,30 +281,35 @@
305281
}
306282

307283
&.zero-value {
308-
background: linear-gradient(135deg, #4a1a1a 0%, #3d1515 100%);
309-
border: 2px solid #ff6b6b;
284+
background: #2e2e2e;
285+
border: 1.5px solid rgba(147, 51, 234, 0.4);
286+
box-shadow: 0 2px 12px rgba(147, 51, 234, 0.12);
310287

311288
&::before {
312-
background: linear-gradient(
313-
90deg,
314-
transparent,
315-
rgba(255, 107, 107, 0.2),
316-
transparent
317-
);
289+
background: linear-gradient(90deg, #bb86fc, #9333ea);
318290
}
319291

320-
.card-value {
321-
color: #ff8a80 !important;
292+
.card-value.zero-state-cta {
293+
&::after {
294+
color: #bb86fc;
295+
}
296+
}
297+
298+
&:hover {
299+
background: linear-gradient(180deg, #2e2e2e 0%, #352840 100%);
300+
border-color: rgba(187, 134, 252, 0.6);
301+
box-shadow: 0 12px 28px rgba(187, 134, 252, 0.2);
302+
}
303+
304+
::ng-deep [prompt] {
305+
background: rgba(187, 134, 252, 0.08);
306+
color: #bb86fc;
322307
}
323308
}
324309
}
325310

326311
::ng-deep [prompt] {
327-
color: #ff8a80;
328-
text-shadow: 0 0 10px rgba(255, 138, 128, 0.5);
329-
330-
span::after {
331-
background: linear-gradient(90deg, transparent, #ff8a80, transparent);
332-
}
312+
color: #aaa;
313+
background: rgba(255, 255, 255, 0.04);
333314
}
334-
}
315+
}

‎src/app/adf-home/df-dashboard/df-dashboard-card/df-dashboard-card.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export class DfDashboardCardComponent {
2222
@Input() footerText?: string;
2323
@Input() showPrompt?: boolean = false;
2424
@Input() isZero?: boolean = false;
25+
@Input() zeroStateText?: string = 'Click to get started!';
2526
@Input() color: 'primary' | 'accent' | 'success' | 'info' | 'warn' =
2627
'primary';
2728
@Input() clickable?: boolean = false;

‎src/app/adf-home/df-dashboard/df-dashboard.component.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ <h2 class="dashboard-title">{{ 'home.dashboard.title' | transloco }}</h2>
2222
[subtitle]="'home.dashboard.services.total' | transloco"
2323
[showPrompt]="stats.services.total === 0"
2424
[isZero]="stats.services.total === 0"
25+
[zeroStateText]="'Create your first API'"
2526
[clickable]="stats.services.total === 0"
2627
(cardClick)="onServicesCardClick()"
2728
color="primary">
@@ -38,6 +39,7 @@ <h2 class="dashboard-title">{{ 'home.dashboard.title' | transloco }}</h2>
3839
[subtitle]="'home.dashboard.apiKeys.total' | transloco"
3940
[showPrompt]="stats.apiKeys.total === 0"
4041
[isZero]="stats.apiKeys.total === 0"
42+
[zeroStateText]="'Generate your API key'"
4143
[clickable]="stats.apiKeys.total === 0"
4244
(cardClick)="onApiKeysCardClick()"
4345
color="success">
@@ -54,6 +56,7 @@ <h2 class="dashboard-title">{{ 'home.dashboard.title' | transloco }}</h2>
5456
[subtitle]="'home.dashboard.roles.total' | transloco"
5557
[showPrompt]="stats.roles.total === 0"
5658
[isZero]="stats.roles.total === 0"
59+
[zeroStateText]="'Set up your first role'"
5760
[clickable]="stats.roles.total === 0"
5861
(cardClick)="onRolesCardClick()"
5962
color="info">

0 commit comments

Comments
 (0)