From d081ac72592e0db8b8718bc51561d31b6e09883c Mon Sep 17 00:00:00 2001 From: Anton Yarmolenko Date: Thu, 14 Mar 2024 16:42:16 +0100 Subject: [PATCH 1/3] chore: added icon optional parameter to styled button --- Core/Core/View/Base/StyledButton.swift | 46 +++++++++++++--- .../DeleteAccount/DeleteAccountView.swift | 52 ++++++++----------- Theme/Theme/Theme.swift | 3 ++ 3 files changed, 64 insertions(+), 37 deletions(-) diff --git a/Core/Core/View/Base/StyledButton.swift b/Core/Core/View/Base/StyledButton.swift index eb64959d1..8fd89ed4c 100644 --- a/Core/Core/View/Base/StyledButton.swift +++ b/Core/Core/View/Base/StyledButton.swift @@ -8,6 +8,12 @@ import SwiftUI import Theme +public enum IconImagePosition { + case left + case right + case none +} + public struct StyledButton: View { private let title: String private let action: () -> Void @@ -17,6 +23,8 @@ public struct StyledButton: View { private let textColor: Color private let isActive: Bool private let borderColor: Color + private let iconImage: Image? + private let iconPosition: IconImagePosition public init(_ title: String, action: @escaping () -> Void, @@ -24,6 +32,8 @@ public struct StyledButton: View { color: Color = Theme.Colors.accentButtonColor, textColor: Color = Theme.Colors.styledButtonText, borderColor: Color = .clear, + iconImage: Image? = nil, + iconPosition: IconImagePosition = .none, isActive: Bool = true) { self.title = title self.action = action @@ -32,16 +42,34 @@ public struct StyledButton: View { self.borderColor = borderColor self.buttonColor = color self.isActive = isActive + self.iconImage = iconImage + self.iconPosition = iconPosition } public var body: some View { Button(action: action) { - Text(title) - .tracking(isTransparent ? 0 : 1.3) - .foregroundColor(textColor) - .font(Theme.Fonts.labelLarge) - .frame(maxWidth: .infinity) - .padding(.horizontal, 16) + VStack { + HStack { + Spacer() + if let icon = iconImage, + iconPosition == .left { + icon + .renderingMode(.template) + .foregroundStyle(textColor) + } + Text(title) + .tracking(isTransparent ? 0 : 1.3) + .foregroundColor(textColor) + .font(Theme.Fonts.labelLarge) + if let icon = iconImage, + iconPosition == .right { + icon + .renderingMode(.template) + .foregroundStyle(textColor) + } + Spacer() + } + } } .disabled(!isActive) .frame(maxWidth: idiom == .pad ? 260: .infinity, minHeight: isTransparent ? 36 : 42) @@ -66,6 +94,12 @@ struct StyledButton_Previews: PreviewProvider { VStack { StyledButton("Active Button", action: {}, isActive: true) StyledButton("Disabled button", action: {}, isActive: false) + StyledButton( + "Back Button", + action: {}, + iconImage: CoreAssets.arrowLeft.swiftUIImage, + iconPosition: .left, + isActive: true) } .padding(20) } diff --git a/Profile/Profile/Presentation/DeleteAccount/DeleteAccountView.swift b/Profile/Profile/Presentation/DeleteAccount/DeleteAccountView.swift index 2373b01b8..677ea5e78 100644 --- a/Profile/Profile/Presentation/DeleteAccount/DeleteAccountView.swift +++ b/Profile/Profile/Presentation/DeleteAccount/DeleteAccountView.swift @@ -102,44 +102,34 @@ public struct DeleteAccountView: View { .padding(.horizontal) .accessibilityIdentifier("progressbar") } else { - StyledButton(ProfileLocalization.DeleteAccount.comfirm, action: { - Task { - try await viewModel.deleteAccount(password: viewModel.password) - } - }, color: Theme.Colors.accentColor, - textColor: Theme.Colors.primaryButtonTextColor, - isActive: viewModel.password.count >= 2) + StyledButton( + ProfileLocalization.DeleteAccount.comfirm, + action: { + Task { + try await viewModel.deleteAccount(password: viewModel.password) + } + }, + color: Theme.Colors.alert, + textColor: Theme.Colors.primaryButtonTextColor, + isActive: viewModel.password.count >= 2 + ) .padding(.top, 18) .accessibilityIdentifier("delete_account_button") } // MARK: Back to profile - Button(action: { - viewModel.router.back() - }, label: { - HStack(spacing: 9) { - CoreAssets.arrowRight16.swiftUIImage.renderingMode(.template) - .rotationEffect(Angle(degrees: 180)) - .foregroundColor(Theme.Colors.secondaryButtonTextColor) - Text(ProfileLocalization.DeleteAccount.backToProfile) - .font(Theme.Fonts.labelLarge) - .foregroundColor(Theme.Colors.secondaryButtonTextColor) - } - }) - .padding(.top, 5) - .accessibilityIdentifier("back_button") - .frame(maxWidth: .infinity, minHeight: 42) - .background( - Theme.Shapes.buttonShape - .fill(.clear) - ) - .overlay( - Theme.Shapes.buttonShape - .stroke(style: .init(lineWidth: 1, lineCap: .round, lineJoin: .round, miterLimit: 1)) - .foregroundColor(Theme.Colors.secondaryButtonBorderColor) - + StyledButton( + ProfileLocalization.DeleteAccount.backToProfile, + action: { + viewModel.router.back() + }, + color: Theme.Colors.accentColor, + textColor: Theme.Colors.primaryButtonTextColor, + iconImage: CoreAssets.arrowLeft.swiftUIImage, + iconPosition: .left ) .padding(.top, 35) + .accessibilityIdentifier("back_button") } }.padding(.horizontal, 24) .frame(minHeight: 0, diff --git a/Theme/Theme/Theme.swift b/Theme/Theme/Theme.swift index ef1055734..c36bd18db 100644 --- a/Theme/Theme/Theme.swift +++ b/Theme/Theme/Theme.swift @@ -194,6 +194,7 @@ public struct Theme { public static func labelSmall() -> UIFont { guard let font = UIFont(name: fontsParser.fontName(for: .regular), size: 10) else { assert(false, "Could not find the required font") + return UIFont.systemFont(ofSize: 10) } return font @@ -202,6 +203,7 @@ public struct Theme { public static func labelLarge() -> UIFont { guard let font = UIFont(name: fontsParser.fontName(for: .regular), size: 14) else { assert(false, "Could not find the required font") + return UIFont.systemFont(ofSize: 14) } return font @@ -210,6 +212,7 @@ public struct Theme { public static func titleMedium() -> UIFont { guard let font = UIFont(name: fontsParser.fontName(for: .semiBold), size: 18) else { assert(false, "Could not find the required font") + return UIFont.systemFont(ofSize: 18) } return font From 3169af2912c3601884b0dcc2a9b204535c8b8c99 Mon Sep 17 00:00:00 2001 From: Anton Yarmolenko Date: Thu, 14 Mar 2024 17:37:52 +0100 Subject: [PATCH 2/3] style: delete account button styling --- Core/Core/View/Base/StyledButton.swift | 2 ++ .../Presentation/DeleteAccount/DeleteAccountView.swift | 5 +++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/Core/Core/View/Base/StyledButton.swift b/Core/Core/View/Base/StyledButton.swift index 8fd89ed4c..fd3a6d69d 100644 --- a/Core/Core/View/Base/StyledButton.swift +++ b/Core/Core/View/Base/StyledButton.swift @@ -61,6 +61,7 @@ public struct StyledButton: View { .tracking(isTransparent ? 0 : 1.3) .foregroundColor(textColor) .font(Theme.Fonts.labelLarge) + .opacity(isActive ? 1.0 : 0.3) if let icon = iconImage, iconPosition == .right { icon @@ -82,6 +83,7 @@ public struct StyledButton: View { Theme.Shapes.buttonShape .stroke(style: .init(lineWidth: 1, lineCap: .round, lineJoin: .round, miterLimit: 1)) .foregroundColor(isTransparent ? Theme.Colors.white : borderColor) + .opacity(isActive ? 1.0 : 0.3) ) .accessibilityElement(children: .ignore) diff --git a/Profile/Profile/Presentation/DeleteAccount/DeleteAccountView.swift b/Profile/Profile/Presentation/DeleteAccount/DeleteAccountView.swift index 677ea5e78..df3b47d0d 100644 --- a/Profile/Profile/Presentation/DeleteAccount/DeleteAccountView.swift +++ b/Profile/Profile/Presentation/DeleteAccount/DeleteAccountView.swift @@ -109,8 +109,9 @@ public struct DeleteAccountView: View { try await viewModel.deleteAccount(password: viewModel.password) } }, - color: Theme.Colors.alert, - textColor: Theme.Colors.primaryButtonTextColor, + color: .clear, + textColor: Theme.Colors.alert, + borderColor: Theme.Colors.alert, isActive: viewModel.password.count >= 2 ) .padding(.top, 18) From 58753095c5d11a1a5cd69a192c6bdd689b6f3fdf Mon Sep 17 00:00:00 2001 From: Anton Yarmolenko Date: Thu, 14 Mar 2024 18:25:29 +0100 Subject: [PATCH 3/3] style: button inactive style --- Core/Core/View/Base/StyledButton.swift | 45 +++++++++++++------------- 1 file changed, 22 insertions(+), 23 deletions(-) diff --git a/Core/Core/View/Base/StyledButton.swift b/Core/Core/View/Base/StyledButton.swift index fd3a6d69d..f76252e44 100644 --- a/Core/Core/View/Base/StyledButton.swift +++ b/Core/Core/View/Base/StyledButton.swift @@ -48,28 +48,26 @@ public struct StyledButton: View { public var body: some View { Button(action: action) { - VStack { - HStack { - Spacer() - if let icon = iconImage, - iconPosition == .left { - icon - .renderingMode(.template) - .foregroundStyle(textColor) - } - Text(title) - .tracking(isTransparent ? 0 : 1.3) - .foregroundColor(textColor) - .font(Theme.Fonts.labelLarge) - .opacity(isActive ? 1.0 : 0.3) - if let icon = iconImage, - iconPosition == .right { - icon - .renderingMode(.template) - .foregroundStyle(textColor) - } - Spacer() + HStack { + Spacer() + if let icon = iconImage, + iconPosition == .left { + icon + .renderingMode(.template) + .foregroundStyle(textColor) } + Text(title) + .tracking(isTransparent ? 0 : 1.3) + .foregroundColor(textColor) + .font(Theme.Fonts.labelLarge) + .opacity(isActive ? 1.0 : 0.6) + if let icon = iconImage, + iconPosition == .right { + icon + .renderingMode(.template) + .foregroundStyle(textColor) + } + Spacer() } } .disabled(!isActive) @@ -83,7 +81,7 @@ public struct StyledButton: View { Theme.Shapes.buttonShape .stroke(style: .init(lineWidth: 1, lineCap: .round, lineJoin: .round, miterLimit: 1)) .foregroundColor(isTransparent ? Theme.Colors.white : borderColor) - .opacity(isActive ? 1.0 : 0.3) + .opacity(isActive ? 1.0 : 0.6) ) .accessibilityElement(children: .ignore) @@ -101,7 +99,8 @@ struct StyledButton_Previews: PreviewProvider { action: {}, iconImage: CoreAssets.arrowLeft.swiftUIImage, iconPosition: .left, - isActive: true) + isActive: true + ) } .padding(20) }