Skip to content

Commit 259563a

Browse files
karinakharchenkoclaude
karinakharchenko
and
claude
committed
Refine empty state: card-based flow with trigger grid and action cards
Replace pill-based triggers with 2x2 grid of icon+title+description cards. Actions shown as centered icon-box cards. Add WHEN/ACTION badges with section labels, connector with THEN pill. Improve light/dark theme contrast. Rename sidebar empty text. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 5f84702 commit 259563a

2 files changed

Lines changed: 271 additions & 127 deletions

File tree

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

Lines changed: 199 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -342,15 +342,15 @@
342342
.empty-state__title {
343343
font-size: 20px;
344344
font-weight: 600;
345-
margin: 0 0 6px;
345+
margin: 0 0 2px;
346346
line-height: 1.3;
347347
}
348348

349349
.empty-state__subtitle {
350350
font-size: 14px;
351351
font-weight: 300;
352352
color: rgba(0, 0, 0, 0.56);
353-
margin: 0 0 20px !important;
353+
margin: 0 !important;
354354
line-height: 1.5;
355355
}
356356

@@ -364,6 +364,7 @@
364364
display: flex;
365365
align-items: center;
366366
gap: 16px;
367+
margin-top: 16px;
367368
}
368369

369370
.empty-state__docs-link {
@@ -392,156 +393,270 @@
392393
flex-direction: column;
393394
align-items: center;
394395
width: 100%;
395-
max-width: 640px;
396+
max-width: 520px;
396397
}
397398

398399
.example-flow__card {
399400
display: flex;
400401
flex-direction: column;
401-
gap: 10px;
402-
padding: 14px 18px;
403-
border: 1px solid rgba(0, 0, 0, 0.08);
404-
border-radius: 8px;
402+
gap: 0;
403+
padding: 24px;
404+
border: 1px solid #cbd5e1;
405+
border-radius: 20px;
405406
width: 100%;
406407
box-sizing: border-box;
408+
opacity: 0.85;
409+
pointer-events: none;
410+
background: #f1f5f9;
407411
}
408412

409413
@media (prefers-color-scheme: dark) {
410414
.example-flow__card {
411-
border-color: rgba(255, 255, 255, 0.08);
412-
background: rgba(255, 255, 255, 0.02);
415+
border-color: #2a2f3f;
416+
background: #1a1d27;
413417
}
414418
}
415419

