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/WatchApp/Design/ButtonStyles.swift

@@ -3,55 +3,105 @@ import SwiftUI
 struct PrimaryActionStyle: ButtonStyle {
     func makeBody(configuration: Configuration) -> some View {
         configuration.label
-            .font(.headline)
+            .font(.footnote.weight(.semibold))
             .frame(maxWidth: .infinity)
             .padding(.horizontal, 12)
-            .padding(.vertical, 12)
+            .padding(.vertical, 10)
+            .foregroundStyle(Color.idpPrimaryForeground)
             .background(
                 RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
-                    .fill(IdP.tint)
+                    .fill(Color.idpPrimary)
             )
-            .foregroundStyle(.white)
-            .opacity(configuration.isPressed ? 0.92 : 1)
+            .opacity(configuration.isPressed ? 0.85 : 1)
     }
 }
 
 struct SecondaryActionStyle: ButtonStyle {
     func makeBody(configuration: Configuration) -> some View {
         configuration.label
-            .font(.headline)
+            .font(.footnote.weight(.semibold))
             .frame(maxWidth: .infinity)
             .padding(.horizontal, 12)
-            .padding(.vertical, 12)
+            .padding(.vertical, 10)
+            .foregroundStyle(.white)
             .background(
                 RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
-                    .fill(Color.idpSecondaryGroupedBackground)
+                    .fill(Color.clear)
             )
             .overlay(
                 RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
-                    .stroke(Color.idpSeparator, lineWidth: 1)
+                    .stroke(Color.white.opacity(0.22), lineWidth: 1)
             )
-            .foregroundStyle(.white)
-            .opacity(configuration.isPressed ? 0.92 : 1)
+            .opacity(configuration.isPressed ? 0.7 : 1)
     }
 }
 
 struct DestructiveStyle: ButtonStyle {
     func makeBody(configuration: Configuration) -> some View {
         configuration.label
-            .font(.headline)
+            .font(.footnote.weight(.semibold))
             .frame(maxWidth: .infinity)
             .padding(.horizontal, 12)
-            .padding(.vertical, 12)
+            .padding(.vertical, 10)
+            .foregroundStyle(.white)
             .background(
                 RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
-                    .fill(Color.red.opacity(0.18))
+                    .fill(Color.idpDestructive)
             )
-            .overlay(
-                RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
-                    .stroke(Color.red.opacity(0.25), lineWidth: 1)
-            )
-            .foregroundStyle(.red)
-            .opacity(configuration.isPressed ? 0.92 : 1)
+            .opacity(configuration.isPressed ? 0.85 : 1)
+    }
+}
+
+struct WatchBadge: View {
+    enum Tone {
+        case neutral
+        case accent
+        case ok
+        case warn
+        case danger
+    }
+
+    let title: String
+    var tone: Tone = .neutral
+
+    var body: some View {
+        Text(title)
+            .font(.system(size: 9, weight: .bold))
+            .tracking(0.5)
+            .foregroundStyle(foreground)
+            .padding(.horizontal, 6)
+            .padding(.vertical, 2)
+            .background(background, in: Capsule(style: .continuous))
+            .overlay(
+                Capsule(style: .continuous)
+                    .stroke(stroke, lineWidth: 1)
+            )
+    }
+
+    private var foreground: Color {
+        switch tone {
+        case .neutral: return Color.idpMutedForeground
+        case .accent: return IdP.tint
+        case .ok: return Color.idpOK
+        case .warn: return Color.idpWarn
+        case .danger: return Color.idpDestructive
+        }
+    }
+
+    private var background: Color {
+        switch tone {
+        case .neutral: return Color.white.opacity(0.05)
+        default: return .clear
+        }
+    }
+
+    private var stroke: Color {
+        switch tone {
+        case .accent: return IdP.tint.opacity(0.45)
+        case .ok: return Color.idpOK.opacity(0.45)
+        case .warn: return Color.idpWarn.opacity(0.45)
+        case .danger: return Color.idpDestructive.opacity(0.55)
+        case .neutral: return .clear
+        }
     }
 }

swift/WatchApp/Design/Cards.swift

