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:
@@ -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,11 +88,18 @@ 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.
|
||||
if geo.size.width >= compactWidthThreshold {
|
||||
richBody
|
||||
} else {
|
||||
compactBody
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user