UX/UI Anpassungen der Konto-/Karten-Detailseite (#49)

Author: mrgrauel

Example/SnabblePayExample/Views/AccountStateView.swift

@@ -35,7 +35,6 @@ struct AccountStateView: View {
                             .frame(maxWidth: .infinity)
                             .padding()
                     }
-                    .background(viewModel.backgroundMaterial, in: RoundedRectangle(cornerRadius: 12))
                     .padding([.leading, .trailing])
                     Button {
                         viewModel.decline(mandateId: mandate.id)
@@ -45,12 +44,10 @@ struct AccountStateView: View {
                             .frame(maxWidth: .infinity)
                             .padding()
                     }
-                    .background(viewModel.backgroundMaterial, in: RoundedRectangle(cornerRadius: 12))
                     .padding([.leading, .trailing])
                 }
                 .padding(.bottom)
            }
-            .background(viewModel.backgroundMaterial, in: RoundedRectangle(cornerRadius: 12))
             .padding([.leading, .trailing])
         }
     }
@@ -106,7 +103,6 @@ struct AccountStateView: View {
                 }
             }
         }
-        .background(viewModel.backgroundMaterial, in: RoundedRectangle(cornerRadius: 12))
         .padding([.leading, .trailing])
     }
 
@@ -118,7 +114,6 @@ struct AccountStateView: View {
                     .foregroundColor(.red)
                     .padding()
             }
-            .background(viewModel.backgroundMaterial, in: RoundedRectangle(cornerRadius: 12))
             .padding([.leading, .trailing])
         } else {
             if viewModel.mandateState == .pending {

Example/SnabblePayExample/Views/AccountView.swift

@@ -31,23 +31,35 @@ struct AccountView: View {
     var body: some View {
         ZStack {
             BackgroundView()
-            
-            VStack(spacing: 24) {
-                ZStack(alignment: .topTrailing) {
-                    CardView(model: viewModel, expand: true)
-                    Button(action: {
-                        delete.toggle()
-                    }) {
+            VStack(spacing: 16) {
+                Spacer()
+                CardView(model: viewModel, expand: true)
+                AccountStateView(viewModel: viewModel)
+                Spacer()
+                Button {
+                    name = viewModel.customName
+                    edit.toggle()
+                } label: {
+                    HStack {
+                        Image(systemName: "pencil")
+                        Text("Edit name")
+                    }
+                    .padding(.horizontal, 24)
+                    .padding(.vertical, 8)
+                    .overlay(
+                        RoundedRectangle(cornerRadius: 20)
+                            .stroke(Color.white, lineWidth: 2)
+                    )
+                }
+                Button {
+                    delete.toggle()
+                } label: {
+                    HStack {
                         Image(systemName: "trash")
+                        Text("Delete account")
                     }
-                    .padding(.trailing, 30)
-                    .padding(.top, 10)
                 }
-                AccountStateView(viewModel: viewModel)
-                Spacer()
             }
-            .padding([.top], 100)
-            .padding([.bottom], 20)
             .onAppear {
                 viewModel.createMandate()
             }
@@ -57,7 +69,7 @@ struct AccountView: View {
                 }
             }
         }
-        .edgesIgnoringSafeArea(.all)
+        .padding(.bottom, 16)
         .navigationBarTitleDisplayMode(.inline)
         .navigationTitle(viewModel.customName)
         .alert("Your account", isPresented: $edit) {
@@ -72,16 +84,6 @@ struct AccountView: View {
                 self.presentationMode.wrappedValue.dismiss()
             }
         }
-        .toolbar {
-            ToolbarItem(placement: .navigationBarTrailing) {
-                Button(action: {
-                    name = viewModel.customName
-                    edit.toggle()
-                }) {
-                    Image(systemName: "square.and.pencil")
-                }
-            }
-        }
     }
 
     func submit() {

Example/SnabblePayExample/de.lproj/Localizable.strings

@@ -23,6 +23,7 @@
 "Your account" = "Dein Konto";
 "Account Name" = "Kontobezeichnung";
 "Give this account a name." = "Gib deinem Konto einen Namen.";
+"Edit name" = "Name barbeiten";
 "Delete account" = "Karte löschen";
 "Delete" = "Löschen";
 

Example/SnabblePayExample/en.lproj/Localizable.strings

@@ -19,6 +19,7 @@
 "Account Name" = "Account Name";
 "Give this account a name." = "Give this account a name.";
 "Delete account" = "Delete account";
+"Edit name" = "Edit name";
 "Delete" = "Delete";
 
 /* Error handling */