live activity: centre content vertically + darken pump circle

A GeometryReader hands its content the full proposed frame and pins it
top-left, so the Lock Screen card sat high instead of vertically centred
when the activity container offered extra height. Wrap the branch in
.frame(maxWidth:.infinity, maxHeight:.infinity, alignment:.center).

Also darken the pump circle to 82% of the raw fuel tint (mix 18% black) so
the white pump symbol keeps contrast against bright Lock Screen/card, esp.
for the light yellow premium / cyan diesel palette colours.
This commit is contained in:
FuelBoard Contributor
2026-08-19 22:26:37 +01:00
parent 2c6e63f6b1
commit bdfbbc605f
@@ -73,6 +73,14 @@ 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)
}
var body: some View {
Link(destination: context.state.mapsURL) {
GeometryReader { geo in
@@ -80,12 +88,19 @@ private struct FuelBoardLiveActivityView: View {
// full Lock Screen width (>= threshold) rich card, no matter
// how long the station name is. Truly small slots (CarPlay /
// Watch) offer much less compact strip.
Group {
if geo.size.width >= compactWidthThreshold {
richBody
} else {
compactBody
}
}
// A GeometryReader hands its content the FULL proposed frame
// (content is otherwise pinned top-left), so centre the card
// within that space keeps the Lock Screen content vertically
// aligned instead of sitting high.
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
}
}
}
@@ -95,7 +110,7 @@ private struct FuelBoardLiveActivityView: View {
// LEFT station brand glyph
Image(systemName: "fuelpump.circle.fill")
.font(.system(size: 32))
.foregroundStyle(context.state.fuel.tintColor, .white)
.foregroundStyle(pumpCircleColor, .white)
.frame(width: 40, height: 40)
// MIDDLE fuel + station