Merge pull request #229 from pathsim/feature/confirmation-modal-buttons

confirmation modal buttons

Author: milanofthe

src/lib/components/ConfirmationModal.svelte

@@ -65,22 +65,26 @@
 				<p id="confirmation-message">{state.options.message}</p>
 			</div>
 
-			<div class="dialog-footer">
+			<div class="dialog-actions">
 				<button class="ghost" onclick={handleCancel}>
 					{state.options.cancelText}
 				</button>
 				<button onclick={handleConfirm}>
 					{state.options.confirmText}
 				</button>
 			</div>
+
+			<div class="dialog-footer">
+				Press <kbd>↵</kbd> to confirm
+			</div>
 		</div>
 	</div>
 {/if}
 
 <style>
 	.confirmation-dialog {
 		width: 90%;
-		max-width: 400px;
+		max-width: 320px;
 		display: flex;
 		flex-direction: column;
 		overflow: hidden;
@@ -97,10 +101,63 @@
 		line-height: 1.5;
 	}
 
-	.dialog-footer {
+	.dialog-actions {
 		display: flex;
-		justify-content: flex-end;
+		justify-content: center;
 		gap: var(--space-sm);
-		padding: var(--space-sm) var(--space-md) var(--space-md);
+		padding: var(--space-sm) var(--space-md);
+	}
+
+	.dialog-actions button {
+		padding: var(--space-sm) var(--space-md);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-md);
+		font-size: 11px;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all var(--transition-fast);
+	}
+
+	.dialog-actions button.ghost {
+		background: transparent;
+		color: var(--text-muted);
+	}
+
+	.dialog-actions button.ghost:hover {
+		background: var(--surface-hover);
+		color: var(--text);
+		border-color: var(--border-focus);
+	}
+
+	.dialog-actions button:not(.ghost) {
+		background: var(--surface-raised);
+		color: var(--text);
+	}
+
+	.dialog-actions button:not(.ghost):hover {
+		background: var(--surface-hover);
+		border-color: var(--border-focus);
+	}
+
+	.dialog-footer {
+		padding: var(--space-xs) var(--space-md);
+		background: var(--surface-raised);
+		border-top: 1px solid var(--border);
+		border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+		font-size: 10px;
+		color: var(--text-disabled);
+		text-align: center;
+	}
+
+	.dialog-footer kbd {
+		display: inline-block;
+		padding: 1px 4px;
+		font-family: inherit;
+		font-size: 9px;
+		background: var(--surface);
+		border: 1px solid var(--border);
+		border-radius: 3px;
+		color: var(--text-muted);
+		margin: 0 2px;
 	}
 </style>