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

Match page 1 storage layout to design — larger card, black button

Browse Source 
Stats card: 26pt semibold values, 18pt corners, full-width gray card
with hairline dividers. Legend centered. HOLD TO CLEAN button is
full-width black (58pt tall, 18pt radius) replacing PrimaryButtonStyle.
storageStat padding/font updated to match screenshot proportions.

Co-Authored-By: Kutesir <kutesir@provoc.ug>
Co-Authored-By: Sentry <sentry@provoc.ug>
This commit is contained in:
Robin Kutesa
2026-05-21 13:51:38 +03:00
parent 0fd025de3e
commit 93682cb72c
1 changed files with 31 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
Features/Backup/BackupView.swift
View File

@@ -857,40 +857,51 @@ struct BackupView: View {
@ViewBuilder
private var page1BelowContent: some View {
// 3-col stats
// Storage stats card
HStack(spacing: 0) {
storageStat(String(format: "%.0f GB", deviceUsedGB), label: "USED",
color: Color(red: 1.0, green: 0.58, blue: 0.0))
thinDivider
Rectangle()
.fill(AppTheme.separator.opacity(0.35))
.frame(width: 0.5)
.padding(.vertical, 14)
storageStat(String(format: "%.0f GB", deviceFreeGB), label: "FREE",
color: AppTheme.inkSecondary)
thinDivider
Rectangle()
.fill(AppTheme.separator.opacity(0.35))
.frame(width: 0.5)
.padding(.vertical, 14)
storageStat(String(format: "%.1f GB", junkGB), label: "JUNK",
color: AppTheme.positive)
}
.frame(height: 48)
.background(AppTheme.surfaceSunken.opacity(0.85))
.clipShape(RoundedRectangle(cornerRadius: 14, style: .continuous))
.frame(maxWidth: .infinity)
.background(AppTheme.surfaceSunken)
.clipShape(RoundedRectangle(cornerRadius: 18, style: .continuous))
.padding(.horizontal, AppTheme.hPad)
.padding(.bottom, 12)
.padding(.bottom, 18)
// Legend
HStack(spacing: 16) {
HStack(spacing: 20) {
storageLegend(color: Color(red: 1.0, green: 0.58, blue: 0.0), label: "used")
storageLegend(color: AppTheme.positive, label: "safe to delete")
storageLegend(color: AppTheme.destructive, label: "junk")
}
.frame(maxWidth: .infinity)
.padding(.horizontal, AppTheme.hPad)
.padding(.bottom, 20)
Spacer(minLength: 16).frame(maxHeight: 40)
.padding(.bottom, 36)
// HOLD TO CLEAN button
Button(action: { showCleanConfirm = true }) {
Text("HOLD TO CLEAN")
.font(.system(size: 10, weight: .medium, design: .monospaced))
.font(.system(size: 13, weight: .medium, design: .monospaced))
.tracking(2)
.foregroundStyle(.white)
.frame(maxWidth: .infinity)
.frame(height: 58)
.background(Color(red: 0.08, green: 0.08, blue: 0.08))
.clipShape(RoundedRectangle(cornerRadius: 18, style: .continuous))
}
.buttonStyle(PrimaryButtonStyle())
.buttonStyle(.plain)
.padding(.horizontal, AppTheme.hPad)
.simultaneousGesture(
LongPressGesture(minimumDuration: 0.8).onEnded { _ in showCleanConfirm = true }
@@ -900,7 +911,8 @@ struct BackupView: View {
.font(.system(size: 9, weight: .regular, design: .monospaced))
.foregroundStyle(AppTheme.inkTertiary)
.tracking(1.5)
.padding(.top, 6)
.frame(maxWidth: .infinity)
.padding(.top, 10)
.padding(.bottom, 8)
}
@@ -967,18 +979,19 @@ struct BackupView: View {
// MARK: — Storage helpers
private func storageStat(_ value: String, label: String, color: Color) -> some View {
VStack(spacing: 2) {
VStack(spacing: 5) {
Text(value)
.font(.system(size: 15, weight: .semibold))
.font(.system(size: 26, weight: .semibold))
.foregroundStyle(color)
.monospacedDigit()
.kerning(-0.5)
Text(label)
.font(.system(size: 9, weight: .regular, design: .monospaced))
.foregroundStyle(AppTheme.inkQuaternary)
.tracking(0.5)
.tracking(1.5)
}
.frame(maxWidth: .infinity)
.padding(.vertical, 6)
.padding(.vertical, 18)
}
private func storageLegend(color: Color, label: String) -> some View {