Fix theme selection bug and update onboarding with AppTheme picker
- Change Theme enum from Int to String raw values to fix theme selection bug - Replace OnboardingStyle icon/color pickers with unified AppTheme grid - Remove visible text labels from voting layouts while keeping accessibility labels (WCAG 2.1 AA compliant) - Update widget voting views to use icons only with proper accessibility support - Consolidate app icons to single unified icon set 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Trey t
@@ -9,18 +9,18 @@ import SwiftUI
|
||||
|
||||
struct OnboardingStyle: View {
|
||||
@ObservedObject var onboardingData: OnboardingData
|
||||
@AppStorage(UserDefaultsStore.Keys.moodTint.rawValue, store: GroupUserDefaults.groupDefaults) private var moodTint: MoodTints = .Default
|
||||
@AppStorage(UserDefaultsStore.Keys.moodImages.rawValue, store: GroupUserDefaults.groupDefaults) private var imagePack: MoodImages = .FontAwesome
|
||||
@State private var selectedTheme: AppTheme = .celestial
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
// Gradient background
|
||||
// Gradient background that updates with theme
|
||||
LinearGradient(
|
||||
colors: [Color(hex: "fa709a"), Color(hex: "fee140")],
|
||||
colors: selectedTheme.previewColors,
|
||||
startPoint: .topLeading,
|
||||
endPoint: .bottomTrailing
|
||||
)
|
||||
.ignoresSafeArea()
|
||||
.animation(.easeInOut(duration: 0.4), value: selectedTheme)
|
||||
|
||||
ScrollView(showsIndicators: false) {
|
||||
VStack(spacing: 0) {
|
||||
@@ -30,186 +30,149 @@ struct OnboardingStyle: View {
|
||||
.fill(.white.opacity(0.15))
|
||||
.frame(width: 100, height: 100)
|
||||
|
||||
Image(systemName: "paintpalette.fill")
|
||||
.font(.largeTitle)
|
||||
.foregroundColor(.white)
|
||||
Text(selectedTheme.emoji)
|
||||
.font(.system(size: 44))
|
||||
}
|
||||
.padding(.top, 40)
|
||||
.padding(.bottom, 20)
|
||||
|
||||
// Title
|
||||
Text("Make it yours")
|
||||
Text("Choose your vibe")
|
||||
.font(.title.weight(.bold))
|
||||
.foregroundColor(.white)
|
||||
.shadow(color: .black.opacity(0.2), radius: 4, x: 0, y: 2)
|
||||
.padding(.bottom, 8)
|
||||
|
||||
// Subtitle
|
||||
Text("Choose your favorite style")
|
||||
Text("Each theme sets your colors, icons, and layouts")
|
||||
.font(.body.weight(.medium))
|
||||
.foregroundColor(.white.opacity(0.85))
|
||||
.padding(.bottom, 20)
|
||||
.multilineTextAlignment(.center)
|
||||
.padding(.horizontal, 32)
|
||||
.padding(.bottom, 24)
|
||||
|
||||
// Preview card
|
||||
OnboardingStylePreview(moodTint: moodTint, imagePack: imagePack)
|
||||
.padding(.horizontal, 24)
|
||||
.padding(.bottom, 20)
|
||||
|
||||
// Icon Style Section
|
||||
VStack(alignment: .leading, spacing: 10) {
|
||||
Text("Icon Style")
|
||||
.font(.subheadline.weight(.semibold))
|
||||
.foregroundColor(.white.opacity(0.9))
|
||||
.padding(.horizontal, 24)
|
||||
|
||||
LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())], spacing: 10) {
|
||||
ForEach(MoodImages.allCases, id: \.rawValue) { pack in
|
||||
OnboardingIconPackOption(
|
||||
pack: pack,
|
||||
moodTint: moodTint,
|
||||
isSelected: imagePack == pack,
|
||||
action: {
|
||||
let impactMed = UIImpactFeedbackGenerator(style: .medium)
|
||||
impactMed.impactOccurred()
|
||||
imagePack = pack
|
||||
// Theme Grid
|
||||
LazyVGrid(columns: [
|
||||
GridItem(.flexible(), spacing: 12),
|
||||
GridItem(.flexible(), spacing: 12)
|
||||
], spacing: 14) {
|
||||
ForEach(AppTheme.allCases) { theme in
|
||||
OnboardingThemeCard(
|
||||
theme: theme,
|
||||
isSelected: selectedTheme == theme,
|
||||
action: {
|
||||
let impactMed = UIImpactFeedbackGenerator(style: .medium)
|
||||
impactMed.impactOccurred()
|
||||
withAnimation(.easeInOut(duration: 0.3)) {
|
||||
selectedTheme = theme
|
||||
}
|
||||
)
|
||||
}
|
||||
// Apply the theme immediately
|
||||
theme.apply()
|
||||
}
|
||||
)
|
||||
}
|
||||
.padding(.horizontal, 24)
|
||||
}
|
||||
.padding(.bottom, 16)
|
||||
|
||||
// Color Theme Section
|
||||
VStack(alignment: .leading, spacing: 10) {
|
||||
Text("Mood Colors")
|
||||
.font(.subheadline.weight(.semibold))
|
||||
.foregroundColor(.white.opacity(0.9))
|
||||
.padding(.horizontal, 24)
|
||||
|
||||
LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())], spacing: 10) {
|
||||
ForEach(MoodTints.defaultOptions, id: \.rawValue) { tint in
|
||||
OnboardingTintOption(
|
||||
tint: tint,
|
||||
isSelected: moodTint == tint,
|
||||
action: {
|
||||
let impactMed = UIImpactFeedbackGenerator(style: .medium)
|
||||
impactMed.impactOccurred()
|
||||
moodTint = tint
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
.padding(.horizontal, 24)
|
||||
}
|
||||
.padding(.horizontal, 20)
|
||||
|
||||
// Hint
|
||||
HStack(spacing: 8) {
|
||||
Image(systemName: "arrow.left.arrow.right")
|
||||
.font(.subheadline)
|
||||
Text("You can change these anytime in Customize")
|
||||
Text("You can change this anytime in Customize")
|
||||
.font(.caption.weight(.medium))
|
||||
}
|
||||
.foregroundColor(.white.opacity(0.7))
|
||||
.padding(.top, 20)
|
||||
.padding(.top, 24)
|
||||
.padding(.bottom, 80)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Preview Card
|
||||
struct OnboardingStylePreview: View {
|
||||
let moodTint: MoodTints
|
||||
let imagePack: MoodImages
|
||||
|
||||
var body: some View {
|
||||
HStack(spacing: 16) {
|
||||
imagePack.icon(forMood: .good)
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.frame(width: 44, height: 44)
|
||||
.foregroundColor(moodTint.color(forMood: .good))
|
||||
.accessibilityLabel(Mood.good.strValue)
|
||||
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
Text("Wednesday - 10th")
|
||||
.font(.body.weight(.semibold))
|
||||
.foregroundColor(.white)
|
||||
|
||||
Text(Mood.good.strValue)
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.white.opacity(0.8))
|
||||
}
|
||||
|
||||
Spacer()
|
||||
.onAppear {
|
||||
// Apply default theme on appear
|
||||
selectedTheme.apply()
|
||||
}
|
||||
.padding(20)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 16)
|
||||
.fill(.white.opacity(0.2))
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Icon Pack Option
|
||||
struct OnboardingIconPackOption: View {
|
||||
let pack: MoodImages
|
||||
let moodTint: MoodTints
|
||||
// MARK: - Onboarding Theme Card
|
||||
struct OnboardingThemeCard: View {
|
||||
let theme: AppTheme
|
||||
let isSelected: Bool
|
||||
let action: () -> Void
|
||||
|
||||
var body: some View {
|
||||
Button(action: action) {
|
||||
HStack(spacing: 6) {
|
||||
ForEach([Mood.great, .good, .average], id: \.self) { mood in
|
||||
pack.icon(forMood: mood)
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.frame(width: 24, height: 24)
|
||||
.foregroundColor(moodTint.color(forMood: mood))
|
||||
.accessibilityLabel(mood.strValue)
|
||||
VStack(spacing: 0) {
|
||||
// Preview gradient with emoji
|
||||
ZStack {
|
||||
LinearGradient(
|
||||
colors: theme.previewColors,
|
||||
startPoint: .topLeading,
|
||||
endPoint: .bottomTrailing
|
||||
)
|
||||
|
||||
Text(theme.emoji)
|
||||
.font(.system(size: 32))
|
||||
.shadow(color: .black.opacity(0.2), radius: 2, x: 0, y: 1)
|
||||
|
||||
// Selected checkmark
|
||||
if isSelected {
|
||||
VStack {
|
||||
HStack {
|
||||
Spacer()
|
||||
Image(systemName: "checkmark.circle.fill")
|
||||
.font(.system(size: 20))
|
||||
.foregroundStyle(.white, .green)
|
||||
.padding(6)
|
||||
}
|
||||
Spacer()
|
||||
}
|
||||
}
|
||||
}
|
||||
.frame(height: 70)
|
||||
.clipShape(
|
||||
UnevenRoundedRectangle(
|
||||
topLeadingRadius: 14,
|
||||
bottomLeadingRadius: 0,
|
||||
bottomTrailingRadius: 0,
|
||||
topTrailingRadius: 14
|
||||
)
|
||||
)
|
||||
|
||||
// Name and tagline
|
||||
VStack(alignment: .leading, spacing: 2) {
|
||||
Text(theme.name)
|
||||
.font(.subheadline.weight(.semibold))
|
||||
.foregroundColor(Color(UIColor.darkText))
|
||||
.lineLimit(1)
|
||||
|
||||
Text(theme.tagline)
|
||||
.font(.caption2)
|
||||
.foregroundColor(Color(UIColor.darkGray))
|
||||
.lineLimit(1)
|
||||
}
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
.padding(.horizontal, 10)
|
||||
.padding(.vertical, 8)
|
||||
.background(Color.white)
|
||||
.clipShape(
|
||||
UnevenRoundedRectangle(
|
||||
topLeadingRadius: 0,
|
||||
bottomLeadingRadius: 14,
|
||||
bottomTrailingRadius: 14,
|
||||
topTrailingRadius: 0
|
||||
)
|
||||
)
|
||||
}
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.vertical, 14)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 14)
|
||||
.fill(isSelected ? .white : .white.opacity(0.2))
|
||||
)
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 14)
|
||||
.stroke(isSelected ? Color.clear : .white.opacity(0.3), lineWidth: 1)
|
||||
.stroke(isSelected ? Color.white : Color.clear, lineWidth: 3)
|
||||
)
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Tint Option
|
||||
struct OnboardingTintOption: View {
|
||||
let tint: MoodTints
|
||||
let isSelected: Bool
|
||||
let action: () -> Void
|
||||
|
||||
var body: some View {
|
||||
Button(action: action) {
|
||||
HStack(spacing: 4) {
|
||||
ForEach([Mood.great, .good, .average, .bad, .horrible], id: \.self) { mood in
|
||||
Circle()
|
||||
.fill(tint.color(forMood: mood))
|
||||
.frame(width: 20, height: 20)
|
||||
}
|
||||
}
|
||||
.padding(.horizontal, 14)
|
||||
.padding(.vertical, 12)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 14)
|
||||
.fill(isSelected ? .white : .white.opacity(0.2))
|
||||
)
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 14)
|
||||
.stroke(isSelected ? Color.clear : .white.opacity(0.3), lineWidth: 1)
|
||||
.shadow(
|
||||
color: .black.opacity(isSelected ? 0.25 : 0.15),
|
||||
radius: isSelected ? 8 : 4,
|
||||
x: 0,
|
||||
y: isSelected ? 4 : 2
|
||||
)
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
|
||||
Reference in New Issue
Block a user