Skip to content

Commit

Permalink
NetP: Fix list row colours (#2213)
Browse files Browse the repository at this point in the history
  • Loading branch information
@graeme
graeme authored Dec 1, 2023
1 parent c7f9c16 commit 6030cc3
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 86 deletions.
23 changes: 9 additions & 14 deletions DuckDuckGo/NetworkProtectionInviteView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ struct NetworkProtectionInviteView: View {
)
.frame(height: 44)
.padding(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
.background(Color.textFieldBackground)
.background(Color(designSystemColor: .surface))
.cornerRadius(10)
.disabled(model.shouldDisableTextField)
Button(UserText.inviteDialogContinueButton) {
Expand Down Expand Up @@ -104,25 +104,25 @@ private struct NetworkProtectionInviteMessageView<Content>: View where Content:
Text(messageData.title)
.daxTitle2()
.multilineTextAlignment(.center)
.foregroundColor(.textPrimary)
.foregroundColor(.init(designSystemColor: .textPrimary))
Text(messageData.message)
.daxBodyRegular()
.multilineTextAlignment(.center)
.foregroundColor(.textSecondary)
.foregroundColor(.init(designSystemColor: .textSecondary))
.padding(.bottom, 16)
interactiveContent()
Spacer()
Text(UserText.netPInviteOnlyMessage)
.foregroundColor(.textSecondary)
.foregroundColor(.init(designSystemColor: .textSecondary))
.daxFootnoteRegular()
.multilineTextAlignment(.center)
}
.padding(24)
.frame(minHeight: proxy.size.height)
.background(Color.viewBackground)
.background(Color(designSystemColor: .background))
}
}
.background(Color.viewBackground)
.background(Color(designSystemColor: .background))
}
}

Expand All @@ -137,14 +137,9 @@ extension AnyTransition {
static var slideFromRight: AnyTransition {
AnyTransition.asymmetric(
insertion: .move(edge: .trailing),
removal: .move(edge: .leading))}
}

private extension Color {
static let textPrimary = Color(designSystemColor: .textPrimary)
static let textSecondary = Color(designSystemColor: .textSecondary)
static let textFieldBackground = Color(designSystemColor: .surface)
static let viewBackground = Color(designSystemColor: .background)
removal: .move(edge: .leading)
)
}
}

import NetworkProtection
Expand Down
44 changes: 19 additions & 25 deletions DuckDuckGo/NetworkProtectionStatusView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,10 @@ struct NetworkProtectionStatusView: View {
VStack(alignment: .leading, spacing: 4) {
Text(UserText.netPStatusViewTitle)
.daxBodyRegular()
.foregroundColor(.textPrimary)
.foregroundColor(.init(designSystemColor: .textPrimary))
Text(statusModel.statusMessage)
.daxFootnoteRegular()
.foregroundColor(.textSecondary)
.foregroundColor(.init(designSystemColor: .textSecondary))
}

Toggle("", isOn: Binding(
Expand All @@ -72,13 +72,13 @@ struct NetworkProtectionStatusView: View {
}
))
.disabled(statusModel.shouldDisableToggle)
.toggleStyle(SwitchToggleStyle(tint: .controlColor))
.toggleStyle(SwitchToggleStyle(tint: .init(designSystemColor: .accent)))
}
.listRowBackground(Color.cellBackground)
} header: {
header()
}
.increaseHeaderProminence()
.listRowBackground(Color(designSystemColor: .surface))
}

@ViewBuilder
Expand All @@ -94,17 +94,17 @@ struct NetworkProtectionStatusView: View {
Text(statusModel.headerTitle)
.daxHeadline()
.multilineTextAlignment(.center)
.foregroundColor(.textPrimary)
.foregroundColor(.init(designSystemColor: .textPrimary))
Text(UserText.netPStatusHeaderMessage)
.daxFootnoteRegular()
.multilineTextAlignment(.center)
.foregroundColor(.textSecondary)
.foregroundColor(.init(designSystemColor: .textSecondary))
.padding(.bottom, 8)
}
.padding(.bottom, 4)
// Pads beyond the default header inset
.padding(.horizontal, -16)
.background(Color.viewBackground)
.background(Color(designSystemColor: .background))
Spacer(minLength: 0)
}
}
Expand All @@ -129,32 +129,34 @@ struct NetworkProtectionStatusView: View {
)
}
} header: {
Text(UserText.netPStatusViewConnectionDetails).foregroundColor(.textSecondary)
Text(UserText.netPStatusViewConnectionDetails).foregroundColor(.init(designSystemColor: .textSecondary))
}
.listRowBackground(Color(designSystemColor: .surface))
}

