65ad41840f
Inspired by vtv/Dribbble streaming concept. Every dark surface replaced
with warm off-white (#F5F3F0) and white cards with soft shadows.
Design System: Warm off-white background, white card fills, subtle drop
shadows, dark text hierarchy, warm orange accent (#F27326) replacing
blue as primary interactive color. Added onDark color variants for hero
overlays. Shadow system with card/lifted states.
Navigation: Replaced TabView with inline CategoryPillBar — horizontal
orange pills (Today | Intel | Highlights | Multi-View | Settings).
Single scrolling view, no system chrome. Multi-View as icon button
with stream count badge. Settings as gear icon.
Stadium Hero: Full-bleed stadium photos from MLB CDN
(mlbstatic.com/v1/venue/{id}/spots/1200) as featured game background.
Left gradient overlay for text readability. Live games show score +
inning + DiamondView count/outs. Scheduled games show probable pitchers
with headshots + records. Final games show final score. Warm orange
"Watch Now" CTA pill. Added venue ID mapping for all 30 stadiums to
TeamAssets.
Game Cards: White cards with team color top bar, horizontal team rows,
dark text, soft shadows. Record + streak on every card.
Intel Tab: All dark panels replaced with white cards + shadows.
Replaced dark gradient screen background with flat warm off-white.
58 hardcoded .white.opacity() values replaced with DS.Colors tokens.
Feed Tab: Already used DS.Colors — inherits light theme automatically.
Focus: tvOS focus style uses warm orange border highlight + lifted
shadow instead of white glow on dark.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
99 lines
3.7 KiB
Swift
99 lines
3.7 KiB
Swift
import SwiftUI
|
|
|
|
struct CategoryPillBar: View {
|
|
@Binding var selected: AppSection
|
|
var streamCount: Int = 0
|
|
|
|
var body: some View {
|
|
HStack(spacing: pillSpacing) {
|
|
ForEach(AppSection.allCases) { section in
|
|
if section == .multiView {
|
|
// Multi-View as a separate icon button with badge
|
|
Button {
|
|
selected = .multiView
|
|
} label: {
|
|
HStack(spacing: 6) {
|
|
Image(systemName: "rectangle.split.2x2.fill")
|
|
.font(.system(size: iconSize, weight: .semibold))
|
|
if streamCount > 0 {
|
|
Text("\(streamCount)")
|
|
.font(pillFont.weight(.black))
|
|
}
|
|
}
|
|
.foregroundStyle(selected == .multiView ? .white : DS.Colors.textTertiary)
|
|
.padding(.horizontal, pillPadH)
|
|
.padding(.vertical, pillPadV)
|
|
.background(
|
|
Capsule().fill(selected == .multiView ? DS.Colors.interactive : .clear)
|
|
)
|
|
}
|
|
.platformCardStyle()
|
|
} else if section == .settings {
|
|
Spacer()
|
|
Button {
|
|
selected = .settings
|
|
} label: {
|
|
Image(systemName: "gearshape.fill")
|
|
.font(.system(size: iconSize, weight: .semibold))
|
|
.foregroundStyle(selected == .settings ? .white : DS.Colors.textTertiary)
|
|
.padding(.horizontal, pillPadH)
|
|
.padding(.vertical, pillPadV)
|
|
.background(
|
|
Capsule().fill(selected == .settings ? DS.Colors.interactive : .clear)
|
|
)
|
|
}
|
|
.platformCardStyle()
|
|
} else {
|
|
Button {
|
|
selected = section
|
|
} label: {
|
|
Text(section.title)
|
|
.font(pillFont)
|
|
.foregroundStyle(selected == section ? .white : DS.Colors.textTertiary)
|
|
.padding(.horizontal, pillPadH)
|
|
.padding(.vertical, pillPadV)
|
|
.background(
|
|
Capsule().fill(selected == section ? DS.Colors.interactive : .clear)
|
|
)
|
|
}
|
|
.platformCardStyle()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#if os(tvOS)
|
|
private var pillSpacing: CGFloat { 8 }
|
|
private var pillPadH: CGFloat { 28 }
|
|
private var pillPadV: CGFloat { 14 }
|
|
private var pillFont: Font { .system(size: 24, weight: .bold, design: .rounded) }
|
|
private var iconSize: CGFloat { 22 }
|
|
#else
|
|
private var pillSpacing: CGFloat { 4 }
|
|
private var pillPadH: CGFloat { 18 }
|
|
private var pillPadV: CGFloat { 10 }
|
|
private var pillFont: Font { .system(size: 15, weight: .bold, design: .rounded) }
|
|
private var iconSize: CGFloat { 16 }
|
|
#endif
|
|
}
|
|
|
|
enum AppSection: String, CaseIterable, Identifiable {
|
|
case today
|
|
case intel
|
|
case highlights
|
|
case multiView
|
|
case settings
|
|
|
|
var id: String { rawValue }
|
|
|
|
var title: String {
|
|
switch self {
|
|
case .today: "Today"
|
|
case .intel: "Intel"
|
|
case .highlights: "Highlights"
|
|
case .multiView: "Multi-View"
|
|
case .settings: "Settings"
|
|
}
|
|
}
|
|
}
|