Refine the station listing: muted verdict capsules, three-line names
The listing's verdict capsule now carries white text on muted semantic fills instead of the neutral secondary tint: Saves #45825E, Costs #A9635B, Break even #707070, Closest #58789D. Fixed tones, not translucent tints, because white text on a 15% tint over a white row measures ~1.8:1. Each tone sits at a relative luminance of ~0.18 — the band where white clears 4.5:1 AND the pill still separates ~3:1 from both a white row and the dark card fill — so one value each works in light and dark without a dynamic colour. The saturated palette colours cannot carry white text at all: systemGreen measures 2.2:1, systemRed 3.6:1. "Save" becomes "Saves", matching the detail sheet and reading as a statement of the outcome; amounts, symbols, padding, radius and the shape-follows-line-count rule are unchanged. Saves and Costs share an 84pt minimum width so their trailing edges line up down the list. The price and its capsule are now one vertically grouped element (5pt), with the badge keeping the column's full 12pt above, so the row no longer reads as three equal lines. Station names cap at three lines with a tail ellipsis: unbounded wrap let one very long forecourt name set the height of the whole row. 59 of the 8,073 names in the dump exceed three lines and now ellipsise; the full name is always in Station Details. Addresses still wrap freely. The baseline pill moves onto ListingFuelSavingsCapsule so the listing shows the same soft blue and white text as its siblings, leaving FuelSavingsCapsule to the detail sheet, which it now alone uses. Badges keep their tinted styling: they annotate a price rather than report an outcome. Verified: 261/261 swift test; Debug simulator and Release device builds; all four fills and their white text measured from simulator pixels in both appearances, and the detail sheet's .blue absent from the listing entirely.
This commit is contained in:
@@ -34,9 +34,9 @@ final class FuelSavingsEstimateTests: XCTestCase {
|
||||
// The figure takes its own line, so the capsule's shape is decided by the
|
||||
// data rather than by how much width the price column hands it.
|
||||
XCTAssertEqual(result(.worthTheDrive, .confirmed).listingVerdict().lines,
|
||||
["Save", "£12.50"])
|
||||
["Saves", "£12.50"])
|
||||
XCTAssertEqual(result(.worthTheDrive, .estimated).listingVerdict().lines,
|
||||
["Save", "£12.50", "(approx.)"])
|
||||
["Saves", "£12.50", "(approx.)"])
|
||||
XCTAssertEqual(result(.notWorthTheDrive, .confirmed).listingVerdict().lines,
|
||||
["Costs", "£123.45 more"])
|
||||
XCTAssertEqual(result(.notWorthTheDrive, .estimated).listingVerdict().lines,
|
||||
@@ -57,7 +57,7 @@ final class FuelSavingsEstimateTests: XCTestCase {
|
||||
|
||||
// VoiceOver keeps a single line: a drawn break is a spoken pause.
|
||||
XCTAssertEqual(result(.worthTheDrive, .estimated).listingCapsuleHeadline(),
|
||||
"Save £12.50 (approx.)")
|
||||
"Saves £12.50 (approx.)")
|
||||
}
|
||||
|
||||
func testDetailCapsulePlacesApproximationAfterTheFinancialResult() {
|
||||
|
||||
Reference in New Issue
Block a user