diff --git a/web/src/components/shared/ConfirmDialog.vue b/web/src/components/shared/ConfirmDialog.vue index 86da43c..5d97c51 100644 --- a/web/src/components/shared/ConfirmDialog.vue +++ b/web/src/components/shared/ConfirmDialog.vue @@ -321,6 +321,60 @@ function handleCancel() { max-height: min(420px, calc(100dvh - 292px)); } +.shared-confirm-card--approval { + width: min(460px, calc(100vw - 40px)); + gap: 10px; + padding: 18px 20px; + border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14); + border-radius: 6px; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.98)); + box-shadow: + 0 18px 40px rgba(15, 23, 42, 0.15), + 0 1px 0 rgba(255, 255, 255, 0.88) inset; +} + +.shared-confirm-card--approval .shared-confirm-badge { + min-height: 24px; + padding: 0 9px; + font-size: 11px; + font-weight: 850; +} + +.shared-confirm-card--approval h4 { + font-size: 20px; + line-height: 1.38; + font-weight: 850; +} + +.shared-confirm-card--approval p { + max-width: 34em; + color: #64748b; + font-size: 13px; + line-height: 1.6; +} + +.shared-confirm-card--approval .shared-confirm-body { + gap: 8px; + max-height: min(270px, calc(100dvh - 238px)); +} + +.shared-confirm-card--approval .shared-confirm-actions { + gap: 8px; + padding-top: 2px; +} + +.shared-confirm-card--approval .shared-confirm-btn { + min-width: 118px; + min-height: 38px; + border-radius: 6px; + font-size: 13px; +} + +.shared-confirm-card--approval .shared-confirm-btn.confirm.primary { + box-shadow: 0 10px 20px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18); +} + .shared-confirm-card--destructive { width: min(420px, calc(100vw - 40px)); gap: 12px; diff --git a/web/src/components/shared/TableLoadingState.vue b/web/src/components/shared/TableLoadingState.vue index 95a69c8..82da0e2 100644 --- a/web/src/components/shared/TableLoadingState.vue +++ b/web/src/components/shared/TableLoadingState.vue @@ -8,14 +8,13 @@ :aria-label="ariaLabel" aria-live="polite" > - +
+ +
+ {{ title }} +

{{ message }}

+
+
@@ -23,8 +22,6 @@