diff --git a/FuelBoard/StationsView.swift b/FuelBoard/StationsView.swift index 15e1fce..72400f2 100644 --- a/FuelBoard/StationsView.swift +++ b/FuelBoard/StationsView.swift @@ -46,13 +46,7 @@ struct StationsView: View { } Section("Fuel type") { - Picker("Fuel type", selection: $selectedFuel) { - ForEach(FuelType.allCases) { fuel in - Text(fuel.shortName).tag(fuel) - } - } - .pickerStyle(.segmented) - .onChange(of: selectedFuel) { _, newValue in + FuelTypeSegmentedPicker(selection: $selectedFuel) { newValue in FuelStore.saveSelectedFuel(newValue) WidgetCenter.shared.reloadAllTimelines() } @@ -196,13 +190,55 @@ extension FuelType { } } - /// Pump-handle colour convention (UK): green = unleaded, blue = premium, + /// Pump-handle colour convention (UK): green = unleaded, purple = premium, /// dark grey = diesel. Used for the fuel-type tab icons and the title icon. var tintColor: Color { switch self { case .e10: return .green - case .e5: return .blue + case .e5: return .purple case .diesel: return Color(red: 0.35, green: 0.38, blue: 0.42) } } } + +/// Fuel-type selector styled like a segmented control, with a coloured pump +/// icon per fuel (green = unleaded, purple = premium, grey = diesel). Built +/// custom because the native `.segmented` picker tints every segment the same +/// accent colour — it can't show per-fuel pump colours. +private struct FuelTypeSegmentedPicker: View { + @Binding var selection: FuelType + var onSelect: (FuelType) -> Void + + var body: some View { + HStack(spacing: 3) { + ForEach(FuelType.allCases) { fuel in + let isSelected = fuel == selection + Button { + selection = fuel + onSelect(fuel) + } label: { + HStack(spacing: 5) { + Image(systemName: "fuelpump.fill") + .font(.caption2) + .foregroundStyle(fuel.tintColor) + Text(fuel.shortName) + .font(.subheadline.weight(isSelected ? .semibold : .regular)) + } + .foregroundStyle(isSelected ? Color.primary : Color.secondary) + .frame(maxWidth: .infinity) + .padding(.vertical, 7) + .background { + if isSelected { + Capsule() + .fill(Color(UIColor.systemBackground)) + .shadow(color: .black.opacity(0.08), radius: 1, y: 0.5) + } + } + } + .buttonStyle(.plain) + } + } + .padding(3) + .background(Capsule().fill(Color(.secondarySystemBackground))) + } +}