kutesir/Kisani
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Match ring tracks and stats to HTML prototype exactly

Browse Source 
- Ring tracks: #c2c2c2 → #ebebeb (hairline, nearly invisible like the prototype)
- Middle ring: #9e9e9e → #c8c8c8 (lighter, matches HTML)
- Outer arc: lineWidth 1.5 → 1, glow softened to match prototype subtlety
- Stats: remove card background, inline plain layout with #ebebeb dividers
- Stats value: .semibold → .light (font-weight:300), letter-spacing tightened
- Stats label: size 9 → 8pt SF Mono, tracking 1.0 (matches HTML 0.12em)

Co-Authored-By: Kutesir <kutesir@provoc.ug>
Co-Authored-By: Sentry <sentry@provoc.ug>
This commit is contained in:
Robin Kutesa
2026-05-20 19:55:23 +03:00
parent c96f28cd06
commit 92541b8d7e
1 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
Features/Backup/BackupView.swift
View File

@@ -309,45 +309,50 @@ struct BackupView: View {
label: "NAS",
color: AppTheme.interactive
)
thinDivider
statDivider
compactStat(
"\(statusService.snapshot.phoneTotal)",
label: "IPHONE",
label: "iPhone",
color: AppTheme.inkSecondary
)
thinDivider
statDivider
compactStat(
"\(notBackedUpDisplayCount)",
label: "PENDING",
label: "Pending",
color: Color(red: 1.0, green: 0.62, blue: 0.0)
)
thinDivider
statDivider
compactStat(
"\(alreadySafeDisplayCount)",
label: "SAFE",
label: "Safe",
color: AppTheme.positive
)
}
.frame(height: 48)
.background(AppTheme.surfaceSunken.opacity(0.85))
.clipShape(RoundedRectangle(cornerRadius: 14, style: .continuous))
.padding(.vertical, 4)
}
private func compactStat(_ value: String, label: String, color: Color) -> some View {
VStack(spacing: 2) {
VStack(spacing: 3) {
Text(value)
.font(.system(size: 15, weight: .semibold))
.font(.system(size: 15, weight: .light))
.foregroundStyle(color)
.monospacedDigit()
.kerning(-0.5)
Text(label)
.font(.system(size: 9, weight: .regular))
.font(.system(size: 8, weight: .regular, design: .monospaced))
.foregroundStyle(AppTheme.inkQuaternary)
.tracking(0.2)
.tracking(1.0)
}
.frame(maxWidth: .infinity)
.padding(.vertical, 6)
}
private var statDivider: some View {
Rectangle()
.fill(Color(red: 0.922, green: 0.922, blue: 0.922))
.frame(width: 1, height: 22)
}
private var thinDivider: some View {
Rectangle()
.fill(AppTheme.separator.opacity(0.5))
@@ -997,7 +1002,7 @@ private struct KisaniRingView: View {
let innerProgress: CGFloat
let innerColor: Color
private let track = Color(red: 0.76, green: 0.76, blue: 0.76)
private let track = Color(red: 0.922, green: 0.922, blue: 0.922) // #ebebeb
private let nasArc = Color(red: 0.42, green: 0.52, blue: 0.68)
var body: some View {
@@ -1006,14 +1011,14 @@ private struct KisaniRingView: View {
Circle().stroke(track, lineWidth: 1).padding(10)
// Outer NAS progress (blue-slate + glow)
Circle().trim(from: 0, to: outerProgress)
.stroke(nasArc, style: StrokeStyle(lineWidth: 1.5, lineCap: .round))
.shadow(color: nasArc.opacity(0.65), radius: 7, x: 0, y: 0)
.stroke(nasArc, style: StrokeStyle(lineWidth: 1, lineCap: .round))
.shadow(color: nasArc.opacity(0.55), radius: 5, x: 0, y: 0)
.rotationEffect(.degrees(-90))
.padding(10)
.animation(.spring(response: 0.7, dampingFraction: 0.8), value: outerProgress)
// Middle static ring
Circle().stroke(Color(red: 0.62, green: 0.62, blue: 0.62), lineWidth: 1).padding(24)
// Middle static ring — #c8c8c8
Circle().stroke(Color(red: 0.784, green: 0.784, blue: 0.784), lineWidth: 1).padding(24)
// Inner track
Circle().stroke(track, lineWidth: 1.5).padding(38)