Skip to content

Commit 31a695f

Browse files
lyubov-voloshkolyubov-voloshko
authored
Merge pull request #1666 from karinakharchenko/empty-state-triggers
Redesign automations empty state UI
2 parents ea9da9b + a0d589d commit 31a695f

2 files changed

Lines changed: 384 additions & 81 deletions

File tree

‎frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css‎

Lines changed: 293 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -308,79 +308,339 @@
308308
display: flex;
309309
flex-direction: column;
310310
align-items: center;
311-
gap: 32px;
312-
margin: 32px auto 0;
313-
width: clamp(300px, 80vw, 1020px);
311+
gap: 16px;
312+
margin: 40px auto 0;
313+
max-width: 900px;
314314
}
315315

316-
.actions-hint {
316+
.empty-state__header {
317317
display: flex;
318318
flex-direction: column;
319319
align-items: center;
320-
margin-top: 40px !important;
320+
text-align: center;
321+
margin-bottom: 8px;
321322
}
322323

323-
.actions-hint__title {
324-
display: inline-block;
325-
font-size: 1.25em;
326-
margin-bottom: 4px;
324+
.empty-state__icon-box {
325+
width: 40px;
326+
height: 40px;
327+
border-radius: 10px;
328+
background: color-mix(in srgb, var(--color-accentedPalette-500), transparent 88%);
329+
display: flex;
330+
align-items: center;
331+
justify-content: center;
332+
margin-bottom: 16px;
333+
}
334+
335+
.empty-state__icon {
336+
color: var(--color-accentedPalette-500);
337+
font-size: 22px;
338+
width: 22px;
339+
height: 22px;
327340
}
328341

329-
.actions-hint__text {
342+
.empty-state__title {
343+
font-size: 20px;
344+
font-weight: 600;
345+
margin: 0 0 2px;
346+
line-height: 1.3;
347+
}
348+
349+
.empty-state__subtitle {
350+
font-size: 14px;
351+
font-weight: 300;
330352
color: rgba(0, 0, 0, 0.64);
353+
margin: 0 !important;
354+
line-height: 1.5;
331355
}
332356

333357
@media (prefers-color-scheme: dark) {
334-
.actions-hint__text {
358+
.empty-state__subtitle {
335359
color: rgba(255, 255, 255, 0.64);
336360
}
337361
}
338362

339-
.rules-examples {
340-
display: grid;
341-
grid-template-columns: repeat(3, minmax(300px, 1fr));
342-
grid-gap: 20px;
363+
.empty-state__cta {
364+
display: flex;
365+
align-items: center;
366+
gap: 16px;
367+
margin-top: 16px;
368+
}
369+
370+
.empty-state__docs-link {
371+
display: inline-flex;
372+
align-items: center;
373+
gap: 3px;
374+
font-size: 13px;
375+
color: var(--color-accentedPalette-500);
376+
text-decoration: none;
377+
}
378+
379+
.empty-state__docs-link:hover {
380+
text-decoration: underline;
381+
}
382+
383+
.empty-state__docs-icon {
384+
font-size: 15px;
385+
width: 15px;
386+
height: 15px;
387+
}
388+
389+
/* ── Example flow ── */
390+
391+
.example-flow {
392+
display: flex;
393+
flex-direction: column;
394+
align-items: center;
343395
width: 100%;
396+
max-width: 520px;
344397
}
345398

346-
.rule-example {
399+
.example-flow__card {
347400
display: flex;
348401
flex-direction: column;
349-
align-items: flex-start;
350-
gap: 16px;
351-
border: 1px solid rgba(0, 0, 0, 0.12);
402+
gap: 0;
403+
padding: 24px;
404+
border: 1px solid var(--color-accentedPalette-100);
405+
border-radius: 20px;
406+
width: 100%;
407+
box-sizing: border-box;
408+
opacity: 0.85;
409+
pointer-events: none;
410+
background: var(--color-accentedPalette-50);
411+
}
412+
413+
@media (prefers-color-scheme: dark) {
414+
.example-flow__card {
415+
border-color: var(--color-accentedPalette-800);
416+
background: var(--color-accentedPalette-900);
417+
}
418+
}
419+
420+
/* ── Badges ── */
421+
422+
.example-flow__section-label {
423+
display: flex;
424+
align-items: center;
425+
gap: 8px;
426+
margin-bottom: 12px;
427+
}
428+
429+
.example-flow__section-text {
430+
font-size: 13px;
431+
font-weight: 500;
432+
}
433+
434+
.example-flow__badge {
435+
display: inline-flex;
436+
font-size: 11px;
437+
font-weight: 700;
438+
letter-spacing: 0.05em;
439+
padding: 3px 10px;
440+
border-radius: 6px;
441+
}
442+
443+
.example-flow__badge--when {
444+
background: #ede9fe;
445+
color: #6d28d9;
446+
}
447+
448+
.example-flow__badge--action {
449+
background: #dbeafe;
450+
color: #3b82f6;
451+
}
452+
453+
@media (prefers-color-scheme: dark) {
454+
.example-flow__badge--when {
455+
background: #3730a3;
456+
color: #a5b4fc;
457+
}
458+
459+
.example-flow__badge--action {
460+
background: #1e3a5f;
461+
color: #60a5fa;
462+
}
463+
}
464+
465+
/* ── Trigger grid ── */
466+
467+
.example-flow__triggers {
468+
display: grid;
469+
grid-template-columns: 1fr 1fr;
470+
gap: 10px;
471+
}
472+
473+
.example-trigger {
474+
display: flex;
475+
align-items: center;
476+
gap: 10px;
477+
padding: 10px 12px;
478+
border-radius: 12px;
479+
background: #ffffff;
480+
border: 1px solid var(--color-accentedPalette-100);
481+
}
482+
483+
@media (prefers-color-scheme: dark) {
484+
.example-trigger {
485+
background: #13151a;
486+
border-color: var(--color-accentedPalette-800);
487+
}
488+
}
489+
490+
.example-trigger__icon-box {
491+
width: 34px;
492+
height: 34px;
493+
border-radius: 9px;
494+
display: flex;
495+
align-items: center;
496+
justify-content: center;
497+
flex-shrink: 0;
498+
}
499+
500+
.example-trigger__icon-box mat-icon {
501+
font-size: 18px;
502+
width: 18px;
503+
height: 18px;
504+
}
505+
506+
.example-trigger__icon-box--add {
507+
background: color-mix(in srgb, var(--success-color), transparent 80%);
508+
color: var(--success-color);
509+
}
510+
511+
.example-trigger__icon-box--update {
512+
background: color-mix(in srgb, var(--info-color), transparent 80%);
513+
color: var(--info-color);
514+
}
515+
516+
.example-trigger__icon-box--delete {
517+
background: color-mix(in srgb, var(--error-color), transparent 80%);
518+
color: var(--error-color);
519+
}
520+
521+
.example-trigger__icon-box--custom {
522+
background: color-mix(in srgb, #c084fc, transparent 80%);
523+
color: #6d28d9;
524+
}
525+
526+
@media (prefers-color-scheme: dark) {
527+
.example-trigger__icon-box--add { background: color-mix(in srgb, var(--success-color), transparent 88%); color: var(--success-color); }
528+
.example-trigger__icon-box--update { background: color-mix(in srgb, var(--info-color), transparent 88%); color: var(--info-color); }
529+
.example-trigger__icon-box--delete { background: color-mix(in srgb, var(--error-color), transparent 88%); color: var(--error-color); }
530+
.example-trigger__icon-box--custom { background: rgba(192, 132, 252, 0.12); color: #c084fc; }
531+
}
532+
533+
.example-trigger__text {
534+
display: flex;
535+
flex-direction: column;
536+
gap: 1px;
537+
}
538+
539+
.example-trigger__title {
540+
font-size: 13px;
541+
font-weight: 600;
542+
}
543+
544+
.example-trigger__desc {
545+
font-size: 11px;
546+
color: rgba(0,0,0,0.64);
547+
}
548+
549+
@media (prefers-color-scheme: dark) {
550+
.example-trigger__desc { color: rgba(255,255,255,0.64); }
551+
}
552+
553+
/* ── Connector ── */
554+
555+
.example-flow__connector {
556+
display: flex;
557+
flex-direction: column;
558+
align-items: center;
559+
height: 48px;
560+
margin: 4px 0;
561+
}
562+
563+
.example-flow__connector-line {
564+
flex: 1;
565+
border-left: 1px solid var(--color-accentedPalette-100);
566+
}
567+
568+
@media (prefers-color-scheme: dark) {
569+
.example-flow__connector-line {
570+
border-color: var(--color-accentedPalette-800);
571+
}
572+
}
573+
574+
.example-flow__connector-pill {
575+
font-size: 10px;
576+
font-weight: 700;
577+
letter-spacing: 0.05em;
578+
padding: 2px 8px;
352579
border-radius: 4px;
353-
padding: 16px;
354580
}
355581

356582
@media (prefers-color-scheme: dark) {
357-
.rule-example {
358-
border-color: rgba(255, 255, 255, 0.12);
359-
background-color: var(--surface-dark-color);
583+
.example-flow__connector-pill {
584+
background: #1e2130;
360585
}
361586
}
362587

363-
.rule-example__row {
588+
/* ── Actions ── */
589+
590+
.example-flow__actions {
591+
display: flex;
592+
gap: 10px;
593+
}
594+
595+
.example-action {
596+
flex: 1;
364597
display: flex;
598+
flex-direction: column;
365599
align-items: center;
366-
gap: 24px;
600+
gap: 6px;
601+
padding: 14px 8px;
602+
border-radius: 12px;
603+
background: #ffffff;
604+
border: 1px solid var(--color-accentedPalette-100);
605+
}
606+
607+
@media (prefers-color-scheme: dark) {
608+
.example-action {
609+
background: #13151a;
610+
border-color: var(--color-accentedPalette-800);
611+
}
367612
}
368613

369-
.rule-example__value {
614+
.example-action__icon-box {
615+
width: 40px;
616+
height: 40px;
617+
border-radius: 10px;
370618
display: flex;
371619
align-items: center;
372-
background-color: rgba(0, 0, 0, 0.04);
373-
color: rgba(0, 0, 0, 0.64);
374-
padding: 8px 16px;
620+
justify-content: center;
621+
background: color-mix(in srgb, var(--color-accentedPalette-500), transparent 88%);
622+
color: var(--color-accentedPalette-500);
375623
}
376624

377625
@media (prefers-color-scheme: dark) {
378-
.rule-example__value {
379-
background-color: rgba(255, 255, 255, 0.08);
380-
color: rgba(255, 255, 255, 0.64);
626+
.example-action__icon-box {
627+
background: #1e2130;
628+
color: var(--color-accentedPalette-500);
381629
}
382630
}
383631

632+
.example-action__icon-box mat-icon {
633+
font-size: 20px;
634+
width: 20px;
635+
height: 20px;
636+
}
637+
638+
.example-action__label {
639+
font-size: 12px;
640+
font-weight: 600;
641+
}
642+
643+
384644
/* ── Creation flow ── */
385645

386646
.creation-flow {
@@ -677,7 +937,7 @@
677937

678938
.trigger-pill--custom.trigger-pill--active {
679939
border-color: #c084fc;
680-
background: #150820;
940+
background: color-mix(in srgb, #c084fc, transparent 90%);
681941
box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.25), 0 0 12px rgba(192, 132, 252, 0.08);
682942
}
683943

0 commit comments

Comments
 (0)