Redesign Connect flow with step-based UX and matching logo
Replace the SF Symbol server.rack with the custom KisaniLogoMark extracted into a shared component used by both ConnectView and BackupView. Introduce ConnectStep enum (credentials → folder → ready) in ConnectViewModel. The primary CTA changes label and colour at each step: "Connect" → "Select Destination" → "Get Started". The folder row animates in only after successful authentication; its border goes green once a valid path is chosen. Status message updates live with the current step. Submitting the password field triggers verify(). Rename project.yml name to Kisani so xcodegen produces Kisani.xcodeproj. Co-Authored-By: Kutesir <kutesir@provoc.ug> Co-Authored-By: Sentry <sentry@provoc.ug>
This commit is contained in:
35
Shared/Components/KisaniLogoMark.swift
Normal file
35
Shared/Components/KisaniLogoMark.swift
Normal file
@@ -0,0 +1,35 @@
|
||||
import SwiftUI
|
||||
|
||||
struct KisaniLogoMark: View {
|
||||
var size: CGFloat = 66
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 0) {
|
||||
driveRow
|
||||
AppTheme.ink.frame(height: 1.5)
|
||||
driveRow
|
||||
AppTheme.ink.frame(height: 1.5)
|
||||
driveRow
|
||||
}
|
||||
.clipShape(RoundedRectangle(cornerRadius: size * 0.167, style: .continuous))
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: size * 0.167, style: .continuous)
|
||||
.strokeBorder(AppTheme.ink, lineWidth: 2.5)
|
||||
)
|
||||
.frame(width: size, height: size)
|
||||
.shadow(color: .black.opacity(0.05), radius: 10, x: 0, y: 2)
|
||||
}
|
||||
|
||||
private var driveRow: some View {
|
||||
HStack(spacing: 0) {
|
||||
Spacer()
|
||||
Circle()
|
||||
.fill(AppTheme.ink)
|
||||
.frame(width: size * 0.106, height: size * 0.106)
|
||||
.padding(.trailing, size * 0.106)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.frame(height: size * 0.273)
|
||||
.background(AppTheme.surfaceRaised)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user