Skip to content

Commit 5f84702

Browse files
karinakharchenkoclaude
karinakharchenko
and
claude
committed
Redesign automations empty state with visual flow diagram
Replace old example cards with a trigger-to-action flow: WHEN trigger pills with "or" separators, bolt connector, THEN badge at branch intersection, and branching dashed lines to action toggles. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent ded18f4 commit 5f84702

2 files changed

Lines changed: 262 additions & 84 deletions

File tree

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

Lines changed: 200 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -308,79 +308,243 @@
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;
327333
}
328334

329-
.actions-hint__text {
330-
color: rgba(0, 0, 0, 0.64);
335+
.empty-state__icon {
336+
color: var(--color-accentedPalette-500);
337+
font-size: 22px;
338+
width: 22px;
339+
height: 22px;
340+
}
341+
342+
.empty-state__title {
343+
font-size: 20px;
344+
font-weight: 600;
345+
margin: 0 0 6px;
346+
line-height: 1.3;
347+
}
348+
349+
.empty-state__subtitle {
350+
font-size: 14px;
351+
font-weight: 300;
352+
color: rgba(0, 0, 0, 0.56);
353+
margin: 0 0 20px !important;
354+
line-height: 1.5;
331355
}
332356

333357
@media (prefers-color-scheme: dark) {
334-
.actions-hint__text {
335-
color: rgba(255, 255, 255, 0.64);
358+
.empty-state__subtitle {
359+
color: rgba(255, 255, 255, 0.56);
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+
}
368+
369+
.empty-state__docs-link {
370+
display: inline-flex;
371+
align-items: center;
372+
gap: 3px;
373+
font-size: 13px;
374+
color: var(--color-accentedPalette-500);
375+
text-decoration: none;
376+
}
377+
378+
.empty-state__docs-link:hover {
379+
text-decoration: underline;
380+
}
381+
382+
.empty-state__docs-icon {
383+
font-size: 15px;
384+
width: 15px;
385+
height: 15px;
386+
}
387+
388+
/* ── Example flow ── */
389+
390+
.example-flow {
391+
display: flex;
392+
flex-direction: column;
393+
align-items: center;
343394
width: 100%;
395+
max-width: 640px;
344396
}
345397

346-
.rule-example {
398+
.example-flow__card {
347399
display: flex;
348400
flex-direction: column;
349-
align-items: flex-start;
350-
gap: 16px;
351-
border: 1px solid rgba(0, 0, 0, 0.12);
352-
border-radius: 4px;
353-
padding: 16px;
401+
gap: 10px;
402+
padding: 14px 18px;
403+
border: 1px solid rgba(0, 0, 0, 0.08);
404+
border-radius: 8px;
405+
width: 100%;
406+
box-sizing: border-box;
354407
}
355408

356409
@media (prefers-color-scheme: dark) {
357-
.rule-example {
358-
border-color: rgba(255, 255, 255, 0.12);
359-
background-color: var(--surface-dark-color);
410+
.example-flow__card {
411+
border-color: rgba(255, 255, 255, 0.08);
412+
background: rgba(255, 255, 255, 0.02);
360413
}
361414
}
362415

363-
.rule-example__row {
416+
.example-flow__card-label {
417+
font-size: 13px;
418+
font-weight: 500;
419+
color: rgba(0, 0, 0, 0.5);
364420
display: flex;
365421
align-items: center;
366-
gap: 24px;
367422
}
368423

369-
.rule-example__value {
424+
@media (prefers-color-scheme: dark) {
425+
.example-flow__card-label {
426+
color: rgba(255, 255, 255, 0.5);
427+
}
428+
}
429+
430+
.example-flow__card-label .step-label__badge {
431+
font-size: 0.8em;
432+
padding: 1px 5px;
433+
}
434+
435+
.example-flow__card-items {
370436
display: flex;
371437
align-items: center;
372-
background-color: rgba(0, 0, 0, 0.04);
373-
color: rgba(0, 0, 0, 0.64);
374-
padding: 8px 16px;
438+
gap: 8px;
439+
flex-wrap: nowrap;
440+
}
441+
442+
.example-flow__arrow {
443+
display: flex;
444+
flex-direction: column;
445+
align-items: center;
446+
height: 40px;
447+
gap: 2px;
448+
}
449+
450+
.example-flow__arrow::before,
451+
.example-flow__arrow::after {
452+
content: '';
453+
flex: 1;
454+
border-left: 1px dashed var(--color-accentedPalette-300);
455+
}
456+
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;
463+
}
464+
465+
.example-flow__arrow .step-label__badge {
466+
font-size: 0.8em;
467+
padding: 1px 5px;
468+
}
469+
470+
/* ── Branches ── */
471+
472+
.example-flow__branches {
473+
display: flex;
474+
justify-content: center;
475+
gap: 16px;
476+
position: relative;
477+
}
478+
479+
.example-flow__then-badge {
480+
position: absolute;
481+
top: 0;
482+
left: 50%;
483+
transform: translate(-50%, -50%);
484+
z-index: 1;
485+
}
486+
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);
494+
}
495+
496+
.example-flow__branch {
497+
flex: 1;
498+
display: flex;
499+
flex-direction: column;
500+
align-items: center;
501+
}
502+
503+
.example-flow__branch-line {
504+
width: 1px;
505+
height: 28px;
506+
border-left: 1px dashed var(--color-accentedPalette-300);
507+
margin-bottom: 4px;
508+
}
509+
510+
/* ── Example demo elements ── */
511+
512+
.trigger-pill--demo {
513+
pointer-events: none;
514+
cursor: default;
515+
}
516+
517+
.example-toggle {
518+
pointer-events: none;
519+
}
520+
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%);
375525
}
376526

377527
@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);
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%);
381532
}
382533
}
383534

535+
.example-toggle ::ng-deep .mat-button-toggle-label-content {
536+
display: flex;
537+
align-items: center;
538+
gap: 4px;
539+
}
540+
541+
.example-toggle mat-icon {
542+
font-size: 18px;
543+
width: 18px;
544+
height: 18px;
545+
}
546+
547+
384548
/* ── Creation flow ── */
385549

386550
.creation-flow {
@@ -677,7 +841,7 @@
677841

678842
.trigger-pill--custom.trigger-pill--active {
679843
border-color: #c084fc;
680-
background: #150820;
844+
background: color-mix(in srgb, #c084fc, transparent 90%);
681845
box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.25), 0 0 12px rgba(192, 132, 252, 0.08);
682846
}
683847

0 commit comments

Comments
 (0)