Refine inbox and watch approval presentation

Tighten the inbox, detail, and watch layouts so approval actions feel denser and more direct across compact surfaces.

swift/Sources/Core/Design/Cards.swift

@@ -5,22 +5,22 @@ struct ApprovalCardModifier: ViewModifier {
 
     func body(content: Content) -> some View {
         content
-            .padding(18)
+            .padding(14)
             .background(
                 RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
-                    .fill(Color.idpSecondaryGroupedBackground)
+                    .fill(Color.idpCard)
             )
             .overlay(
                 RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
-                    .stroke(highlighted ? IdP.tint.opacity(0.7) : Color.idpSeparator.opacity(0.55), lineWidth: highlighted ? 1.5 : 1)
+                    .stroke(highlighted ? IdP.tint : Color.idpBorder, lineWidth: 1)
+            )
+            .background(
+                highlighted
+                    ? RoundedRectangle(cornerRadius: IdP.cardRadius + 3, style: .continuous)
+                        .fill(IdP.tint.opacity(0.10))
+                        .padding(-3)
+                    : nil
             )
-            .overlay {
-                if highlighted {
-                    RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
-                        .stroke(IdP.tint.opacity(0.12), lineWidth: 6)
-                        .padding(-2)
-                }
-            }
     }
 }
 
@@ -39,27 +39,35 @@ struct RequestHeroCard: View {
     let handle: String
 
     var body: some View {
-        HStack(alignment: .top, spacing: 16) {
-            MonogramAvatar(title: request.source, size: 64)
+        VStack(spacing: 12) {
+            MonogramAvatar(
+                title: request.source,
+                size: 52,
+                tint: BrandTint.color(for: request.source),
+                filled: true
+            )
 
-            VStack(alignment: .leading, spacing: 8) {
-                Text("\(request.source) wants to sign in as you")
-                    .font(.title3.weight(.semibold))
+            VStack(spacing: 4) {
+                Text("\(request.source) wants to sign in")
+                    .font(.title3.weight(.bold))
+                    .multilineTextAlignment(.center)
                     .fixedSize(horizontal: false, vertical: true)
 
-                Text("Continue as \(Text(handle).foregroundStyle(IdP.tint))")
-                    .font(.subheadline)
-                    .foregroundStyle(.secondary)
-
-                HStack(spacing: 8) {
-                    Label(request.kind.title, systemImage: request.kind.systemImage)
+                HStack(spacing: 4) {
+                    Text("requesting")
+                    Text(handle)
+                        .foregroundStyle(IdP.tint)
+                        .fontWeight(.semibold)
+                    Text("·")
                     Text(request.createdAt, style: .relative)
                 }
-                .font(.caption.weight(.medium))
-                .foregroundStyle(.secondary)
+                .font(.footnote)
+                .foregroundStyle(Color.idpMutedForeground)
             }
         }
-        .approvalCard(highlighted: true)
+        .frame(maxWidth: .infinity)
+        .padding(.vertical, 6)
+        .approvalCard(highlighted: false)
     }
 }
 
@@ -67,34 +75,58 @@ struct MonogramAvatar: View {
     let title: String
     var size: CGFloat = 40
     var tint: Color = IdP.tint
+    /// Shadcn-style filled tile (brand color bg, white text).
+    /// When false, renders the legacy tinted-pastel avatar.
+    var filled: Bool = true
 
     private var monogram: String {
-        String(title.trimmingCharacters(in: .whitespacesAndNewlines).first ?? "I").uppercased()
+        let letters = title
+            .replacingOccurrences(of: "auth.", with: "")
+            .split { !$0.isLetter && !$0.isNumber }
+            .prefix(2)
+            .compactMap { $0.first }
+        let glyph = String(letters.map(Character.init))
+        return glyph.isEmpty ? "I" : glyph.uppercased()
     }
 
     var body: some View {
         ZStack {
-            RoundedRectangle(cornerRadius: size * 0.34, style: .continuous)
-                .fill(tint.opacity(0.14))
-
-            Image("AppMonogram")
-                .resizable()
-                .scaledToFit()
-                .frame(width: size * 0.44, height: size * 0.44)
-                .opacity(0.18)
+            RoundedRectangle(cornerRadius: 8, style: .continuous)
+                .fill(filled ? tint : tint.opacity(0.14))
 
             Text(monogram)
-                .font(.system(size: size * 0.42, weight: .semibold, design: .rounded))
-                .foregroundStyle(tint)
+                .font(.system(size: size * (monogram.count > 1 ? 0.36 : 0.44),
+                              weight: .bold,
+                              design: .default))
+                .foregroundStyle(filled ? .white : tint)
+                .tracking(-0.3)
         }
         .frame(width: size, height: size)
         .accessibilityHidden(true)
     }
 }
 
+enum BrandTint {
+    static func color(for host: String) -> Color {
+        let key = host.lowercased()
+        if key.contains("github") { return Color(red: 0.14, green: 0.16, blue: 0.18) }
+        if key.contains("lufthansa") { return Color(red: 0.02, green: 0.09, blue: 0.30) }
+        if key.contains("hetzner") { return Color(red: 0.84, green: 0.05, blue: 0.18) }
+        if key.contains("notion") { return Color(red: 0.12, green: 0.12, blue: 0.12) }
+        if key.contains("apple") { return Color(red: 0.18, green: 0.18, blue: 0.22) }
+        if key.contains("reddit") { return Color(red: 1.00, green: 0.27, blue: 0.00) }
+        if key.contains("cli") { return Color(red: 0.24, green: 0.26, blue: 0.32) }
+        if key.contains("workspace") { return Color(red: 0.26, green: 0.38, blue: 0.88) }
+        if key.contains("foss") || key.contains("berlin-mbp") {
+            return Color(red: 0.12, green: 0.45, blue: 0.70)
+        }
+        return IdP.tint
+    }
+}
+
 struct DeviceRowStyle: ViewModifier {
     func body(content: Content) -> some View {
         content
-            .padding(.vertical, 4)
+            .padding(.vertical, 2)
     }
 }