Complete visual overhaul: warm light theme, stadium hero, inline pill nav
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>
This commit is contained in:
Trey t
@@ -16,183 +16,160 @@ struct GameCardView: View {
|
||||
|
||||
var body: some View {
|
||||
Button(action: onSelect) {
|
||||
HStack(spacing: 0) {
|
||||
VStack(spacing: 0) {
|
||||
// Team color accent bar
|
||||
HStack(spacing: 0) {
|
||||
Rectangle().fill(awayColor)
|
||||
Rectangle().fill(homeColor)
|
||||
}
|
||||
.frame(width: 4)
|
||||
.clipShape(RoundedRectangle(cornerRadius: 2))
|
||||
.padding(.vertical, 10)
|
||||
.frame(height: 4)
|
||||
|
||||
HStack(spacing: teamBlockSpacing) {
|
||||
// Away team
|
||||
teamBlock(team: game.awayTeam, isWinning: isWinning(away: true))
|
||||
VStack(spacing: rowGap) {
|
||||
teamRow(team: game.awayTeam, isWinning: isWinning(away: true))
|
||||
teamRow(team: game.homeTeam, isWinning: isWinning(away: false))
|
||||
}
|
||||
.padding(.horizontal, cardPadH)
|
||||
.padding(.top, cardPadV)
|
||||
|
||||
// Status / Score center
|
||||
VStack(spacing: 4) {
|
||||
if !game.status.isScheduled, let away = game.awayTeam.score, let home = game.homeTeam.score {
|
||||
Text("\(away) - \(home)")
|
||||
.font(scoreFont)
|
||||
.foregroundStyle(.white)
|
||||
.monospacedDigit()
|
||||
.contentTransition(.numericText())
|
||||
}
|
||||
Spacer(minLength: 6)
|
||||
|
||||
statusPill
|
||||
// Footer: status + linescore
|
||||
HStack {
|
||||
statusPill
|
||||
|
||||
Spacer()
|
||||
|
||||
if let linescore = game.linescore, !game.status.isScheduled {
|
||||
MiniLinescoreView(
|
||||
linescore: linescore,
|
||||
awayCode: game.awayTeam.code,
|
||||
homeCode: game.homeTeam.code
|
||||
)
|
||||
}
|
||||
.frame(width: scoreCenterWidth)
|
||||
|
||||
// Home team
|
||||
teamBlock(team: game.homeTeam, isWinning: isWinning(away: false), trailing: true)
|
||||
}
|
||||
.padding(.horizontal, blockPadH)
|
||||
|
||||
// Mini linescore (if available)
|
||||
if let linescore = game.linescore, !game.status.isScheduled {
|
||||
Divider()
|
||||
.frame(height: dividerHeight)
|
||||
.background(.white.opacity(0.08))
|
||||
|
||||
MiniLinescoreView(
|
||||
linescore: linescore,
|
||||
awayCode: game.awayTeam.code,
|
||||
homeCode: game.homeTeam.code
|
||||
)
|
||||
.padding(.horizontal, miniLSPad)
|
||||
}
|
||||
.padding(.horizontal, cardPadH)
|
||||
.padding(.bottom, cardPadV)
|
||||
}
|
||||
.frame(maxWidth: .infinity, minHeight: cardHeight, alignment: .leading)
|
||||
.padding(.vertical, cardPadV)
|
||||
.background(cardBackground)
|
||||
.frame(maxWidth: .infinity, minHeight: cardHeight, alignment: .topLeading)
|
||||
.background(DS.Colors.panelFill)
|
||||
.clipShape(RoundedRectangle(cornerRadius: cardRadius, style: .continuous))
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: cardRadius, style: .continuous)
|
||||
.strokeBorder(borderColor, lineWidth: borderWidth)
|
||||
)
|
||||
.shadow(color: DS.Shadows.card, radius: DS.Shadows.cardRadius, y: DS.Shadows.cardY)
|
||||
}
|
||||
.platformCardStyle()
|
||||
}
|
||||
|
||||
// MARK: - Team Block
|
||||
|
||||
@ViewBuilder
|
||||
private func teamBlock(team: TeamInfo, isWinning: Bool, trailing: Bool = false) -> some View {
|
||||
HStack(spacing: teamInnerSpacing) {
|
||||
if trailing { Spacer(minLength: 0) }
|
||||
|
||||
private func teamRow(team: TeamInfo, isWinning: Bool) -> some View {
|
||||
HStack(spacing: teamSpacing) {
|
||||
TeamLogoView(team: team, size: logoSize)
|
||||
|
||||
VStack(alignment: trailing ? .trailing : .leading, spacing: 2) {
|
||||
Text(team.code)
|
||||
.font(codeFont)
|
||||
.foregroundStyle(.white)
|
||||
Text(team.code)
|
||||
.font(codeFont)
|
||||
.foregroundStyle(DS.Colors.textPrimary)
|
||||
.frame(width: codeWidth, alignment: .leading)
|
||||
|
||||
if let record = team.record {
|
||||
HStack(spacing: 4) {
|
||||
Text(record)
|
||||
.font(recordFont)
|
||||
.foregroundStyle(.white.opacity(0.5))
|
||||
Text(team.displayName)
|
||||
.font(nameFont)
|
||||
.foregroundStyle(DS.Colors.textSecondary)
|
||||
.lineLimit(1)
|
||||
|
||||
if let streak = team.streak {
|
||||
Text(streak)
|
||||
.font(recordFont)
|
||||
.foregroundStyle(streak.hasPrefix("W") ? DS.Colors.positive : DS.Colors.live)
|
||||
}
|
||||
}
|
||||
}
|
||||
Spacer(minLength: 4)
|
||||
|
||||
if let record = team.record {
|
||||
Text(record)
|
||||
.font(recordFont)
|
||||
.foregroundStyle(DS.Colors.textTertiary)
|
||||
}
|
||||
|
||||
if !trailing { Spacer(minLength: 0) }
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
}
|
||||
if let streak = team.streak {
|
||||
Text(streak)
|
||||
.font(recordFont)
|
||||
.foregroundStyle(streak.hasPrefix("W") ? DS.Colors.positive : DS.Colors.live)
|
||||
}
|
||||
|
||||
// MARK: - Status
|
||||
if !game.status.isScheduled, let score = team.score {
|
||||
Text("\(score)")
|
||||
.font(scoreFont)
|
||||
.foregroundStyle(isWinning ? DS.Colors.textPrimary : DS.Colors.textTertiary)
|
||||
.frame(width: scoreWidth, alignment: .trailing)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private var statusPill: some View {
|
||||
switch game.status {
|
||||
case .live(let inning):
|
||||
HStack(spacing: 5) {
|
||||
Circle().fill(DS.Colors.live).frame(width: 6, height: 6)
|
||||
HStack(spacing: 6) {
|
||||
Circle().fill(DS.Colors.live).frame(width: 8, height: 8)
|
||||
Text(inning ?? "LIVE")
|
||||
.font(statusFont)
|
||||
.foregroundStyle(.white)
|
||||
.foregroundStyle(DS.Colors.live)
|
||||
}
|
||||
.padding(.horizontal, 10)
|
||||
.padding(.vertical, 5)
|
||||
.background(DS.Colors.live.opacity(0.18))
|
||||
.clipShape(Capsule())
|
||||
|
||||
case .scheduled(let time):
|
||||
Text(time)
|
||||
.font(statusFont)
|
||||
.foregroundStyle(.white.opacity(0.8))
|
||||
.foregroundStyle(DS.Colors.textSecondary)
|
||||
|
||||
case .final_:
|
||||
Text("FINAL")
|
||||
.font(statusFont)
|
||||
.foregroundStyle(.white.opacity(0.7))
|
||||
.foregroundStyle(DS.Colors.textTertiary)
|
||||
|
||||
case .unknown:
|
||||
EmptyView()
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Helpers
|
||||
|
||||
private func isWinning(away: Bool) -> Bool {
|
||||
guard let a = game.awayTeam.score, let h = game.homeTeam.score else { return false }
|
||||
return away ? a > h : h > a
|
||||
}
|
||||
|
||||
private var cardBackground: some ShapeStyle {
|
||||
Color(red: 0.06, green: 0.07, blue: 0.10)
|
||||
}
|
||||
|
||||
private var borderColor: Color {
|
||||
if inMultiView { return .green.opacity(0.35) }
|
||||
if inMultiView { return DS.Colors.positive.opacity(0.5) }
|
||||
if game.isLive { return DS.Colors.live.opacity(0.3) }
|
||||
return .white.opacity(0.06)
|
||||
return DS.Colors.panelStroke
|
||||
}
|
||||
|
||||
private var borderWidth: CGFloat {
|
||||
inMultiView || game.isLive ? 2 : 1
|
||||
inMultiView || game.isLive ? 2 : 0.5
|
||||
}
|
||||
|
||||
// MARK: - Platform Sizing
|
||||
|
||||
#if os(tvOS)
|
||||
private var cardHeight: CGFloat { 120 }
|
||||
private var cardPadV: CGFloat { 8 }
|
||||
private var cardRadius: CGFloat { 20 }
|
||||
private var logoSize: CGFloat { 40 }
|
||||
private var teamBlockSpacing: CGFloat { 12 }
|
||||
private var teamInnerSpacing: CGFloat { 12 }
|
||||
private var blockPadH: CGFloat { 18 }
|
||||
private var scoreCenterWidth: CGFloat { 140 }
|
||||
private var dividerHeight: CGFloat { 60 }
|
||||
private var miniLSPad: CGFloat { 16 }
|
||||
private var scoreFont: Font { .system(size: 30, weight: .black, design: .rounded) }
|
||||
private var codeFont: Font { .system(size: 24, weight: .black, design: .rounded) }
|
||||
private var recordFont: Font { .system(size: 18, weight: .bold, design: .monospaced) }
|
||||
private var statusFont: Font { .system(size: 18, weight: .bold, design: .rounded) }
|
||||
private var cardHeight: CGFloat { 200 }
|
||||
private var cardRadius: CGFloat { 22 }
|
||||
private var cardPadH: CGFloat { 22 }
|
||||
private var cardPadV: CGFloat { 16 }
|
||||
private var rowGap: CGFloat { 10 }
|
||||
private var logoSize: CGFloat { 44 }
|
||||
private var teamSpacing: CGFloat { 14 }
|
||||
private var codeWidth: CGFloat { 60 }
|
||||
private var scoreWidth: CGFloat { 40 }
|
||||
private var codeFont: Font { .system(size: 26, weight: .black, design: .rounded) }
|
||||
private var nameFont: Font { .system(size: 22, weight: .semibold) }
|
||||
private var scoreFont: Font { .system(size: 30, weight: .black, design: .rounded).monospacedDigit() }
|
||||
private var recordFont: Font { .system(size: 20, weight: .bold, design: .monospaced) }
|
||||
private var statusFont: Font { .system(size: 22, weight: .bold, design: .rounded) }
|
||||
#else
|
||||
private var cardHeight: CGFloat { 90 }
|
||||
private var cardPadV: CGFloat { 6 }
|
||||
private var cardRadius: CGFloat { 16 }
|
||||
private var logoSize: CGFloat { 30 }
|
||||
private var teamBlockSpacing: CGFloat { 8 }
|
||||
private var teamInnerSpacing: CGFloat { 8 }
|
||||
private var blockPadH: CGFloat { 12 }
|
||||
private var scoreCenterWidth: CGFloat { 100 }
|
||||
private var dividerHeight: CGFloat { 44 }
|
||||
private var miniLSPad: CGFloat { 10 }
|
||||
private var scoreFont: Font { .system(size: 22, weight: .black, design: .rounded) }
|
||||
private var codeFont: Font { .system(size: 17, weight: .black, design: .rounded) }
|
||||
private var recordFont: Font { .system(size: 12, weight: .bold, design: .monospaced) }
|
||||
private var statusFont: Font { .system(size: 13, weight: .bold, design: .rounded) }
|
||||
private var cardHeight: CGFloat { 150 }
|
||||
private var cardRadius: CGFloat { 18 }
|
||||
private var cardPadH: CGFloat { 16 }
|
||||
private var cardPadV: CGFloat { 12 }
|
||||
private var rowGap: CGFloat { 8 }
|
||||
private var logoSize: CGFloat { 32 }
|
||||
private var teamSpacing: CGFloat { 10 }
|
||||
private var codeWidth: CGFloat { 44 }
|
||||
private var scoreWidth: CGFloat { 30 }
|
||||
private var codeFont: Font { .system(size: 18, weight: .black, design: .rounded) }
|
||||
private var nameFont: Font { .system(size: 14, weight: .semibold) }
|
||||
private var scoreFont: Font { .system(size: 22, weight: .black, design: .rounded).monospacedDigit() }
|
||||
private var recordFont: Font { .system(size: 13, weight: .bold, design: .monospaced) }
|
||||
private var statusFont: Font { .system(size: 14, weight: .bold, design: .rounded) }
|
||||
#endif
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user