Adjust feature card layout to show full description text
- Reduce icon and glow sizes for more content space - Use smaller font sizes for title, subtitle, and description - Add fixedSize modifier to prevent description truncation - Use minLength spacers instead of flexible spacers 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -122,8 +122,8 @@ struct FeatureCard: View {
|
||||
@State private var appeared = false
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: AppSpacing.xl) {
|
||||
Spacer()
|
||||
VStack(spacing: AppSpacing.lg) {
|
||||
Spacer(minLength: AppSpacing.md)
|
||||
|
||||
// Large icon with gradient background
|
||||
ZStack {
|
||||
@@ -133,11 +133,11 @@ struct FeatureCard: View {
|
||||
RadialGradient(
|
||||
colors: [feature.gradient[0].opacity(0.3), Color.clear],
|
||||
center: .center,
|
||||
startRadius: 40,
|
||||
endRadius: 100
|
||||
startRadius: 30,
|
||||
endRadius: 80
|
||||
)
|
||||
)
|
||||
.frame(width: 200, height: 200)
|
||||
.frame(width: 160, height: 160)
|
||||
.scaleEffect(appeared ? 1 : 0.8)
|
||||
.opacity(appeared ? 1 : 0)
|
||||
|
||||
@@ -150,26 +150,26 @@ struct FeatureCard: View {
|
||||
endPoint: .bottomTrailing
|
||||
)
|
||||
)
|
||||
.frame(width: 120, height: 120)
|
||||
.shadow(color: feature.gradient[0].opacity(0.5), radius: 20, y: 10)
|
||||
.frame(width: 100, height: 100)
|
||||
.shadow(color: feature.gradient[0].opacity(0.5), radius: 15, y: 8)
|
||||
|
||||
Image(systemName: feature.icon)
|
||||
.font(.system(size: 50))
|
||||
.font(.system(size: 44))
|
||||
.foregroundColor(.white)
|
||||
}
|
||||
.scaleEffect(appeared ? 1 : 0.5)
|
||||
.animation(.spring(response: 0.5, dampingFraction: 0.7), value: appeared)
|
||||
|
||||
// Text content
|
||||
VStack(spacing: AppSpacing.md) {
|
||||
VStack(spacing: AppSpacing.sm) {
|
||||
Text(feature.title)
|
||||
.font(.title)
|
||||
.font(.title2)
|
||||
.fontWeight(.bold)
|
||||
.foregroundColor(Color.appTextPrimary)
|
||||
.multilineTextAlignment(.center)
|
||||
|
||||
Text(feature.subtitle)
|
||||
.font(.title3)
|
||||
.font(.subheadline)
|
||||
.fontWeight(.medium)
|
||||
.foregroundStyle(
|
||||
LinearGradient(
|
||||
@@ -181,11 +181,12 @@ struct FeatureCard: View {
|
||||
.multilineTextAlignment(.center)
|
||||
|
||||
Text(feature.description)
|
||||
.font(.body)
|
||||
.font(.subheadline)
|
||||
.foregroundColor(Color.appTextSecondary)
|
||||
.multilineTextAlignment(.center)
|
||||
.lineSpacing(4)
|
||||
.padding(.horizontal, AppSpacing.md)
|
||||
.lineSpacing(3)
|
||||
.padding(.horizontal, AppSpacing.sm)
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
}
|
||||
.opacity(appeared ? 1 : 0)
|
||||
.offset(y: appeared ? 0 : 20)
|
||||
@@ -194,7 +195,7 @@ struct FeatureCard: View {
|
||||
// Stat highlight
|
||||
VStack(spacing: AppSpacing.xs) {
|
||||
Text(feature.statNumber)
|
||||
.font(.system(size: 36, weight: .bold, design: .rounded))
|
||||
.font(.system(size: 32, weight: .bold, design: .rounded))
|
||||
.foregroundStyle(
|
||||
LinearGradient(
|
||||
colors: feature.gradient,
|
||||
@@ -208,7 +209,8 @@ struct FeatureCard: View {
|
||||
.foregroundColor(Color.appTextSecondary)
|
||||
.multilineTextAlignment(.center)
|
||||
}
|
||||
.padding(AppSpacing.lg)
|
||||
.padding(.horizontal, AppSpacing.lg)
|
||||
.padding(.vertical, AppSpacing.md)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: AppRadius.lg)
|
||||
.fill(Color.appBackgroundSecondary)
|
||||
@@ -216,7 +218,7 @@ struct FeatureCard: View {
|
||||
.opacity(appeared ? 1 : 0)
|
||||
.animation(.easeOut(duration: 0.4).delay(0.4), value: appeared)
|
||||
|
||||
Spacer()
|
||||
Spacer(minLength: AppSpacing.md)
|
||||
}
|
||||
.onChange(of: isActive) { _, newValue in
|
||||
if newValue {
|
||||
|
||||
Reference in New Issue
Block a user