Fix widget layout clipping and add comprehensive widget previews
- Fix LargeVotingView mood icons getting clipped at edges by using flexible HStack spacing with maxWidth: .infinity - Fix VotingView medium layout with smaller icons and even distribution - Add comprehensive #Preview macros for all widget states: - Vote widget: small/medium, voted/not voted, all mood states - Timeline widget: small/medium/large with various data states - Reduce icon sizes and padding to fit within widget bounds - Update accessibility labels and hints across views 🤖 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
@@ -26,7 +26,7 @@ struct InsightsView: View {
|
||||
// Header
|
||||
HStack {
|
||||
Text("Insights")
|
||||
.font(.system(size: 28, weight: .bold, design: .rounded))
|
||||
.font(.title.weight(.bold))
|
||||
.foregroundColor(textColor)
|
||||
Spacer()
|
||||
|
||||
@@ -34,9 +34,9 @@ struct InsightsView: View {
|
||||
if viewModel.isAIAvailable {
|
||||
HStack(spacing: 4) {
|
||||
Image(systemName: "sparkles")
|
||||
.font(.system(size: 12, weight: .medium))
|
||||
.font(.caption.weight(.medium))
|
||||
Text("AI")
|
||||
.font(.system(size: 12, weight: .semibold))
|
||||
.font(.caption.weight(.semibold))
|
||||
}
|
||||
.foregroundColor(.white)
|
||||
.padding(.horizontal, 8)
|
||||
@@ -118,7 +118,7 @@ struct InsightsView: View {
|
||||
.frame(width: 100, height: 100)
|
||||
|
||||
Image(systemName: "sparkles")
|
||||
.font(.system(size: 44))
|
||||
.font(.largeTitle)
|
||||
.foregroundStyle(
|
||||
LinearGradient(
|
||||
colors: [.purple, .blue],
|
||||
@@ -131,12 +131,12 @@ struct InsightsView: View {
|
||||
// Text
|
||||
VStack(spacing: 12) {
|
||||
Text("Unlock AI-Powered Insights")
|
||||
.font(.system(size: 24, weight: .bold, design: .rounded))
|
||||
.font(.title2.weight(.bold))
|
||||
.foregroundColor(textColor)
|
||||
.multilineTextAlignment(.center)
|
||||
|
||||
Text("Discover patterns in your mood, get personalized recommendations, and understand what affects how you feel.")
|
||||
.font(.system(size: 16))
|
||||
.font(.body)
|
||||
.foregroundColor(textColor.opacity(0.7))
|
||||
.multilineTextAlignment(.center)
|
||||
.padding(.horizontal, 32)
|
||||
@@ -150,7 +150,7 @@ struct InsightsView: View {
|
||||
Image(systemName: "sparkles")
|
||||
Text("Get Personal Insights")
|
||||
}
|
||||
.font(.system(size: 18, weight: .bold))
|
||||
.font(.headline.weight(.bold))
|
||||
.foregroundColor(.white)
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(.vertical, 16)
|
||||
@@ -202,14 +202,20 @@ struct InsightsSectionView: View {
|
||||
var body: some View {
|
||||
VStack(spacing: 0) {
|
||||
// Section Header
|
||||
Button(action: { withAnimation(.easeInOut(duration: 0.2)) { isExpanded.toggle() } }) {
|
||||
Button(action: {
|
||||
if UIAccessibility.isReduceMotionEnabled {
|
||||
isExpanded.toggle()
|
||||
} else {
|
||||
withAnimation(.easeInOut(duration: 0.2)) { isExpanded.toggle() }
|
||||
}
|
||||
}) {
|
||||
HStack {
|
||||
Image(systemName: icon)
|
||||
.font(.system(size: 18, weight: .medium))
|
||||
.font(.headline.weight(.medium))
|
||||
.foregroundColor(textColor.opacity(0.6))
|
||||
|
||||
Text(title)
|
||||
.font(.system(size: 20, weight: .bold))
|
||||
.font(.title3.weight(.bold))
|
||||
.foregroundColor(textColor)
|
||||
|
||||
// Loading indicator in header
|
||||
@@ -222,7 +228,7 @@ struct InsightsSectionView: View {
|
||||
Spacer()
|
||||
|
||||
Image(systemName: isExpanded ? "chevron.up" : "chevron.down")
|
||||
.font(.system(size: 12, weight: .semibold))
|
||||
.font(.caption.weight(.semibold))
|
||||
.foregroundColor(textColor.opacity(0.4))
|
||||
}
|
||||
.padding(.horizontal, 16)
|
||||
@@ -277,6 +283,7 @@ struct InsightsSectionView: View {
|
||||
removal: .opacity
|
||||
))
|
||||
.animation(
|
||||
UIAccessibility.isReduceMotionEnabled ? nil :
|
||||
.spring(response: 0.4, dampingFraction: 0.8)
|
||||
.delay(Double(index) * 0.05),
|
||||
value: insights.count
|
||||
@@ -294,7 +301,7 @@ struct InsightsSectionView: View {
|
||||
.fill(colorScheme == .dark ? Color(.systemGray6) : .white)
|
||||
)
|
||||
.padding(.horizontal)
|
||||
.animation(.easeInOut(duration: 0.2), value: isExpanded)
|
||||
.animation(UIAccessibility.isReduceMotionEnabled ? nil : .easeInOut(duration: 0.2), value: isExpanded)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -336,12 +343,15 @@ struct InsightSkeletonView: View {
|
||||
)
|
||||
.opacity(isAnimating ? 0.6 : 1.0)
|
||||
.animation(
|
||||
UIAccessibility.isReduceMotionEnabled ? nil :
|
||||
.easeInOut(duration: 0.8)
|
||||
.repeatForever(autoreverses: true),
|
||||
value: isAnimating
|
||||
)
|
||||
.onAppear {
|
||||
isAnimating = true
|
||||
if !UIAccessibility.isReduceMotionEnabled {
|
||||
isAnimating = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -376,9 +386,10 @@ struct InsightCardView: View {
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.frame(width: 22, height: 22)
|
||||
.foregroundColor(accentColor)
|
||||
.accessibilityLabel(mood.strValue)
|
||||
} else {
|
||||
Image(systemName: insight.icon)
|
||||
.font(.system(size: 18, weight: .semibold))
|
||||
.font(.headline.weight(.semibold))
|
||||
.foregroundColor(accentColor)
|
||||
}
|
||||
}
|
||||
@@ -386,11 +397,11 @@ struct InsightCardView: View {
|
||||
// Text Content
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
Text(insight.title)
|
||||
.font(.system(size: 15, weight: .semibold))
|
||||
.font(.subheadline.weight(.semibold))
|
||||
.foregroundColor(textColor)
|
||||
|
||||
Text(insight.description)
|
||||
.font(.system(size: 14))
|
||||
.font(.subheadline)
|
||||
.foregroundColor(textColor.opacity(0.7))
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user