Fix for the alignment of the "Back to profile" button (#345)

* chore: added icon optional parameter to styled button * style: delete account button styling * style: button inactive style
openedx · Mar 15, 2024 · 09c85bb · 09c85bb
1 parent 016cf09
commit 09c85bb
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 37 deletions.
diff --git 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,13 +23,17 @@ 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,
                 isTransparent: Bool = false,
                 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,33 @@ 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)
+            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)
         .frame(maxWidth: idiom == .pad ? 260: .infinity, minHeight: isTransparent ? 36 : 42)
@@ -54,6 +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.6)
 
         )
         .accessibilityElement(children: .ignore)
@@ -66,6 +94,13 @@ 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
@@ -102,44 +102,35 @@ 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: .clear,
+                            textColor: Theme.Colors.alert,
+                            borderColor: Theme.Colors.alert,
+                            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
@@ -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