admin/Reflect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve pattern theme with visible mood icon backgrounds

Browse Source 
- Remove pattern from month section header for cleaner look
- Fix entry rows to show mood icon as repeating background
- Add ultraThinMaterial behind text for better readability

🤖 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
2025-12-18 13:45:34 -06:00
parent f57e8da4ff
commit e123df1790
2 changed files with 75 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
Shared/Views/DayView/DayView.swift
View File

@@ -574,50 +574,19 @@ extension DayView {
}
private func patternSectionHeader(month: Int, year: Int) -> some View {
ZStack {
// Subtle mood icon pattern background
GeometryReader { geo in
let iconSize: CGFloat = 12
let spacing: CGFloat = 20
let cols = Int(geo.size.width / spacing) + 1
let rows = 3
HStack(spacing: 10) {
Image(systemName: "calendar")
.font(.system(size: 16, weight: .semibold))
.foregroundColor(textColor.opacity(0.6))
Canvas { context, size in
for row in 0..<rows {
for col in 0..<cols {
let x = CGFloat(col) * spacing + (row % 2 == 0 ? 0 : spacing / 2)
let y = CGFloat(row) * spacing + 8
let rect = CGRect(x: x, y: y, width: iconSize, height: iconSize)
context.opacity = 0.06
context.fill(Circle().path(in: rect), with: .color(textColor))
}
}
}
}
.frame(height: 60)
Text("\(Random.monthName(fromMonthInt: month)) \(String(year))")
.font(.system(size: 20, weight: .bold, design: .rounded))
.foregroundColor(textColor)
HStack(spacing: 12) {
// Mood icon cluster
HStack(spacing: -4) {
ForEach(0..<3, id: \.self) { i in
Circle()
.fill(textColor.opacity(0.15 - Double(i) * 0.04))
.frame(width: 20 - CGFloat(i * 2), height: 20 - CGFloat(i * 2))
}
}
Text(Random.monthName(fromMonthInt: month))
.font(.system(size: 18, weight: .semibold))
.foregroundColor(textColor)
Text(String(year))
.font(.system(size: 14, weight: .regular))
.foregroundColor(textColor.opacity(0.5))
Spacer()
}
.padding(.horizontal, 20)
Spacer()
}
.padding(.horizontal, 16)
.padding(.vertical, 14)
.background(.ultraThinMaterial)
}