416-
.example-flow__card-label {
417-
font-size: 13px;
418-
font-weight: 500;
419-
color: rgba(0, 0, 0, 0.5);
420+
/* ── Badges ── */
421+
422+
.example-flow__section-label {
420423
display: flex;
421424
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+
color: #475569;
422433
}
423434

424435
@media (prefers-color-scheme: dark) {
425-
.example-flow__card-label {
426-
color: rgba(255, 255, 255, 0.5);
436+
.example-flow__section-text {
437+
color: #94a3b8;
427438
}
428439
}
429440

430-
.example-flow__card-label .step-label__badge {
431-
font-size: 0.8em;
432-
padding: 1px 5px;
441+
.example-flow__badge {
442+
display: inline-flex;
443+
font-size: 11px;
444+
font-weight: 700;
445+
letter-spacing: 0.05em;
446+
padding: 3px 10px;
447+
border-radius: 6px;
448+
}
449+
450+
.example-flow__badge--when {
451+
background: #ede9fe;
452+
color: #6d28d9;
453+
}
454+
455+
.example-flow__badge--action {
456+
background: #dbeafe;
457+
color: #3b82f6;
433458
}
434459

435-
.example-flow__card-items {
460+
@media (prefers-color-scheme: dark) {
461+
.example-flow__badge--when {
462+
background: #3730a3;
463+
color: #a5b4fc;
464+
}
465+
466+
.example-flow__badge--action {
467+
background: #1e3a5f;
468+
color: #60a5fa;
469+
}
470+
}
471+
472+
/* ── Trigger grid ── */
473+
474+
.example-flow__triggers {
475+
display: grid;
476+
grid-template-columns: 1fr 1fr;
477+
gap: 10px;
478+
}
479+
480+
.example-trigger {
436481
display: flex;
437482
align-items: center;
438-
gap: 8px;
439-
flex-wrap: nowrap;
483+
gap: 10px;
484+
padding: 10px 12px;
485+
border-radius: 12px;
486+
background: #ffffff;
487+
border: 1px solid #cbd5e1;
440488
}
441489

442-
.example-flow__arrow {
490+
@media (prefers-color-scheme: dark) {
491+
.example-trigger {
492+
background: #13151a;
493+
border-color: #2a2f3f;
494+
}
495+
}
496+
497+
.example-trigger__icon-box {
498+
width: 34px;
499+
height: 34px;
500+
border-radius: 9px;
443501
display: flex;
444-
flex-direction: column;
445502
align-items: center;
446-
height: 40px;
447-
gap: 2px;
503+
justify-content: center;
504+
flex-shrink: 0;
448505
}
449506

450-
.example-flow__arrow::before,
451-
.example-flow__arrow::after {
452-
content: '';
453-
flex: 1;
454-
border-left: 1px dashed var(--color-accentedPalette-300);
507+
.example-trigger__icon-box mat-icon {
508+
font-size: 18px;
509+
width: 18px;
510+
height: 18px;
455511
}
456512

457-
.example-flow__arrow-icon {
458-
font-size: 14px;
459-
width: 14px;
460-
height: 14px;
461-
color: var(--color-accentedPalette-400);
462-
font-variation-settings: 'FILL' 1;
513+
.example-trigger__icon-box--add {
514+
background: color-mix(in srgb, #4ade80, transparent 80%);
515+
color: #15803d;
516+
}
517+
518+
.example-trigger__icon-box--update {
519+
background: color-mix(in srgb, #60a5fa, transparent 80%);
520+
color: #1d4ed8;
521+
}
522+
523+
.example-trigger__icon-box--delete {
524+
background: color-mix(in srgb, #f87171, transparent 80%);
525+
color: #b91c1c;
463526
}
464527

465-
.example-flow__arrow .step-label__badge {
466-
font-size: 0.8em;
467-
padding: 1px 5px;
528+
.example-trigger__icon-box--custom {
529+
background: color-mix(in srgb, #c084fc, transparent 80%);
530+
color: #6d28d9;
468531
}
469532

470-
/* ── Branches ── */
533+
@media (prefers-color-scheme: dark) {
534+
.example-trigger__icon-box--add { background: rgba(74, 222, 128, 0.12); color: #4ade80; }
535+
.example-trigger__icon-box--update { background: rgba(96, 165, 250, 0.12); color: #60a5fa; }
536+
.example-trigger__icon-box--delete { background: rgba(248, 113, 113, 0.12); color: #f87171; }
537+
.example-trigger__icon-box--custom { background: rgba(192, 132, 252, 0.12); color: #c084fc; }
538+
}
471539

472-
.example-flow__branches {
540+
.example-trigger__text {
473541
display: flex;
474-
justify-content: center;
475-
gap: 16px;
476-
position: relative;
542+
flex-direction: column;
543+
gap: 1px;
477544
}
478545

479-
.example-flow__then-badge {
480-
position: absolute;
481-
top: 0;
482-
left: 50%;
483-
transform: translate(-50%, -50%);
484-
z-index: 1;
546+
.example-trigger__title {
547+
font-size: 13px;
548+
font-weight: 600;
549+
color: #0f172a;
485550
}
486551

487-
.example-flow__branches::before {
488-
content: '';
489-
position: absolute;
490-
top: 0;
491-
left: calc((100% - 32px) / 6);
492-
right: calc((100% - 32px) / 6);
493-
border-top: 1px dashed var(--color-accentedPalette-300);
552+
.example-trigger__desc {
553+
font-size: 11px;
554+
color: #64748b;
494555
}
495556

496-
.example-flow__branch {
497-
flex: 1;
557+
@media (prefers-color-scheme: dark) {
558+
.example-trigger__title { color: #e2e8f0; }
559+
.example-trigger__desc { color: #64748b; }
560+
}
561+
562+
/* ── Connector ── */
563+
564+
.example-flow__connector {
498565
display: flex;
499566
flex-direction: column;
500567
align-items: center;
568+
height: 48px;
569+
margin: 4px 0;
501570
}
502571

503-
.example-flow__branch-line {
504-
width: 1px;
505-
height: 28px;
506-
border-left: 1px dashed var(--color-accentedPalette-300);
507-
margin-bottom: 4px;
572+
.example-flow__connector-line {
573+
flex: 1;
574+
border-left: 1px solid #cbd5e1;
508575
}
509576

510-
/* ── Example demo elements ── */
577+
@media (prefers-color-scheme: dark) {
578+
.example-flow__connector-line {
579+
border-color: #2a2f3f;
580+
}
581+
}
511582

512-
.trigger-pill--demo {
513-
pointer-events: none;
514-
cursor: default;
583+
.example-flow__connector-pill {
584+
font-size: 10px;
585+
font-weight: 700;
586+
letter-spacing: 0.05em;
587+
padding: 2px 8px;
588+
border-radius: 4px;
589+
background: #e2e8f0;
590+
color: #64748b;
515591
}
516592

517-
.example-toggle {
518-
pointer-events: none;
593+
@media (prefers-color-scheme: dark) {
594+
.example-flow__connector-pill {
595+
background: #1e2130;
596+
color: #64748b;
597+
}
519598
}
520599

521-
.example-toggle ::ng-deep .mat-button-toggle-button {
522-
background: color-mix(in srgb, var(--color-accentedPalette-500), transparent 88%);
523-
color: var(--color-accentedPalette-500);
524-
border-color: color-mix(in srgb, var(--color-accentedPalette-500), transparent 70%);
600+
/* ── Actions ── */
601+
602+
.example-flow__actions {
603+
display: flex;
604+
gap: 10px;
605+
}
606+
607+
.example-action {
608+
flex: 1;
609+
display: flex;
610+
flex-direction: column;
611+
align-items: center;
612+
gap: 6px;
613+
padding: 14px 8px;
614+
border-radius: 12px;
615+
background: #ffffff;
616+
border: 1px solid #cbd5e1;
525617
}
526618

527619
@media (prefers-color-scheme: dark) {
528-
.example-toggle ::ng-deep .mat-button-toggle-button {
529-
background: color-mix(in srgb, var(--color-accentedPalette-300), transparent 90%);
530-
color: var(--color-accentedPalette-200);
531-
border-color: color-mix(in srgb, var(--color-accentedPalette-300), transparent 60%);
620+
.example-action {
621+
background: #13151a;
622+
border-color: #2a2f3f;
532623
}
533624
}
534625

535-
.example-toggle ::ng-deep .mat-button-toggle-label-content {
626+
.example-action__icon-box {
627+
width: 40px;
628+
height: 40px;
629+
border-radius: 10px;
536630
display: flex;
537631
align-items: center;
538-
gap: 4px;
632+
justify-content: center;
633+
background: #dbeafe;
634+
color: #1d4ed8;
539635
}
540636

541-
.example-toggle mat-icon {
542-
font-size: 18px;
543-
width: 18px;
544-
height: 18px;
637+
@media (prefers-color-scheme: dark) {
638+
.example-action__icon-box {
639+
background: #1e2130;
640+
color: #6b7280;
641+
}
642+
}
643+
644+
.example-action__icon-box mat-icon {
645+
font-size: 20px;
646+
width: 20px;
647+
height: 20px;
648+
}
649+
650+
.example-action__label {
651+
font-size: 12px;
652+
font-weight: 600;
653+
color: #334155;
654+
}
655+
656+
@media (prefers-color-scheme: dark) {
657+
.example-action__label {
658+
color: #6b7280;
659+
}
545660
}
546661

547662

0 commit comments

Comments
 (0)