Redesign Day View entries with eye-catching card design
- Add gradient circle backgrounds for mood icons with colored shadows - Use white icons on gradient backgrounds for better contrast - Add pill-shaped mood label badges with color coding - Implement card design with shadows and subtle borders - Add chevron indicator for tappability - Update section headers with calendar icon and rounded font - Increase spacing between entries for better visual separation 🤖 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
@@ -147,19 +147,25 @@ struct DayView: View {
|
||||
// view that make up the list body
|
||||
extension DayView {
|
||||
private func SectionHeaderView(month: Int, year: Int) -> some View {
|
||||
HStack {
|
||||
HStack(spacing: 10) {
|
||||
// Calendar icon
|
||||
Image(systemName: "calendar")
|
||||
.font(.system(size: 16, weight: .semibold))
|
||||
.foregroundColor(textColor.opacity(0.6))
|
||||
|
||||
Text("\(Random.monthName(fromMonthInt: month)) \(String(year))")
|
||||
.font(.title2.bold())
|
||||
.font(.system(size: 20, weight: .bold, design: .rounded))
|
||||
.foregroundColor(textColor)
|
||||
|
||||
Spacer()
|
||||
}
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.vertical, 12)
|
||||
.padding(.vertical, 14)
|
||||
.background(.ultraThinMaterial)
|
||||
}
|
||||
|
||||
private func monthListView(month: Int, year: Int, entries: [MoodEntry]) -> some View {
|
||||
VStack(spacing: 8) {
|
||||
VStack(spacing: 12) {
|
||||
// for reach all entries
|
||||
ForEach(entries.sorted(by: {
|
||||
return $0.forDate! > $1.forDate!
|
||||
@@ -175,6 +181,7 @@ extension DayView {
|
||||
}
|
||||
}
|
||||
.padding(.horizontal, 12)
|
||||
.padding(.top, 8)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ struct EntryListView: View {
|
||||
@AppStorage(UserDefaultsStore.Keys.moodImages.rawValue, store: GroupUserDefaults.groupDefaults) private var imagePack: MoodImages = .FontAwesome
|
||||
@AppStorage(UserDefaultsStore.Keys.moodTint.rawValue, store: GroupUserDefaults.groupDefaults) private var moodTint: MoodTints = .Default
|
||||
@AppStorage(UserDefaultsStore.Keys.textColor.rawValue, store: GroupUserDefaults.groupDefaults) private var textColor: Color = DefaultTextColor.textColor
|
||||
@Environment(\.colorScheme) private var colorScheme
|
||||
|
||||
public let entry: MoodEntry
|
||||
|
||||
@@ -18,38 +19,97 @@ struct EntryListView: View {
|
||||
moodTint.color(forMood: entry.mood)
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
HStack(spacing: 14) {
|
||||
imagePack.icon(forMood: entry.mood)
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.frame(width: 42, height: 42)
|
||||
.foregroundColor(moodColor)
|
||||
private var isMissing: Bool {
|
||||
entry.moodValue == Mood.missing.rawValue
|
||||
}
|
||||
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
HStack(spacing: 4) {
|
||||
var body: some View {
|
||||
HStack(spacing: 16) {
|
||||
// Large mood icon with gradient background
|
||||
ZStack {
|
||||
// Gradient circle background
|
||||
Circle()
|
||||
.fill(
|
||||
LinearGradient(
|
||||
colors: isMissing
|
||||
? [Color.gray.opacity(0.3), Color.gray.opacity(0.1)]
|
||||
: [moodColor.opacity(0.8), moodColor.opacity(0.4)],
|
||||
startPoint: .topLeading,
|
||||
endPoint: .bottomTrailing
|
||||
)
|
||||
)
|
||||
.frame(width: 56, height: 56)
|
||||
|
||||
// Icon
|
||||
imagePack.icon(forMood: entry.mood)
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.frame(width: 32, height: 32)
|
||||
.foregroundColor(isMissing ? .gray : .white)
|
||||
}
|
||||
.shadow(color: isMissing ? .clear : moodColor.opacity(0.4), radius: 8, x: 0, y: 4)
|
||||
|
||||
// Content
|
||||
VStack(alignment: .leading, spacing: 6) {
|
||||
// Date row
|
||||
HStack(spacing: 6) {
|
||||
Text(Random.weekdayName(fromDate: entry.forDate!))
|
||||
.font(.headline)
|
||||
.font(.system(size: 17, weight: .semibold))
|
||||
.foregroundColor(textColor)
|
||||
Text("-")
|
||||
.foregroundColor(textColor.opacity(0.6))
|
||||
|
||||
Text("•")
|
||||
.foregroundColor(textColor.opacity(0.4))
|
||||
|
||||
Text(Random.dayFormat(fromDate: entry.forDate!))
|
||||
.font(.headline)
|
||||
.foregroundColor(textColor)
|
||||
.font(.system(size: 17, weight: .medium))
|
||||
.foregroundColor(textColor.opacity(0.8))
|
||||
}
|
||||
|
||||
Text(entry.moodValue == Mood.missing.rawValue ? String(localized: "mood_value_missing_tap_to_add") : "\(entry.moodString)")
|
||||
.font(.subheadline)
|
||||
.foregroundColor(textColor.opacity(0.7))
|
||||
// Mood label with colored badge
|
||||
if isMissing {
|
||||
Text(String(localized: "mood_value_missing_tap_to_add"))
|
||||
.font(.system(size: 14, weight: .medium))
|
||||
.foregroundColor(.gray)
|
||||
} else {
|
||||
Text(entry.moodString)
|
||||
.font(.system(size: 14, weight: .semibold))
|
||||
.foregroundColor(moodColor)
|
||||
.padding(.horizontal, 10)
|
||||
.padding(.vertical, 4)
|
||||
.background(
|
||||
Capsule()
|
||||
.fill(moodColor.opacity(0.15))
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Spacer()
|
||||
|
||||
// Chevron indicator
|
||||
Image(systemName: "chevron.right")
|
||||
.font(.system(size: 14, weight: .semibold))
|
||||
.foregroundColor(textColor.opacity(0.3))
|
||||
}
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.vertical, 14)
|
||||
.padding(.horizontal, 18)
|
||||
.padding(.vertical, 16)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 14)
|
||||
.fill(moodColor.opacity(0.12))
|
||||
RoundedRectangle(cornerRadius: 18)
|
||||
.fill(colorScheme == .dark ? Color(.systemGray6) : .white)
|
||||
.shadow(
|
||||
color: isMissing ? .clear : moodColor.opacity(colorScheme == .dark ? 0.2 : 0.12),
|
||||
radius: 12,
|
||||
x: 0,
|
||||
y: 4
|
||||
)
|
||||
)
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 18)
|
||||
.stroke(
|
||||
isMissing
|
||||
? Color.gray.opacity(0.2)
|
||||
: moodColor.opacity(0.2),
|
||||
lineWidth: 1
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user