From 60f4c9f5b3f2dd3676ad56f7da6148e99d36ac96 Mon Sep 17 00:00:00 2001
From: Peter Steinberger <steipete@gmail.com>
Date: Sat, 6 Dec 2025 00:52:22 +0100
Subject: [PATCH] mac: tighten onboarding card layout

---
 apps/macos/Sources/Clawdis/AppMain.swift | 41 ++++++++++++++----------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/apps/macos/Sources/Clawdis/AppMain.swift b/apps/macos/Sources/Clawdis/AppMain.swift
index 2a7c9f583..6cbcddeef 100644
--- a/apps/macos/Sources/Clawdis/AppMain.swift
+++ b/apps/macos/Sources/Clawdis/AppMain.swift
@@ -1173,13 +1173,13 @@ struct OnboardingView: View {
 
     var body: some View {
         let step = steps[stepIndex]
-        VStack(spacing: 18) {
+        VStack(spacing: 16) {
             heroCard(step: step)
             contentPanel(step: step)
             progressDots
             footerButtons
         }
-        .padding(18)
+        .padding(16)
         .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
         .background(Color(NSColor.windowBackgroundColor))
         .task { await refreshPerms() }
@@ -1187,13 +1187,15 @@ struct OnboardingView: View {
 
     @ViewBuilder
     private func heroCard(step: OnboardingStep) -> some View {
-        HStack(alignment: .center, spacing: 14) {
-            Image(systemName: step.systemImage)
-                .font(.title3.bold())
-                .foregroundStyle(.white)
-                .padding(10)
-                .background(.white.opacity(0.12))
-                .clipShape(Circle())
+        HStack(alignment: .center, spacing: 12) {
+            ZStack {
+                Circle()
+                    .fill(Color.white.opacity(0.15))
+                    .frame(width: 38, height: 38)
+                Image(systemName: step.systemImage)
+                    .font(.headline.weight(.bold))
+                    .foregroundStyle(.white)
+            }
             VStack(alignment: .leading, spacing: 6) {
                 Text(step.title)
                     .font(.title3.bold())
@@ -1205,12 +1207,12 @@ struct OnboardingView: View {
             Spacer()
         }
         .padding(.horizontal, 18)
-        .padding(.vertical, 14)
+        .padding(.vertical, 16)
         .background(
             LinearGradient(colors: [Color.blue.opacity(0.9), Color.purple.opacity(0.85)], startPoint: .topLeading, endPoint: .bottomTrailing)
                 .clipShape(RoundedRectangle(cornerRadius: 18, style: .continuous))
         )
-        .shadow(color: .black.opacity(0.18), radius: 10, y: 4)
+        .shadow(color: .black.opacity(0.18), radius: 12, y: 5)
     }
 
     @ViewBuilder
@@ -1226,9 +1228,13 @@ struct OnboardingView: View {
                 }
             }
         }
-        .padding(18)
+        .padding(16)
         .frame(maxWidth: .infinity, alignment: .leading)
-        .background(RoundedRectangle(cornerRadius: 16, style: .continuous).fill(Color(NSColor.controlBackgroundColor)))
+        .background(
+            RoundedRectangle(cornerRadius: 16, style: .continuous)
+                .fill(Color(NSColor.controlBackgroundColor))
+                .shadow(color: .black.opacity(0.06), radius: 8, y: 3)
+        )
     }
 
     private var loginCard: some View {
@@ -1268,28 +1274,29 @@ struct OnboardingView: View {
 
     private var progressDots: some View {
         HStack(spacing: 8) {
+            Spacer()
             ForEach(Array(steps.indices), id: \.self) { idx in
                 Circle()
-                    .fill(idx == stepIndex ? Color.accentColor : Color.gray.opacity(0.4))
+                    .fill(idx == stepIndex ? Color.accentColor : Color.gray.opacity(0.35))
                     .frame(width: 8, height: 8)
-                    .scaleEffect(idx == stepIndex ? 1.25 : 1.0)
+                    .scaleEffect(idx == stepIndex ? 1.2 : 1.0)
                     .animation(.spring(response: 0.35, dampingFraction: 0.7), value: stepIndex)
             }
             Spacer()
         }
-        .padding(.horizontal, 4)
     }
 
     private var footerButtons: some View {
         HStack {
             Button("Skip") { finish() }
-                .buttonStyle(.plain)
+                .buttonStyle(.bordered)
             Spacer()
             if stepIndex > 0 {
                 Button("Back") { stepIndex = max(0, stepIndex - 1) }
             }
             Button(stepIndex == steps.count - 1 ? "Finish" : "Next") { advance() }
                 .buttonStyle(.borderedProminent)
+                .keyboardShortcut(.return, modifiers: [])
         }
         .padding(.top, 4)
     }