Apply Emil Kowalski design across all screens
Near-monochrome palette (ink tokens), black primary buttons, spring animations, 0.5pt hairline dividers, shadow cards, squircle corners. Replaces all blue/coloured accents. Adds ButtonStyles component. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Robin Kutesa
@@ -6,147 +6,150 @@ struct LANTriggerSection: View {
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading, spacing: 8) {
|
||||
Text("AUTOMATION — LAN TRIGGER")
|
||||
.font(AppTheme.smallFont)
|
||||
.foregroundColor(AppTheme.textSecondary)
|
||||
.padding(.leading, 4)
|
||||
sectionLabel("AUTOMATION")
|
||||
|
||||
// Hero card — blue border, FIXED 210px height, strict top-down layout
|
||||
VStack(spacing: 0) {
|
||||
// Header band
|
||||
HStack {
|
||||
Image(systemName: "wifi")
|
||||
.font(.system(size: 14, weight: .medium))
|
||||
.foregroundColor(.white)
|
||||
Text("Auto-backup on home network")
|
||||
.font(.system(size: 14, weight: .semibold))
|
||||
.foregroundColor(.white)
|
||||
Spacer()
|
||||
Text(store.lanTriggerEnabled ? "On" : "Off")
|
||||
.font(.system(size: 12, weight: .bold))
|
||||
.foregroundColor(.white)
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 3)
|
||||
.background(store.lanTriggerEnabled ? Color.white.opacity(0.25) : Color.white.opacity(0.15))
|
||||
.clipShape(Capsule())
|
||||
}
|
||||
.padding(.horizontal, 14)
|
||||
.padding(.vertical, 10)
|
||||
.background(AppTheme.blue)
|
||||
|
||||
// Toggle row
|
||||
HStack {
|
||||
VStack(alignment: .leading, spacing: 2) {
|
||||
Text("Start when on trusted Wi-Fi")
|
||||
.font(.system(size: 14, weight: .medium))
|
||||
.foregroundColor(AppTheme.textPrimary)
|
||||
Text("Backup runs on SSID match")
|
||||
.font(.system(size: 12))
|
||||
.foregroundColor(AppTheme.textSecondary)
|
||||
// Master toggle row
|
||||
HStack(spacing: 12) {
|
||||
ZStack {
|
||||
RoundedRectangle(cornerRadius: 7, style: .continuous)
|
||||
.fill(store.lanTriggerEnabled ? AppTheme.ink : AppTheme.surfaceSunken)
|
||||
.frame(width: 28, height: 28)
|
||||
Image(systemName: "wifi")
|
||||
.font(.system(size: 12, weight: .medium))
|
||||
.foregroundStyle(store.lanTriggerEnabled ? .white : AppTheme.inkTertiary)
|
||||
}
|
||||
.animation(.spring(response: 0.25, dampingFraction: 0.8), value: store.lanTriggerEnabled)
|
||||
|
||||
VStack(alignment: .leading, spacing: 1) {
|
||||
Text("Auto-backup on home network")
|
||||
.font(AppTheme.headline())
|
||||
.foregroundStyle(AppTheme.ink)
|
||||
Text("Starts when a trusted Wi-Fi is joined")
|
||||
.font(AppTheme.caption())
|
||||
.foregroundStyle(AppTheme.inkTertiary)
|
||||
}
|
||||
|
||||
Spacer()
|
||||
|
||||
Toggle("", isOn: $store.lanTriggerEnabled)
|
||||
.labelsHidden()
|
||||
.tint(AppTheme.blue)
|
||||
.scaleEffect(0.85)
|
||||
.tint(AppTheme.ink)
|
||||
}
|
||||
.padding(.horizontal, 14)
|
||||
.padding(.top, 10)
|
||||
.padding(.bottom, 6)
|
||||
.padding(AppTheme.cardPad)
|
||||
|
||||
Divider().padding(.horizontal, 14)
|
||||
hairline
|
||||
|
||||
// Trusted networks
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
VStack(alignment: .leading, spacing: 2) {
|
||||
Text("TRUSTED NETWORKS")
|
||||
.font(.system(size: 10, weight: .semibold))
|
||||
.foregroundColor(AppTheme.textTertiary)
|
||||
.padding(.horizontal, 14)
|
||||
.padding(.top, 6)
|
||||
.font(AppTheme.micro(10))
|
||||
.foregroundStyle(AppTheme.inkTertiary)
|
||||
.padding(.horizontal, AppTheme.cardPad)
|
||||
.padding(.top, 10)
|
||||
|
||||
ForEach(store.trustedSSIDs, id: \.self) { ssid in
|
||||
HStack(spacing: 8) {
|
||||
HStack(spacing: 10) {
|
||||
Circle()
|
||||
.fill(ssid == lanMonitor.currentSSID ? AppTheme.green : AppTheme.textTertiary)
|
||||
.frame(width: 7, height: 7)
|
||||
Text(ssid == lanMonitor.currentSSID ? "Connected" : "Saved")
|
||||
.font(.system(size: 11))
|
||||
.foregroundColor(AppTheme.textTertiary)
|
||||
.frame(width: 54, alignment: .leading)
|
||||
.fill(ssid == lanMonitor.currentSSID ? AppTheme.positive : AppTheme.inkQuaternary)
|
||||
.frame(width: 6, height: 6)
|
||||
Text(ssid)
|
||||
.font(.system(size: 13, weight: .medium))
|
||||
.foregroundColor(AppTheme.textPrimary)
|
||||
.font(.system(size: 13, weight: .regular))
|
||||
.foregroundStyle(AppTheme.ink)
|
||||
if ssid == lanMonitor.currentSSID {
|
||||
Text("connected")
|
||||
.font(AppTheme.micro(10))
|
||||
.foregroundStyle(AppTheme.positive)
|
||||
}
|
||||
Spacer()
|
||||
Button {
|
||||
store.trustedSSIDs.removeAll { $0 == ssid }
|
||||
withAnimation(.spring(response: 0.25, dampingFraction: 0.8)) {
|
||||
store.trustedSSIDs.removeAll { $0 == ssid }
|
||||
}
|
||||
} label: {
|
||||
Image(systemName: "xmark")
|
||||
.font(.system(size: 11, weight: .medium))
|
||||
.foregroundColor(AppTheme.textTertiary)
|
||||
.foregroundStyle(AppTheme.inkTertiary)
|
||||
}
|
||||
}
|
||||
.padding(.horizontal, 14)
|
||||
.padding(.vertical, 2)
|
||||
.padding(.horizontal, AppTheme.cardPad)
|
||||
.padding(.vertical, 7)
|
||||
}
|
||||
|
||||
Button {
|
||||
Task {
|
||||
if let ssid = await lanMonitor.fetchCurrentSSID(),
|
||||
!store.trustedSSIDs.contains(ssid) {
|
||||
store.trustedSSIDs.append(ssid)
|
||||
withAnimation(.spring(response: 0.3, dampingFraction: 0.8)) {
|
||||
store.trustedSSIDs.append(ssid)
|
||||
}
|
||||
}
|
||||
}
|
||||
} label: {
|
||||
HStack(spacing: 6) {
|
||||
Image(systemName: "plus.circle.fill")
|
||||
.font(.system(size: 13))
|
||||
.foregroundColor(AppTheme.blue)
|
||||
Image(systemName: "plus")
|
||||
.font(.system(size: 11, weight: .semibold))
|
||||
Text("Add current network")
|
||||
.font(.system(size: 13, weight: .medium))
|
||||
.foregroundColor(AppTheme.blue)
|
||||
}
|
||||
.padding(.horizontal, 14)
|
||||
.padding(.vertical, 4)
|
||||
.foregroundStyle(AppTheme.inkSecondary)
|
||||
}
|
||||
.buttonStyle(ScaleButtonStyle())
|
||||
.padding(.horizontal, AppTheme.cardPad)
|
||||
.padding(.vertical, 8)
|
||||
}
|
||||
|
||||
Divider().padding(.horizontal, 14).padding(.top, 4)
|
||||
hairline
|
||||
|
||||
// Bottom options row
|
||||
// Delay picker
|
||||
HStack {
|
||||
HStack(spacing: 6) {
|
||||
Image(systemName: "timer")
|
||||
.font(.system(size: 12))
|
||||
.foregroundColor(AppTheme.textSecondary)
|
||||
Text("Wait before starting")
|
||||
.font(.system(size: 13))
|
||||
.foregroundColor(AppTheme.textPrimary)
|
||||
}
|
||||
Image(systemName: "timer")
|
||||
.font(.system(size: 13, weight: .regular))
|
||||
.foregroundStyle(AppTheme.inkSecondary)
|
||||
.frame(width: 20)
|
||||
Text("Wait before starting")
|
||||
.font(AppTheme.body())
|
||||
.foregroundStyle(AppTheme.ink)
|
||||
Spacer()
|
||||
Menu {
|
||||
ForEach([0, 15, 30, 60, 120], id: \.self) { sec in
|
||||
Button("\(sec)s") { store.startDelaySeconds = sec }
|
||||
Button("\(sec == 0 ? "Immediately" : "\(sec)s")") {
|
||||
store.startDelaySeconds = sec
|
||||
}
|
||||
}
|
||||
} label: {
|
||||
HStack(spacing: 4) {
|
||||
Text("\(store.startDelaySeconds)s")
|
||||
Text(store.startDelaySeconds == 0 ? "Immediately" : "\(store.startDelaySeconds)s")
|
||||
.font(.system(size: 13, weight: .medium))
|
||||
.foregroundColor(AppTheme.blue)
|
||||
Image(systemName: "chevron.right")
|
||||
.font(.system(size: 11))
|
||||
.foregroundColor(AppTheme.textTertiary)
|
||||
.foregroundStyle(AppTheme.inkSecondary)
|
||||
Image(systemName: "chevron.up.chevron.down")
|
||||
.font(.system(size: 10, weight: .medium))
|
||||
.foregroundStyle(AppTheme.inkQuaternary)
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding(.horizontal, 14)
|
||||
.padding(.vertical, 8)
|
||||
.padding(.horizontal, AppTheme.cardPad)
|
||||
.padding(.vertical, 12)
|
||||
}
|
||||
.frame(height: 210)
|
||||
.clipShape(RoundedRectangle(cornerRadius: AppTheme.cardCornerRadius))
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: AppTheme.cardCornerRadius)
|
||||
.stroke(AppTheme.lanBorder, lineWidth: 1.5)
|
||||
)
|
||||
.background(Color.white)
|
||||
.clipShape(RoundedRectangle(cornerRadius: AppTheme.radius, style: .continuous))
|
||||
.shadow(color: AppTheme.cardShadow, radius: 12, x: 0, y: 2)
|
||||
}
|
||||
}
|
||||
|
||||
private var hairline: some View {
|
||||
Rectangle()
|
||||
.fill(AppTheme.separator)
|
||||
.frame(height: 0.5)
|
||||
.padding(.leading, AppTheme.cardPad)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: — Shared section header
|
||||
func sectionLabel(_ text: String) -> some View {
|
||||
Text(text)
|
||||
.font(.system(size: 11, weight: .medium))
|
||||
.foregroundStyle(AppTheme.inkTertiary)
|
||||
.kerning(0.5)
|
||||
.padding(.leading, 4)
|
||||
}
|
||||
|
||||
@@ -8,101 +8,85 @@ struct SettingsView: View {
|
||||
Color.white.ignoresSafeArea()
|
||||
|
||||
ScrollView {
|
||||
VStack(spacing: AppTheme.sectionSpacing) {
|
||||
// LAN trigger hero section
|
||||
VStack(spacing: AppTheme.sectionGap) {
|
||||
LANTriggerSection()
|
||||
|
||||
// What to back up
|
||||
mediaSection
|
||||
|
||||
// Quiet hours
|
||||
quietHoursSection
|
||||
|
||||
// Notification section
|
||||
notificationSection
|
||||
|
||||
Spacer(minLength: 40)
|
||||
}
|
||||
.padding(.horizontal, 20)
|
||||
.padding(.horizontal, AppTheme.hPad)
|
||||
.padding(.top, 20)
|
||||
.padding(.bottom, 48)
|
||||
}
|
||||
}
|
||||
.navigationTitle("Settings")
|
||||
.navigationBarTitleDisplayMode(.inline)
|
||||
}
|
||||
|
||||
// MARK: Media section
|
||||
// MARK: — Media
|
||||
|
||||
private var mediaSection: some View {
|
||||
VStack(alignment: .leading, spacing: 8) {
|
||||
Text("WHAT TO BACK UP")
|
||||
.font(AppTheme.smallFont)
|
||||
.foregroundColor(AppTheme.textSecondary)
|
||||
.padding(.leading, 4)
|
||||
sectionLabel("WHAT TO BACK UP")
|
||||
|
||||
VStack(spacing: 0) {
|
||||
ToggleRow(icon: "photo", title: "Photos",
|
||||
isOn: $store.backupFilter.includePhotos)
|
||||
Divider().padding(.leading, 44)
|
||||
hairline
|
||||
ToggleRow(icon: "video", title: "Videos",
|
||||
isOn: $store.backupFilter.includeVideos)
|
||||
Divider().padding(.leading, 44)
|
||||
hairline
|
||||
ToggleRow(icon: "camera.viewfinder", title: "Screenshots",
|
||||
isOn: $store.backupFilter.includeScreenshots)
|
||||
Divider().padding(.leading, 44)
|
||||
hairline
|
||||
ToggleRow(icon: "rays", title: "RAW",
|
||||
isOn: $store.backupFilter.includeRAW)
|
||||
Divider().padding(.leading, 44)
|
||||
hairline
|
||||
ToggleRow(icon: "doc.badge.clock", title: "New files only",
|
||||
subtitle: "Skip files already on NAS",
|
||||
isOn: $store.backupFilter.newFilesOnly)
|
||||
}
|
||||
.padding(.horizontal, 16)
|
||||
.background(Color.white)
|
||||
.clipShape(RoundedRectangle(cornerRadius: AppTheme.cardCornerRadius))
|
||||
.overlay(RoundedRectangle(cornerRadius: AppTheme.cardCornerRadius).stroke(AppTheme.cardBorder))
|
||||
.clipShape(RoundedRectangle(cornerRadius: AppTheme.radius, style: .continuous))
|
||||
.shadow(color: AppTheme.cardShadow, radius: 12, x: 0, y: 2)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: Quiet hours
|
||||
// MARK: — Quiet hours
|
||||
|
||||
private var quietHoursSection: some View {
|
||||
VStack(alignment: .leading, spacing: 8) {
|
||||
Text("QUIET HOURS")
|
||||
.font(AppTheme.smallFont)
|
||||
.foregroundColor(AppTheme.textSecondary)
|
||||
.padding(.leading, 4)
|
||||
sectionLabel("QUIET HOURS")
|
||||
|
||||
VStack(spacing: 0) {
|
||||
ToggleRow(icon: "moon.fill", title: "Quiet hours",
|
||||
ToggleRow(icon: "moon", title: "Quiet hours",
|
||||
subtitle: "No auto-backup during this window",
|
||||
isOn: $store.quietHoursEnabled)
|
||||
|
||||
if store.quietHoursEnabled {
|
||||
Divider().padding(.leading, 44)
|
||||
hairline
|
||||
timePickerRow(label: "Start", hour: $store.quietHoursStart)
|
||||
Divider().padding(.leading, 44)
|
||||
hairline
|
||||
timePickerRow(label: "End", hour: $store.quietHoursEnd)
|
||||
}
|
||||
|
||||
Divider().padding(.leading, 44)
|
||||
ToggleRow(icon: "bolt.fill", title: "Only while charging",
|
||||
hairline
|
||||
ToggleRow(icon: "bolt", title: "Only while charging",
|
||||
subtitle: "Preserve battery on large libraries",
|
||||
isOn: $store.chargingOnlyMode)
|
||||
}
|
||||
.padding(.horizontal, 16)
|
||||
.background(Color.white)
|
||||
.clipShape(RoundedRectangle(cornerRadius: AppTheme.cardCornerRadius))
|
||||
.overlay(RoundedRectangle(cornerRadius: AppTheme.cardCornerRadius).stroke(AppTheme.cardBorder))
|
||||
.clipShape(RoundedRectangle(cornerRadius: AppTheme.radius, style: .continuous))
|
||||
.shadow(color: AppTheme.cardShadow, radius: 12, x: 0, y: 2)
|
||||
.animation(.spring(response: 0.3, dampingFraction: 0.8), value: store.quietHoursEnabled)
|
||||
}
|
||||
}
|
||||
|
||||
private func timePickerRow(label: String, hour: Binding<Int>) -> some View {
|
||||
HStack {
|
||||
Text(label)
|
||||
.font(AppTheme.bodyFont)
|
||||
.foregroundColor(AppTheme.textPrimary)
|
||||
.frame(width: 80, alignment: .leading)
|
||||
.font(AppTheme.body())
|
||||
.foregroundStyle(AppTheme.ink)
|
||||
Spacer()
|
||||
Picker(label, selection: hour) {
|
||||
ForEach(0..<24, id: \.self) { h in
|
||||
@@ -110,47 +94,53 @@ struct SettingsView: View {
|
||||
}
|
||||
}
|
||||
.pickerStyle(.menu)
|
||||
.tint(AppTheme.blue)
|
||||
.tint(AppTheme.inkSecondary)
|
||||
}
|
||||
.padding(.vertical, 8)
|
||||
.padding(.horizontal, AppTheme.cardPad)
|
||||
.padding(.vertical, 12)
|
||||
}
|
||||
|
||||
// MARK: Notifications
|
||||
// MARK: — Notifications
|
||||
|
||||
private var notificationSection: some View {
|
||||
VStack(alignment: .leading, spacing: 8) {
|
||||
Text("NOTIFICATIONS")
|
||||
.font(AppTheme.smallFont)
|
||||
.foregroundColor(AppTheme.textSecondary)
|
||||
.padding(.leading, 4)
|
||||
sectionLabel("NOTIFICATIONS")
|
||||
|
||||
VStack(spacing: 0) {
|
||||
staticRow(icon: "bell.fill", title: "On start", value: "Off")
|
||||
Divider().padding(.leading, 44)
|
||||
staticRow(icon: "checkmark.circle.fill", title: "On complete", value: "On")
|
||||
Divider().padding(.leading, 44)
|
||||
staticRow(icon: "exclamationmark.triangle.fill", title: "On errors", value: "On")
|
||||
notifRow(icon: "bell", title: "On start", value: "Off")
|
||||
hairline
|
||||
notifRow(icon: "checkmark.circle", title: "On complete", value: "On")
|
||||
hairline
|
||||
notifRow(icon: "exclamationmark.triangle", title: "On errors", value: "On")
|
||||
}
|
||||
.padding(.horizontal, 16)
|
||||
.background(Color.white)
|
||||
.clipShape(RoundedRectangle(cornerRadius: AppTheme.cardCornerRadius))
|
||||
.overlay(RoundedRectangle(cornerRadius: AppTheme.cardCornerRadius).stroke(AppTheme.cardBorder))
|
||||
.clipShape(RoundedRectangle(cornerRadius: AppTheme.radius, style: .continuous))
|
||||
.shadow(color: AppTheme.cardShadow, radius: 12, x: 0, y: 2)
|
||||
}
|
||||
}
|
||||
|
||||
private func staticRow(icon: String, title: String, value: String) -> some View {
|
||||
HStack {
|
||||
private func notifRow(icon: String, title: String, value: String) -> some View {
|
||||
HStack(spacing: 12) {
|
||||
Image(systemName: icon)
|
||||
.foregroundColor(AppTheme.blue)
|
||||
.frame(width: 28)
|
||||
.font(.system(size: 14, weight: .regular))
|
||||
.foregroundStyle(AppTheme.inkSecondary)
|
||||
.frame(width: 20)
|
||||
Text(title)
|
||||
.font(AppTheme.bodyFont)
|
||||
.foregroundColor(AppTheme.textPrimary)
|
||||
.font(AppTheme.body())
|
||||
.foregroundStyle(AppTheme.ink)
|
||||
Spacer()
|
||||
Text(value)
|
||||
.font(AppTheme.bodyFont)
|
||||
.foregroundColor(AppTheme.textSecondary)
|
||||
.font(AppTheme.caption())
|
||||
.foregroundStyle(AppTheme.inkTertiary)
|
||||
}
|
||||
.padding(.vertical, 12)
|
||||
.padding(.horizontal, AppTheme.cardPad)
|
||||
.padding(.vertical, 14)
|
||||
}
|
||||
|
||||
private var hairline: some View {
|
||||
Rectangle()
|
||||
.fill(AppTheme.separator)
|
||||
.frame(height: 0.5)
|
||||
.padding(.leading, AppTheme.cardPad)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user