Adopt the new start chat button design. (#4013)

* Update compound and handle plain to tertiary/textLink button style updates.

* Update the start chat button to use the right icon/style.

* Update preview snapshots.

* Fix remaining snapshots.
This commit is contained in:
Doug
2025-04-11 17:09:57 +01:00
committed by GitHub
parent 511c4d7bf7
commit a5d94a0219
176 changed files with 385 additions and 363 deletions
@@ -39,7 +39,7 @@ struct AppLockSetupPINScreen: View {
Button(L10n.screenAppLockForgotPin) {
context.send(viewAction: .forgotPIN)
}
.buttonStyle(.compound(.plain))
.buttonStyle(.compound(.tertiary, size: .medium))
}
}
.padding(.horizontal, 16)
@@ -5,6 +5,7 @@
// Please see LICENSE files in the repository root for full details.
//
import Compound
import SwiftUI
/// The screen shown at the beginning of the onboarding flow.
@@ -105,9 +106,8 @@ struct AuthenticationStartScreen: View {
if context.viewState.showCreateAccountButton {
Button { context.send(viewAction: .register) } label: {
Text(L10n.screenCreateAccountTitle)
.padding(14)
}
.buttonStyle(.compound(.plain))
.buttonStyle(.compound(.tertiary))
}
}
.padding(.horizontal, verticalSizeClass == .compact ? 128 : 24)
@@ -167,7 +167,7 @@ private struct PollFormOptionRow: View {
CompoundIcon(\.delete)
}
.disabled(!canDeleteItem)
.buttonStyle(.compound(.plain))
.buttonStyle(.compound(.textLink))
.accessibilityLabel(L10n.actionRemove)
}
@@ -103,13 +103,10 @@ struct TimelineMediaPreviewRedactConfirmationView: View {
}
.buttonStyle(.compound(.primary))
Button {
Button(L10n.actionCancel) {
dismiss()
} label: {
Text(L10n.actionCancel)
.padding(.vertical, 14)
}
.buttonStyle(.compound(.plain))
.buttonStyle(.compound(.tertiary))
}
.padding(.bottom, 16)
.padding(.horizontal, 16)
@@ -163,8 +163,9 @@ struct HomeScreen: View {
Button {
context.send(viewAction: .startChat)
} label: {
CompoundIcon(\.compose)
CompoundIcon(\.plus)
}
.buttonStyle(.compound(.super, size: .toolbarIcon))
.accessibilityLabel(L10n.actionStartChat)
.accessibilityIdentifier(A11yIdentifiers.homeScreen.startChat)
default:
@@ -109,13 +109,19 @@ struct HomeScreenInviteCell: View {
private var buttons: some View {
HStack(spacing: 12) {
Button(L10n.actionDecline) {
Button {
context.send(viewAction: .declineInvite(roomIdentifier: room.id))
} label: {
Text(L10n.actionDecline)
.frame(maxWidth: .infinity)
}
.buttonStyle(.compound(.secondary, size: .medium))
Button(L10n.actionAccept) {
Button {
context.send(viewAction: .acceptInvite(roomIdentifier: room.id))
} label: {
Text(L10n.actionAccept)
.frame(maxWidth: .infinity)
}
.buttonStyle(.compound(.primary, size: .medium))
}
@@ -80,10 +80,12 @@ struct HomeScreenRecoveryKeyConfirmationBanner: View {
var buttons: some View {
VStack(spacing: 16) {
Button(actionTitle) {
Button {
context.send(viewAction: primaryAction)
} label: {
Text(actionTitle)
.frame(maxWidth: .infinity)
}
.frame(maxWidth: .infinity)
.buttonStyle(.compound(.primary, size: .medium))
.accessibilityIdentifier(A11yIdentifiers.homeScreen.recoveryKeyConfirmationBannerContinue)
@@ -92,10 +94,9 @@ struct HomeScreenRecoveryKeyConfirmationBanner: View {
context.send(viewAction: .resetEncryption)
} label: {
Text(L10n.confirmRecoveryKeyBannerSecondaryButtonTitle)
.padding(.vertical, 7)
.frame(maxWidth: .infinity)
}
.buttonStyle(.compound(.plain, size: .medium))
.buttonStyle(.compound(.tertiary, size: .medium))
}
}
}
@@ -276,13 +276,10 @@ struct JoinRoomScreen: View {
@ViewBuilder
var declineAndBlockButton: some View {
if let inviter = context.viewState.roomDetails?.inviter {
Button(role: .destructive) {
Button(L10n.screenJoinRoomDeclineAndBlockButtonTitle, role: .destructive) {
context.send(viewAction: .declineInviteAndBlock(userID: inviter.id))
} label: {
Text(L10n.screenJoinRoomDeclineAndBlockButtonTitle)
.padding(.vertical, 14)
}
.buttonStyle(.compound(.plain))
.buttonStyle(.compound(.tertiary))
}
}
@@ -38,7 +38,7 @@ struct KnockRequestCell: View {
contentID: cellInfo.userID,
avatarSize: .user(on: .knockingUserList),
mediaProvider: mediaProvider)
VStack(alignment: .leading, spacing: 12) {
VStack(alignment: .leading, spacing: 16) {
header
if let reason = cellInfo.reason {
DisclosableText(text: reason)
@@ -80,23 +80,30 @@ struct KnockRequestCell: View {
@ViewBuilder
private var actions: some View {
VStack(spacing: 0) {
VStack(spacing: 16) {
if onDecline != nil || onAccept != nil {
HStack(spacing: 16) {
if let onDecline {
Button(L10n.actionDecline) {
Button {
onDecline(cellInfo.eventID)
} label: {
Text(L10n.actionDecline)
.frame(maxWidth: .infinity)
}
.buttonStyle(.compound(.secondary, size: .medium))
}
if let onAccept {
Button(L10n.actionAccept) {
Button {
onAccept(cellInfo.eventID)
} label: {
Text(L10n.actionAccept)
.frame(maxWidth: .infinity)
}
.buttonStyle(.compound(.primary, size: .medium))
}
}
.fixedSize(horizontal: false, vertical: true)
}
if let onDeclineAndBan {
@@ -104,12 +111,10 @@ struct KnockRequestCell: View {
onDeclineAndBan(cellInfo.eventID)
} label: {
Text(L10n.screenKnockRequestsListDeclineAndBanActionTitle)
.padding(.top, 8)
.padding(.bottom, 4)
.frame(maxWidth: .infinity)
}
.frame(maxWidth: .infinity)
.buttonStyle(.compound(.plain))
.padding(.top, 16)
.buttonStyle(.compound(.tertiary, size: .small))
.padding(.top, 4)
}
}
.padding(.bottom, 16)
@@ -54,7 +54,7 @@ struct IdentityConfirmationScreen: View {
Button(L10n.actionLearnMore) {
UIApplication.shared.open(context.viewState.learnMoreURL)
}
.buttonStyle(.compound(.plain))
.buttonStyle(.compound(.tertiary, size: .small))
.padding(.top, 16)
}
}
@@ -85,8 +85,7 @@ struct IdentityConfirmationScreen: View {
Button("\(L10n.actionSkip) 🙉") {
context.send(viewAction: .skip)
}
.buttonStyle(.compound(.plain))
.padding(.vertical, 14)
.buttonStyle(.compound(.tertiary))
}
}
}
@@ -81,7 +81,7 @@ struct SessionVerificationScreen: View {
Button(L10n.actionLearnMore) {
UIApplication.shared.open(context.viewState.learnMoreURL)
}
.buttonStyle(.compound(.plain))
.buttonStyle(.compound(.tertiary, size: .small))
default:
EmptyView()
}
@@ -132,7 +132,7 @@ struct SessionVerificationScreen: View {
Button(L10n.actionIgnore) {
context.send(viewAction: .ignoreVerificationRequest)
}
.buttonStyle(.compound(.plain))
.buttonStyle(.compound(.tertiary))
.accessibilityIdentifier(A11yIdentifiers.sessionVerificationScreen.ignoreVerificationRequest)
}
}
@@ -158,7 +158,7 @@ struct SessionVerificationScreen: View {
.accessibilityIdentifier(A11yIdentifiers.sessionVerificationScreen.startSasVerification)
case .showingChallenge:
VStack(spacing: 32) {
VStack(spacing: 16) {
Button(L10n.screenSessionVerificationTheyMatch) {
context.send(viewAction: .accept)
}
@@ -168,7 +168,7 @@ struct SessionVerificationScreen: View {
Button(L10n.screenSessionVerificationTheyDontMatch) {
context.send(viewAction: .decline)
}
.buttonStyle(.compound(.plain))
.buttonStyle(.compound(.tertiary))
.accessibilityIdentifier(A11yIdentifiers.sessionVerificationScreen.declineChallenge)
}
@@ -383,9 +383,7 @@ struct QRCodeLoginScreen: View {
Button(L10n.actionCancel) {
context.send(viewAction: .cancel)
}
.padding(.vertical, 13)
.frame(maxWidth: .infinity)
.buttonStyle(.compound(.plain))
.buttonStyle(.compound(.tertiary))
}
}
}
@@ -58,9 +58,8 @@ struct ResolveVerifiedUserSendFailureScreen: View {
Button { context.send(viewAction: .cancel) } label: {
Text(L10n.actionCancelForNow)
.padding(.vertical, 14)
}
.buttonStyle(.compound(.plain))
.buttonStyle(.compound(.tertiary))
}
}
}
@@ -77,8 +77,11 @@ struct RoomMemberDetailsScreen: View {
.font(.compound.bodyMDSemibold)
}
Button(L10n.cryptoIdentityChangeWithdrawVerificationAction) {
Button {
context.send(viewAction: .withdrawVerification)
} label: {
Text(L10n.cryptoIdentityChangeWithdrawVerificationAction)
.frame(maxWidth: .infinity)
}
.buttonStyle(.compound(.secondary, size: .medium))
}
@@ -293,7 +293,7 @@ struct ComposerToolbar: View {
.scaledFrame(size: 30, relativeTo: .compound.headingLG)
.scaledPadding(7, relativeTo: .compound.headingLG)
}
.buttonStyle(.compound(.plain))
.buttonStyle(.compound(.textLink))
.accessibilityLabel(L10n.a11yDelete)
}
@@ -100,11 +100,18 @@ private struct SingleKnockRequestBannerContent: View {
private var actions: some View {
HStack(spacing: 12) {
Button(L10n.screenRoomSingleKnockRequestViewButtonTitle, action: onViewAll)
.buttonStyle(.compound(.secondary, size: .medium))
Button(action: onViewAll) {
Text(L10n.screenRoomSingleKnockRequestViewButtonTitle)
.frame(maxWidth: .infinity)
}
.buttonStyle(.compound(.secondary, size: .medium))
if let onAccept {
Button(L10n.screenRoomSingleKnockRequestAcceptButtonTitle) { onAccept(request.eventID) }
.buttonStyle(.compound(.primary, size: .medium))
Button { onAccept(request.eventID) } label: {
Text(L10n.screenRoomSingleKnockRequestAcceptButtonTitle)
.frame(maxWidth: .infinity)
}
.buttonStyle(.compound(.primary, size: .medium))
}
}
.padding(.top, request.reason == nil ? 0 : 2)
@@ -146,8 +153,11 @@ private struct MultipleKnockRequestsBannerContent: View {
KnockRequestsBannerDismissButton(onDismiss: onDismiss)
}
}
Button(L10n.screenRoomMultipleKnockRequestsViewAllButtonTitle) {
Button {
onViewAll()
} label: {
Text(L10n.screenRoomMultipleKnockRequestsViewAllButtonTitle)
.frame(maxWidth: .infinity)
}
.buttonStyle(.compound(.primary, size: .medium))
}
@@ -58,8 +58,11 @@ struct RoomScreenFooterView: View {
.foregroundColor(.compound.textPrimary)
}
Button(L10n.actionDismiss) {
Button {
callback(.resolvePinViolation(userID: member.userID))
} label: {
Text(L10n.actionDismiss)
.frame(maxWidth: .infinity)
}
.buttonStyle(.compound(.primary, size: .medium))
}
@@ -85,8 +88,11 @@ struct RoomScreenFooterView: View {
.foregroundColor(.compound.textCriticalPrimary)
}
Button(L10n.cryptoIdentityChangeWithdrawVerificationAction) {
Button {
callback(.resolveVerificationViolation(userID: member.userID))
} label: {
Text(L10n.cryptoIdentityChangeWithdrawVerificationAction)
.frame(maxWidth: .infinity)
}
.buttonStyle(.compound(.primary, size: .medium))
}
@@ -182,6 +182,7 @@ struct NotificationSettingsScreen: View {
context.send(viewAction: .fixConfigurationMismatchTapped)
} label: {
Text(L10n.actionContinue)
.frame(maxWidth: .infinity)
}
.buttonStyle(.compound(.primary, size: .medium))
.disabled(context.viewState.fixingConfigurationMismatch)
@@ -81,9 +81,8 @@ struct SendInviteConfirmationView: View {
dismiss()
} label: {
Text(L10n.actionCancel)
.padding(.vertical, 14)
}
.buttonStyle(.compound(.plain))
.buttonStyle(.compound(.tertiary))
}
.padding(.horizontal, 16)
}