@@ -5,14 +5,15 @@ struct ApprovalCardModifier: ViewModifier {
 
     func body(content: Content) -> some View {
         content
-            .padding(14)
+            .padding(8)
             .background(
                 RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
-                    .fill(Color.idpSecondaryGroupedBackground)
+                    .fill(Color.clear)
             )
             .overlay(
                 RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
-                    .stroke(highlighted ? IdP.tint.opacity(0.75) : Color.idpSeparator, lineWidth: highlighted ? 1.5 : 1)
+                    .stroke(highlighted ? IdP.tint.opacity(0.55) : Color.white.opacity(0.12),
+                            lineWidth: 1)
             )
     }
 }
@@ -28,38 +29,75 @@ struct RequestHeroCard: View {
     let handle: String
 
     var body: some View {
-        HStack(spacing: 12) {
-            MonogramAvatar(title: request.source, size: 40)
-
-            VStack(alignment: .leading, spacing: 4) {
+        VStack(alignment: .leading, spacing: 6) {
+            HStack(spacing: 5) {
+                MonogramAvatar(title: request.source, size: 18)
                 Text(request.source)
-                    .font(.headline)
+                    .font(.system(size: 11, weight: .medium))
+                    .foregroundStyle(Color.idpMutedForeground)
+                    .lineLimit(1)
+            }
+
+            HStack(spacing: 4) {
+                Text("Sign in as")
                     .foregroundStyle(.white)
                 Text(handle)
-                    .font(.footnote)
                     .foregroundStyle(IdP.tint)
+                    .fontWeight(.semibold)
+                Text("?")
+                    .foregroundStyle(.white)
             }
+            .font(.system(size: 15, weight: .semibold))
+            .lineLimit(2)
         }
-        .approvalCard(highlighted: true)
+        .frame(maxWidth: .infinity, alignment: .leading)
     }
 }
 
 struct MonogramAvatar: View {
     let title: String
-    var size: CGFloat = 22
+    var size: CGFloat = 20
+    var tint: Color = IdP.tint
 
     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 {
-        RoundedRectangle(cornerRadius: size * 0.34, style: .continuous)
-            .fill(IdP.tint.opacity(0.2))
-            .frame(width: size, height: size)
-            .overlay {
-                Text(monogram)
-                    .font(.system(size: size * 0.48, weight: .semibold, design: .rounded))
-                    .foregroundStyle(IdP.tint)
-            }
+        ZStack {
+            RoundedRectangle(cornerRadius: 5, style: .continuous)
+                .fill(tint)
+            Text(monogram)
+                .font(.system(size: size * (monogram.count > 1 ? 0.36 : 0.44),
+                              weight: .bold))
+                .foregroundStyle(.white)
+                .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
     }
 }

swift/WatchApp/Design/IdPTokens.swift

@@ -1,15 +1,25 @@
 import SwiftUI
 
 public enum IdP {
-    public static let tint = Color("IdPTint")
-    public static let cardRadius: CGFloat = 20
-    public static let controlRadius: CGFloat = 14
-    public static let badgeRadius: CGFloat = 8
+    // Direct value — watch target has no Assets.xcassets so `Color("IdPTint")`
+    // would fall back to a transparent color and hide tinted text.
+    public static let tint = Color(red: 0.561, green: 0.486, blue: 0.961)
+    public static let cardRadius: CGFloat = 8
+    public static let controlRadius: CGFloat = 8
+    public static let badgeRadius: CGFloat = 999
 }
 
 extension Color {
+    // Shadcn on watch = pure black bg, subtle white dividers, white primary for inverted CTA.
     static var idpGroupedBackground: Color { .black }
-    static var idpSecondaryGroupedBackground: Color { Color.white.opacity(0.08) }
-    static var idpTertiaryFill: Color { Color.white.opacity(0.12) }
+    static var idpSecondaryGroupedBackground: Color { Color.white.opacity(0.06) }
+    static var idpTertiaryFill: Color { Color.white.opacity(0.10) }
     static var idpSeparator: Color { Color.white.opacity(0.14) }
+    static var idpBorder: Color { Color.white.opacity(0.12) }
+    static var idpMutedForeground: Color { Color.white.opacity(0.55) }
+    static var idpPrimary: Color { Color(red: 0.980, green: 0.980, blue: 0.980) }
+    static var idpPrimaryForeground: Color { Color(red: 0.094, green: 0.094, blue: 0.106) }
+    static var idpOK: Color { Color(red: 0.086, green: 0.639, blue: 0.290) }
+    static var idpWarn: Color { Color(red: 0.918, green: 0.702, blue: 0.031) }
+    static var idpDestructive: Color { Color(red: 0.498, green: 0.114, blue: 0.114) }
 }