@ViewBuilder
private func settings() -> some View {
Section {
NavigationLink(UserText.netPVPNSettingsTitle, destination: NetworkProtectionVPNSettingsView())
.daxBodyRegular()
.foregroundColor(.textPrimary)
.foregroundColor(.init(designSystemColor: .textPrimary))
NavigationLink(UserText.netPVPNNotificationsTitle, destination: NetworkProtectionVPNNotificationsView())
.daxBodyRegular()
.foregroundColor(.textPrimary)
.foregroundColor(.init(designSystemColor: .textPrimary))
} header: {
Text(UserText.netPStatusViewSettingsSectionTitle).foregroundColor(.textSecondary)
Text(UserText.netPStatusViewSettingsSectionTitle).foregroundColor(.init(designSystemColor: .textSecondary))
} footer: {
inviteOnlyFooter()
}
.listRowBackground(Color(designSystemColor: .surface))
}

@ViewBuilder
private func inviteOnlyFooter() -> some View {
// Needs to be inlined like this for the markdown parsing to work
Text("\(UserText.netPInviteOnlyMessage) [\(UserText.netPStatusViewShareFeedback)](https://form.asana.com/?k=_wNLt6YcT5ILpQjDuW0Mxw&d=137249556945)")
.foregroundColor(.textSecondary)
.accentColor(Color.controlColor)
.foregroundColor(.init(designSystemColor: .textSecondary))
.accentColor(.init(designSystemColor: .accent))
.daxFootnoteRegular()
.padding(.top, 6)
}
Expand All @@ -176,7 +178,7 @@ private struct NetworkProtectionErrorView: View {
.daxBodyRegular()
.foregroundColor(.primary)
}
.listRowBackground(Color.cellBackground)
.listRowBackground(Color(designSystemColor: .accent))
}
}

Expand All @@ -190,22 +192,14 @@ private struct NetworkProtectionServerItemView: View {
Image(imageID)
Text(title)
.daxBodyRegular()
.foregroundColor(.textPrimary)
.foregroundColor(.init(designSystemColor: .textPrimary))
Spacer(minLength: 2)
Text(value)
.daxBodyRegular()
.foregroundColor(.textSecondary)
.foregroundColor(.init(designSystemColor: .textSecondary))
}
.listRowBackground(Color.cellBackground)
.listRowBackground(Color(designSystemColor: .surface))
}
}

private extension Color {
static let textPrimary = Color(designSystemColor: .textPrimary)
static let textSecondary = Color(designSystemColor: .textSecondary)
static let cellBackground = Color(designSystemColor: .surface)
static let viewBackground = Color(designSystemColor: .background)
static let controlColor = Color(designSystemColor: .accent)
}

#endif
27 changes: 12 additions & 15 deletions DuckDuckGo/NetworkProtectionVPNLocationView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,19 +52,20 @@ struct NetworkProtectionVPNLocationView: View {
}
}, label: {
Text(UserText.netPPreferredLocationNearest)
.foregroundStyle(Color.textPrimary)
.foregroundStyle(Color(designSystemColor: .textPrimary))
.daxBodyRegular()
}
)
} header: {
Text(UserText.netPVPNLocationRecommendedSectionTitle)
.foregroundStyle(Color.textPrimary)
.foregroundStyle(Color(designSystemColor: .textPrimary))
} footer: {
Text(UserText.netPVPNLocationRecommendedSectionFooter)
.foregroundStyle(Color.textSecondary)
.foregroundStyle(Color(designSystemColor: .textSecondary))
.daxFootnoteRegular()
.padding(.top, 6)
}
.listRowBackground(Color(designSystemColor: .surface))
}

@ViewBuilder
Expand All @@ -89,9 +90,10 @@ struct NetworkProtectionVPNLocationView: View {
}
} header: {
Text(UserText.netPVPNLocationAllCountriesSectionTitle)
.foregroundStyle(Color.textPrimary)
.foregroundStyle(Color(designSystemColor: .textPrimary))
}
.animation(.default, value: model.state.isLoading)
.listRowBackground(Color(designSystemColor: .surface))
}
}

Expand All @@ -116,11 +118,11 @@ private struct CountryItem: View {
VStack(alignment: .leading, spacing: 4) {
Text(itemModel.title)
.daxBodyRegular()
.foregroundStyle(Color.textPrimary)
.foregroundStyle(Color(designSystemColor: .textPrimary))
if let subtitle = itemModel.subtitle {
Text(subtitle)
.daxFootnoteRegular()
.foregroundStyle(Color.textSecondary)
.foregroundStyle(Color(designSystemColor: .textSecondary))
}
}
if itemModel.shouldShowPicker {
Expand All @@ -134,7 +136,8 @@ private struct CountryItem: View {
} label: {
Image(systemName: "ellipsis.circle")
.resizable()
.frame(width: 22, height: 22).tint(.textSecondary)
.frame(width: 22, height: 22)
.tint(.init(designSystemColor: .textSecondary))
}
}
}
Expand All @@ -154,7 +157,7 @@ private struct ChecklistItem<Content>: View where Content: View {
label: {
HStack(spacing: 12) {
Image(systemName: "checkmark")
.tint(.controlColor)
.tint(.init(designSystemColor: .accent))
.if(!isSelected) {
$0.hidden()
}
Expand Down Expand Up @@ -184,18 +187,12 @@ private struct MenuItem: View {
.if(!isSelected) {
$0.hidden()
}
.tint(.textPrimary)
.tint(Color(designSystemColor: .textPrimary))
}
}
)
.tint(Color(designSystemColor: .textPrimary))
}
}

