feat(ui): add 23 home screen design variants with picker
Add design style system with 23 unique home screen aesthetics: - Classic (original SportsTime design, now default) - 12 experimental styles (Brutalist, Luxury Editorial, etc.) - 10 polished app-inspired styles (Flighty, SeatGeek, Apple Maps, Things 3, Airbnb, Spotify, Nike Run Club, Fantastical, Strava, Carrot Weather) Includes settings picker to switch between styles and persists selection via UserDefaults. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -19,6 +19,9 @@ struct SettingsView: View {
|
||||
// Theme Selection
|
||||
themeSection
|
||||
|
||||
// UI Design Style
|
||||
designStyleSection
|
||||
|
||||
// Sports Preferences
|
||||
sportsSection
|
||||
|
||||
@@ -96,6 +99,58 @@ struct SettingsView: View {
|
||||
.listRowBackground(Theme.cardBackground(colorScheme))
|
||||
}
|
||||
|
||||
// MARK: - Design Style Section
|
||||
|
||||
private var designStyleSection: some View {
|
||||
Section {
|
||||
ForEach(UIDesignStyle.allCases) { style in
|
||||
Button {
|
||||
withAnimation(.easeInOut(duration: 0.2)) {
|
||||
DesignStyleManager.shared.setStyle(style)
|
||||
}
|
||||
} label: {
|
||||
HStack(spacing: 12) {
|
||||
// Icon with accent color
|
||||
ZStack {
|
||||
Circle()
|
||||
.fill(style.accentColor.opacity(0.15))
|
||||
.frame(width: 36, height: 36)
|
||||
|
||||
Image(systemName: style.iconName)
|
||||
.font(.system(size: 16))
|
||||
.foregroundStyle(style.accentColor)
|
||||
}
|
||||
|
||||
VStack(alignment: .leading, spacing: 2) {
|
||||
Text(style.rawValue)
|
||||
.font(.body)
|
||||
.foregroundStyle(.primary)
|
||||
Text(style.description)
|
||||
.font(.caption)
|
||||
.foregroundStyle(.secondary)
|
||||
.lineLimit(1)
|
||||
}
|
||||
|
||||
Spacer()
|
||||
|
||||
if DesignStyleManager.shared.currentStyle == style {
|
||||
Image(systemName: "checkmark.circle.fill")
|
||||
.foregroundStyle(style.accentColor)
|
||||
.font(.title3)
|
||||
}
|
||||
}
|
||||
.contentShape(Rectangle())
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
}
|
||||
} header: {
|
||||
Text("Home Screen Style")
|
||||
} footer: {
|
||||
Text("Choose a visual aesthetic for the home screen.")
|
||||
}
|
||||
.listRowBackground(Theme.cardBackground(colorScheme))
|
||||
}
|
||||
|
||||
// MARK: - Sports Section
|
||||
|
||||
private var sportsSection: some View {
|
||||
|
||||
Reference in New Issue
Block a user