From aaabe9a02d231e7922903db37205e4cb4001cfa7 Mon Sep 17 00:00:00 2001 From: Brandon McAnsh Date: Tue, 8 Sep 2026 19:43:05 -0400 Subject: [PATCH] fix(transactions): draw View in Chat as a card, not the primary action MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The button used `.filled` — solid white on black text, the style reserved for a screen's primary action. Figma node 9708:118123 fills it with rgba(255,255,255,0.05) and white text, the same tint the receipt and ID cards above it already carry, so it reads as a fourth card in the stack rather than the loudest thing on the screen. Android draws it the same way, via `ButtonState.Filled10`. Adds `.filled05` alongside the existing `.filled20`, and drops the button's extra 4pt top padding: that gap held a prominent button off the cards, and a card-shaped button belongs on the stack's own 16pt spacing. Android's `Filled10` is white at 10%, where Figma is 5%. This follows Figma, which is also what `Color.backgroundRow` and the adjacent cards use; the Android side is filed separately. --- .../Screens/Main/Home/TransactionDetailsScreen.swift | 3 +-- .../Views/ButtonStyles/FilledButtonStyle.swift | 12 ++++++++++++ 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/Flipcash/Core/Screens/Main/Home/TransactionDetailsScreen.swift b/Flipcash/Core/Screens/Main/Home/TransactionDetailsScreen.swift index 986c51f83..1f20daeb5 100644 --- a/Flipcash/Core/Screens/Main/Home/TransactionDetailsScreen.swift +++ b/Flipcash/Core/Screens/Main/Home/TransactionDetailsScreen.swift @@ -71,8 +71,7 @@ struct TransactionDetailsScreen: View { // here. router.push(.tipConversationForUser(userID)) } - .buttonStyle(.filled) - .padding(.top, 4) + .buttonStyle(.filled05) } } .padding(.horizontal, 20) diff --git a/FlipcashUI/Sources/FlipcashUI/Views/ButtonStyles/FilledButtonStyle.swift b/FlipcashUI/Sources/FlipcashUI/Views/ButtonStyles/FilledButtonStyle.swift index 14c24cdea..a40c415f5 100644 --- a/FlipcashUI/Sources/FlipcashUI/Views/ButtonStyles/FilledButtonStyle.swift +++ b/FlipcashUI/Sources/FlipcashUI/Views/ButtonStyles/FilledButtonStyle.swift @@ -95,6 +95,18 @@ extension ButtonStyle where Self == FilledButtonStyle { ) } + /// A full-width filled button at 5% action color opacity — the same tint the + /// row and card surfaces carry, for an action that reads as one of them. + public static var filled05: FilledButtonStyle { + .init( + textColor: .textMain, + textDisabledColor: .textMain.opacity(0.2), + overlayColor: .action.opacity(0.05), + overlayDisabledColor: .action.opacity(0.05), + isCompact: false + ) + } + /// A full-width filled button at 20% action color opacity (compact variant). public static var filled20Compact: FilledButtonStyle { .init(