Nucleic: Update Icon Design
This commit is contained in:
@@ -134,20 +134,22 @@ private struct StatCard: View {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/// A flame whose heat grows with the streak (mirrors the Mac StreakBadge).
|
/// A lightning bolt whose charge grows with the streak (mirrors the Mac StreakBadge).
|
||||||
struct StreakBadge: View {
|
struct StreakBadge: View {
|
||||||
let days: Int
|
let days: Int
|
||||||
private var intensity: Double { min(1, Double(max(0, days - 1)) / 20) }
|
private var intensity: Double { min(1, Double(max(0, days - 1)) / 20) }
|
||||||
|
|
||||||
var body: some View {
|
var body: some View {
|
||||||
HStack(spacing: 6) {
|
HStack(spacing: 6) {
|
||||||
Image(systemName: "flame.fill")
|
Image(systemName: "bolt.fill")
|
||||||
.font(.system(size: 18 + 8 * intensity))
|
.font(.system(size: 18 + 8 * intensity))
|
||||||
.foregroundStyle(
|
.foregroundStyle(
|
||||||
LinearGradient(colors: [
|
LinearGradient(colors: [
|
||||||
Color(hue: 0.03, saturation: 0.9, brightness: 1),
|
Color(hue: 0.55 - 0.05 * intensity, saturation: 0.5 + 0.2 * intensity, brightness: 1),
|
||||||
Color(hue: 0.10 + 0.04 * intensity, saturation: 0.9, brightness: 1),
|
Color(hue: 0.60, saturation: 0.85 + 0.15 * intensity, brightness: 1),
|
||||||
], startPoint: .top, endPoint: .bottom))
|
], startPoint: .top, endPoint: .bottom))
|
||||||
|
.shadow(color: Color(hue: 0.56, saturation: 0.85, brightness: 1).opacity(0.3 + 0.5 * intensity),
|
||||||
|
radius: 1 + 6 * intensity)
|
||||||
VStack(alignment: .leading, spacing: -2) {
|
VStack(alignment: .leading, spacing: -2) {
|
||||||
Text("\(days)").font(.headline.monospacedDigit())
|
Text("\(days)").font(.headline.monospacedDigit())
|
||||||
Text("day streak").font(.caption2).foregroundStyle(.secondary)
|
Text("day streak").font(.caption2).foregroundStyle(.secondary)
|
||||||
|
|||||||
Reference in New Issue
Block a user