private extension Color {
static let textPrimary = Color(designSystemColor: .textPrimary)
static let textSecondary = Color(designSystemColor: .textSecondary)
static let controlColor = Color(designSystemColor: .accent)
}

#endif
28 changes: 13 additions & 15 deletions DuckDuckGo/NetworkProtectionVPNNotificationsView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,37 +54,35 @@ struct NetworkProtectionVPNNotificationsView: View {
Button(UserText.netPTurnOnNotificationsButtonTitle) {
model.turnOnNotifications()
}
.foregroundColor(.controlColor)
.foregroundColor(.init(designSystemColor: .accent))
} footer: {
Text(UserText.netPTurnOnNotificationsSectionFooter)
.foregroundColor(.textSecondary)
.foregroundColor(.init(designSystemColor: .textSecondary))
.daxFootnoteRegular()
.padding(.top, 6)
}
.listRowBackground(Color(designSystemColor: .surface))
}

@ViewBuilder
private var authorizedView: some View {
Section {
Toggle(UserText.netPVPNAlertsToggleTitle, isOn: Binding(
get: { model.alertsEnabled },
set: model.didToggleAlerts(to:)
))
.toggleStyle(SwitchToggleStyle(tint: .controlColor))
Toggle(
UserText.netPVPNAlertsToggleTitle,
isOn: Binding(
get: { model.alertsEnabled },
set: model.didToggleAlerts(to:)
)
)
.toggleStyle(SwitchToggleStyle(tint: .init(designSystemColor: .accent)))
} footer: {
Text(UserText.netPVPNAlertsToggleSectionFooter)
.foregroundColor(.textSecondary)
.foregroundColor(.init(designSystemColor: .textSecondary))
.daxFootnoteRegular()
.padding(.top, 6)
}
.listRowBackground(Color(designSystemColor: .surface))
}
}

private extension Color {
static let textPrimary = Color(designSystemColor: .textPrimary)
static let textSecondary = Color(designSystemColor: .textSecondary)
static let cellBackground = Color(designSystemColor: .surface)
static let controlColor = Color(designSystemColor: .accent)
}

#endif
28 changes: 11 additions & 17 deletions DuckDuckGo/NetworkProtectionVPNSettingsView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,15 @@ struct NetworkProtectionVPNSettingsView: View {
VStack(alignment: .leading) {
Text(UserText.netPPreferredLocationSettingTitle)
.daxBodyRegular()
.foregroundColor(.textPrimary)
.foregroundColor(.init(designSystemColor: .textPrimary))
Text(viewModel.preferredLocation.title)
.daxFootnoteRegular()
.foregroundColor(.textSecondary)
.foregroundColor(.init(designSystemColor: .textSecondary))
}
}
}
}
.listRowBackground(Color(designSystemColor: .surface))
toggleSection(
text: UserText.netPExcludeLocalNetworksSettingTitle,
footerText: UserText.netPExcludeLocalNetworksSettingFooter
Expand All @@ -61,12 +62,13 @@ struct NetworkProtectionVPNSettingsView: View {
Section {
HStack(spacing: 16) {
Image("Info-Solid-24")
.foregroundColor(.icon)
.foregroundColor(.init(designSystemColor: .icons).opacity(0.3))
Text(UserText.netPSecureDNSSettingFooter)
.daxFootnoteRegular()
.foregroundColor(.textSecondary)
.foregroundColor(.init(designSystemColor: .textSecondary))
}
}
.listRowBackground(Color(designSystemColor: .surface))
}
}
.applyInsetGroupedListStyle()
Expand All @@ -80,30 +82,22 @@ struct NetworkProtectionVPNSettingsView: View {
VStack(alignment: .leading, spacing: 4) {
Text(text)
.daxBodyRegular()
.foregroundColor(.textPrimary)
.foregroundColor(.init(designSystemColor: .textPrimary))
.layoutPriority(1)
}

toggle()
.toggleStyle(SwitchToggleStyle(tint: .controlColor))
.toggleStyle(SwitchToggleStyle(tint: .init(designSystemColor: .accent)))
}
.listRowBackground(Color.cellBackground)
} footer: {
Text(footerText)
.foregroundColor(.textSecondary)
.accentColor(Color.controlColor)
.foregroundColor(.init(designSystemColor: .textSecondary))
.accentColor(Color(designSystemColor: .accent))
.daxFootnoteRegular()
.padding(.top, 6)
}
.listRowBackground(Color(designSystemColor: .surface))
}
}

private extension Color {
static let textPrimary = Color(designSystemColor: .textPrimary)
static let textSecondary = Color(designSystemColor: .textSecondary)
static let cellBackground = Color(designSystemColor: .surface)
static let controlColor = Color(designSystemColor: .accent)
static let icon = Color(designSystemColor: .icons).opacity(0.3)
}

#endif

0 comments on commit 6030cc3

Please sign in to comment.