live activity: explicit badge (dark circle + bright pump); fix alignment look
fuelpump.circle.fill's first hierarchical style hits the PUMP, not the circle, so the earlier darkened colour landed on the pump and the circle stayed white (user: 'I didn't want the fuel pump darker I wanted the white circle darker'). Rebuild the brand glyph from two explicit shapes: a light-grey (.86) Circle badge + a bright fuel-tinted fuelpump.fill, so circle vs pump colours are unambiguous and the badge centres cleanly with the two-line text block. Add a DEBUG-only -qaLiveActivity <fuel> launch hook that starts a Live Activity with a long station name so the Lock Screen can be rendered in the Simulator and verified by pixels (pump bright green 43,193,81; badge grey 202,201,202).
This commit is contained in:
@@ -73,12 +73,13 @@ private struct FuelBoardLiveActivityView: View {
|
||||
/// "ideal" width past the iPhone Lock Screen and collapses the full card).
|
||||
private let compactWidthThreshold: CGFloat = 280
|
||||
|
||||
/// Slightly darkened fuel tint for the pump circle so the white pump
|
||||
/// symbol keeps contrast against the bright Lock Screen / card background
|
||||
/// (the raw palette colours like yellow #FFD60A are too light to sit under
|
||||
/// a white glyph).
|
||||
private var pumpCircleColor: Color {
|
||||
context.state.fuel.tintColor.mix(with: .black, by: 0.18)
|
||||
/// The badge circle behind the pump. The user calls this "the white
|
||||
/// circle" and wants it slightly darkened for contrast against the bright
|
||||
/// fuel pump. Built as an explicit grey disc (the light-grey "white circle
|
||||
/// darker") — NOT part of the SF Symbol glyph, so it can never swallow the
|
||||
/// darkened colour the way `fuelpump.circle.fill` did.
|
||||
private var badgeCircleColor: Color {
|
||||
Color(white: 0.86)
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
@@ -107,11 +108,20 @@ private struct FuelBoardLiveActivityView: View {
|
||||
/// Full three-column design (unchanged): brand glyph · fuel+station · price.
|
||||
private var richBody: some View {
|
||||
HStack(spacing: 12) {
|
||||
// LEFT — station brand glyph
|
||||
Image(systemName: "fuelpump.circle.fill")
|
||||
.font(.system(size: 32))
|
||||
.foregroundStyle(pumpCircleColor, .white)
|
||||
.frame(width: 40, height: 40)
|
||||
// LEFT — station brand badge: an explicit darkened circle with a
|
||||
// bright fuel-tinted pump. Built from two shapes so the circle
|
||||
// colour and pump colour are unambiguous (the myth that
|
||||
// fuelpump.circle.fill's first style is the circle is what put the
|
||||
// darkened colour on the pump).
|
||||
ZStack {
|
||||
Circle()
|
||||
.fill(badgeCircleColor)
|
||||
.frame(width: 40, height: 40)
|
||||
Image(systemName: "fuelpump.fill")
|
||||
.font(.system(size: 19, weight: .semibold))
|
||||
.foregroundStyle(context.state.fuel.tintColor)
|
||||
}
|
||||
.frame(width: 40, height: 40)
|
||||
|
||||
// MIDDLE — fuel + station
|
||||
VStack(alignment: .leading, spacing: 2) {
|
||||
|
||||
Reference in New Issue
Block a user