Implement custom 5-color design system across entire iOS app
Apply consistent branding colors (BlueGreen, Cerulean, BrightAmber, PrimaryScarlet, cream backgrounds) to all screens, components, buttons, icons, and text throughout the app. Update all Form/List views with proper list row backgrounds to ensure visual consistency with card-based layouts. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Trey t
@@ -99,7 +99,7 @@ struct AllTasksView: View {
|
||||
@ViewBuilder
|
||||
private var mainContent: some View {
|
||||
ZStack {
|
||||
Color(.systemGroupedBackground)
|
||||
Color.appBackgroundPrimary
|
||||
.ignoresSafeArea()
|
||||
|
||||
if hasNoTasks && isLoadingTasks {
|
||||
@@ -113,18 +113,19 @@ struct AllTasksView: View {
|
||||
// Empty state with big button
|
||||
VStack(spacing: 24) {
|
||||
Spacer()
|
||||
|
||||
|
||||
Image(systemName: "checklist")
|
||||
.font(.system(size: 64))
|
||||
.foregroundStyle(.blue.opacity(0.6))
|
||||
|
||||
.foregroundStyle(Color.appPrimary.opacity(0.6))
|
||||
|
||||
Text("No tasks yet")
|
||||
.font(.title2)
|
||||
.fontWeight(.semibold)
|
||||
|
||||
.foregroundColor(Color.appTextPrimary)
|
||||
|
||||
Text("Create your first task to get started")
|
||||
.font(.body)
|
||||
.foregroundColor(.secondary)
|
||||
.foregroundColor(Color.appTextSecondary)
|
||||
.multilineTextAlignment(.center)
|
||||
|
||||
Button(action: {
|
||||
@@ -147,7 +148,7 @@ struct AllTasksView: View {
|
||||
if residenceViewModel.myResidences?.residences.isEmpty ?? true {
|
||||
Text("Add a property first from the Residences tab")
|
||||
.font(.caption)
|
||||
.foregroundColor(.red)
|
||||
.foregroundColor(Color.appError)
|
||||
}
|
||||
|
||||
Spacer()
|
||||
@@ -216,6 +217,8 @@ struct AllTasksView: View {
|
||||
}
|
||||
}
|
||||
}
|
||||
.scrollContentBackground(.hidden)
|
||||
.background(Color.appBackgroundPrimary)
|
||||
.navigationTitle("All Tasks")
|
||||
.navigationBarTitleDisplayMode(.inline)
|
||||
.toolbar {
|
||||
|
||||
@@ -52,6 +52,7 @@ struct CompleteTaskView: View {
|
||||
} header: {
|
||||
Text("Task Details")
|
||||
}
|
||||
.listRowBackground(Color.appBackgroundSecondary)
|
||||
|
||||
// Contractor Selection Section
|
||||
Section {
|
||||
@@ -89,6 +90,7 @@ struct CompleteTaskView: View {
|
||||
} footer: {
|
||||
Text("Select a contractor if they completed this work, or leave blank for manual entry.")
|
||||
}
|
||||
.listRowBackground(Color.appBackgroundSecondary)
|
||||
|
||||
// Completion Details Section
|
||||
Section {
|
||||
@@ -117,6 +119,7 @@ struct CompleteTaskView: View {
|
||||
} footer: {
|
||||
Text("Add any additional details about completing this task.")
|
||||
}
|
||||
.listRowBackground(Color.appBackgroundSecondary)
|
||||
|
||||
// Notes Section
|
||||
Section {
|
||||
@@ -132,6 +135,7 @@ struct CompleteTaskView: View {
|
||||
} footer: {
|
||||
Text("Optional notes about the work completed.")
|
||||
}
|
||||
.listRowBackground(Color.appBackgroundSecondary)
|
||||
|
||||
// Rating Section
|
||||
Section {
|
||||
@@ -165,6 +169,7 @@ struct CompleteTaskView: View {
|
||||
} footer: {
|
||||
Text("Rate the quality of work from 1 to 5 stars.")
|
||||
}
|
||||
.listRowBackground(Color.appBackgroundSecondary)
|
||||
|
||||
// Images Section
|
||||
Section {
|
||||
@@ -175,7 +180,7 @@ struct CompleteTaskView: View {
|
||||
}) {
|
||||
Label("Take Photo", systemImage: "camera")
|
||||
.frame(maxWidth: .infinity)
|
||||
.foregroundStyle(.blue)
|
||||
.foregroundStyle(Color.appPrimary)
|
||||
}
|
||||
.buttonStyle(.bordered)
|
||||
|
||||
@@ -187,7 +192,7 @@ struct CompleteTaskView: View {
|
||||
) {
|
||||
Label("Library", systemImage: "photo.on.rectangle.angled")
|
||||
.frame(maxWidth: .infinity)
|
||||
.foregroundStyle(.blue)
|
||||
.foregroundStyle(Color.appPrimary)
|
||||
}
|
||||
.buttonStyle(.bordered)
|
||||
}
|
||||
@@ -228,6 +233,7 @@ struct CompleteTaskView: View {
|
||||
} footer: {
|
||||
Text("Add up to 5 photos documenting the completed work.")
|
||||
}
|
||||
.listRowBackground(Color.appBackgroundSecondary)
|
||||
|
||||
// Complete Button Section
|
||||
Section {
|
||||
@@ -243,11 +249,14 @@ struct CompleteTaskView: View {
|
||||
.frame(maxWidth: .infinity)
|
||||
.fontWeight(.semibold)
|
||||
}
|
||||
.listRowBackground(isSubmitting ? Color.gray : Color.green)
|
||||
.foregroundStyle(.white)
|
||||
.listRowBackground(isSubmitting ? Color.gray : Color.appPrimary)
|
||||
.foregroundStyle(Color.appTextOnPrimary)
|
||||
.disabled(isSubmitting)
|
||||
}
|
||||
}
|
||||
.listStyle(.plain)
|
||||
.scrollContentBackground(.hidden)
|
||||
.background(Color.appBackgroundPrimary)
|
||||
.navigationTitle("Complete Task")
|
||||
.navigationBarTitleDisplayMode(.inline)
|
||||
.toolbar {
|
||||
@@ -397,7 +406,7 @@ struct ContractorPickerView: View {
|
||||
Spacer()
|
||||
if selectedContractor == nil {
|
||||
Image(systemName: "checkmark")
|
||||
.foregroundStyle(.blue)
|
||||
.foregroundStyle(Color.appPrimary)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -411,7 +420,7 @@ struct ContractorPickerView: View {
|
||||
}
|
||||
} else if let errorMessage = contractorViewModel.errorMessage {
|
||||
Text(errorMessage)
|
||||
.foregroundStyle(.red)
|
||||
.foregroundStyle(Color.appError)
|
||||
.font(.caption)
|
||||
} else {
|
||||
ForEach(contractorViewModel.contractors, id: \.id) { contractor in
|
||||
@@ -445,7 +454,7 @@ struct ContractorPickerView: View {
|
||||
|
||||
if selectedContractor?.id == contractor.id {
|
||||
Image(systemName: "checkmark")
|
||||
.foregroundStyle(.blue)
|
||||
.foregroundStyle(Color.appPrimary)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -107,15 +107,16 @@ struct TaskFormView: View {
|
||||
if !residenceError.isEmpty {
|
||||
Text(residenceError)
|
||||
.font(.caption)
|
||||
.foregroundColor(.red)
|
||||
.foregroundColor(Color.appError)
|
||||
}
|
||||
} header: {
|
||||
Text("Property")
|
||||
} footer: {
|
||||
Text("Required")
|
||||
.font(.caption)
|
||||
.foregroundColor(.red)
|
||||
.foregroundColor(Color.appError)
|
||||
}
|
||||
.listRowBackground(Color.appBackgroundSecondary)
|
||||
}
|
||||
|
||||
Section {
|
||||
@@ -125,7 +126,7 @@ struct TaskFormView: View {
|
||||
if !titleError.isEmpty {
|
||||
Text(titleError)
|
||||
.font(.caption)
|
||||
.foregroundColor(.red)
|
||||
.foregroundColor(Color.appError)
|
||||
}
|
||||
|
||||
TextField("Description (optional)", text: $description, axis: .vertical)
|
||||
@@ -136,8 +137,9 @@ struct TaskFormView: View {
|
||||
} footer: {
|
||||
Text("Required: Title")
|
||||
.font(.caption)
|
||||
.foregroundColor(.red)
|
||||
.foregroundColor(Color.appError)
|
||||
}
|
||||
.listRowBackground(Color.appBackgroundSecondary)
|
||||
|
||||
Section {
|
||||
Picker("Category", selection: $selectedCategory) {
|
||||
@@ -151,8 +153,9 @@ struct TaskFormView: View {
|
||||
} footer: {
|
||||
Text("Required")
|
||||
.font(.caption)
|
||||
.foregroundColor(.red)
|
||||
.foregroundColor(Color.appError)
|
||||
}
|
||||
.listRowBackground(Color.appBackgroundSecondary)
|
||||
|
||||
Section {
|
||||
Picker("Frequency", selection: $selectedFrequency) {
|
||||
@@ -174,8 +177,9 @@ struct TaskFormView: View {
|
||||
} footer: {
|
||||
Text("Required: Frequency")
|
||||
.font(.caption)
|
||||
.foregroundColor(.red)
|
||||
.foregroundColor(Color.appError)
|
||||
}
|
||||
.listRowBackground(Color.appBackgroundSecondary)
|
||||
|
||||
Section {
|
||||
Picker("Priority", selection: $selectedPriority) {
|
||||
@@ -196,21 +200,24 @@ struct TaskFormView: View {
|
||||
} footer: {
|
||||
Text("Required: Both Priority and Status")
|
||||
.font(.caption)
|
||||
.foregroundColor(.red)
|
||||
.foregroundColor(Color.appError)
|
||||
}
|
||||
.listRowBackground(Color.appBackgroundSecondary)
|
||||
|
||||
Section(header: Text("Cost")) {
|
||||
TextField("Estimated Cost (optional)", text: $estimatedCost)
|
||||
.keyboardType(.decimalPad)
|
||||
.focused($focusedField, equals: .estimatedCost)
|
||||
}
|
||||
.listRowBackground(Color.appBackgroundSecondary)
|
||||
|
||||
if let errorMessage = viewModel.errorMessage {
|
||||
Section {
|
||||
Text(errorMessage)
|
||||
.foregroundColor(.red)
|
||||
.foregroundColor(Color.appError)
|
||||
.font(.caption)
|
||||
}
|
||||
.listRowBackground(Color.appBackgroundSecondary)
|
||||
}
|
||||
}
|
||||
.disabled(isLoadingLookups)
|
||||
@@ -221,12 +228,15 @@ struct TaskFormView: View {
|
||||
ProgressView()
|
||||
.scaleEffect(1.5)
|
||||
Text("Loading...")
|
||||
.foregroundColor(.secondary)
|
||||
.foregroundColor(Color.appTextSecondary)
|
||||
}
|
||||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||||
.background(Color(uiColor: .systemBackground).opacity(0.8))
|
||||
.background(Color.appBackgroundPrimary.opacity(0.8))
|
||||
}
|
||||
}
|
||||
.listStyle(.plain)
|
||||
.scrollContentBackground(.hidden)
|
||||
.background(Color.appBackgroundPrimary)
|
||||
.navigationTitle(isEditMode ? "Edit Task" : "Add Task")
|
||||
.navigationBarTitleDisplayMode(.inline)
|
||||
.toolbar {
|
||||
|
||||
Reference in New Issue
Block a user