From 3a35f380d71be676a30531873e83feb37b5f9e2d Mon Sep 17 00:00:00 2001 From: Trey t Date: Wed, 10 Dec 2025 09:22:49 -0600 Subject: [PATCH] Redesign Day View entries with eye-catching card design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- Shared/Views/DayView/DayView.swift | 15 +++-- Shared/Views/EntryListView.swift | 102 +++++++++++++++++++++++------ 2 files changed, 92 insertions(+), 25 deletions(-) diff --git a/Shared/Views/DayView/DayView.swift b/Shared/Views/DayView/DayView.swift index e45e78d..8c49ee0 100644 --- a/Shared/Views/DayView/DayView.swift +++ b/Shared/Views/DayView/DayView.swift @@ -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) } } diff --git a/Shared/Views/EntryListView.swift b/Shared/Views/EntryListView.swift index e86f3b8..758b63c 100644 --- a/Shared/Views/EntryListView.swift +++ b/Shared/Views/EntryListView.swift @@ -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 + ) ) } }