[#179] Broken Onboarding UI for .accessibilityLarge (#504)

- reimagined the way the onboarding is composed
- the bare bone is now a VStack instead of a ZStack
- there is no use of GeometryReader anymore

secant/Features/OnboardingFlow/OnboardingFlowView.swift

@@ -12,7 +12,7 @@ struct OnboardingScreen: View {
     let store: Store<OnboardingFlowReducer.State, OnboardingFlowReducer.Action>
 
     var body: some View {
-        GeometryReader { proxy in
+        VStack {
             ZStack {
                 OnboardingHeaderView(
                     store: store.scope(
@@ -32,14 +32,12 @@ struct OnboardingScreen: View {
                 )
                 .zIndex(1)
                 
-                OnboardingContentView(
+                OnboardingContentView(store: store)
-                    store: store,
-                    width: proxy.size.width,
-                    height: proxy.size.height
-                )
-                
-                OnboardingFooterView(store: store)
             }
+
+            Spacer()
+            
+            OnboardingFooterView(store: store)
         }
         .navigationBarHidden(true)
         .applyScreenBackground()
@@ -81,7 +79,8 @@ struct OnboardingScreen_Previews: PreviewProvider {
             )
         )
         .preferredColorScheme(.light)
-        .previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro"))
+        .previewDevice(PreviewDevice(rawValue: "iPhone 14 Pro"))
+        .environment(\.sizeCategory, .accessibilityLarge)
 
         OnboardingScreen(
             store: Store(
@@ -114,6 +113,6 @@ struct OnboardingScreen_Previews: PreviewProvider {
             )
         )
         .preferredColorScheme(.dark)
-        .previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro"))
+        .previewDevice(PreviewDevice(rawValue: "iPhone 14 Pro"))
     }
 }

secant/Features/OnboardingFlow/Views/OnboardingContentView.swift

@@ -10,69 +10,51 @@ import ComposableArchitecture
 
 struct OnboardingContentView: View {
     let store: Store<OnboardingFlowReducer.State, OnboardingFlowReducer.Action>
-    let width: Double
-    let height: Double
     
     var body: some View {
         WithViewStore(self.store) { viewStore in
-            let scale = imageScale
-            let imageWidth: CGFloat = width * scale
-            let imageXOffset: CGFloat = (width - imageWidth) / 2
-
             let image = viewStore.steps[viewStore.index].background
                 .resizable()
-                .aspectRatio(contentMode: .fit)
+                .scaledToFit()
-                .frame(width: imageWidth)
-                .offset(x: imageXOffset)
 
             let title = Text(viewStore.steps[viewStore.index].title)
                 .titleText()
                 .lineLimit(0)
                 .minimumScaleFactor(0.1)
-                .padding(EdgeInsets(top: 0, leading: 10, bottom: 5, trailing: 10))
+                .padding(.vertical, 10)
             
             let text = Text(viewStore.steps[viewStore.index].description)
                 .paragraphText()
                 .lineSpacing(2)
-                .padding(EdgeInsets(top: 0, leading: 10, bottom: 10, trailing: 10))
+                .minimumScaleFactor(0.1)
+                .padding(.horizontal, 20)
             
             if viewStore.isFinalStep {
-                VStack(alignment: .leading) {
+                VStack {
-                    title
+                    HStack {
-                        .padding(.top, 73 * imageScale)
+                        title
+                            .padding(.top, 60)
+                        Spacer()
+                    }
+                    .padding(.horizontal, 20)
                     text
                     image
-                    Spacer()
                 }
             } else {
-                VStack(alignment: .leading) {
+                VStack {
                     image
-                    title
+                    HStack {
+                        title
+                        Spacer()
+                    }
+                    .padding(.horizontal, 20)
                     text
-                    Spacer()
                 }
             }
         }
     }
 }
 
-/// Following computations are necessary to handle properly sizing and positioning of elements
-/// on different devices (apects). iPhone SE and iPhone 8 are similar aspect family devices
-/// while iPhone X, 11, etc are different family devices, capable to use more of the space.
-extension OnboardingContentView {
-    var imageScale: CGFloat {
-        // Just to be sure that we counting with exactly 3 decimal points.
-        let aspectRatio = (floor(height / width * 1000)) / 1000
-
-        /// iPhone SE or iPhone 8 for example
-        if aspectRatio <= 1.725 {
-            return 0.7
-        } else {
-            return 1.0
-        }
-    }
-}
-
 struct OnboardingContentView_Previews: PreviewProvider {
     static var previews: some View {
         let store = Store(
@@ -119,9 +101,9 @@ extension OnboardingContentView_Previews {
                 .zIndex(1)
                 
                 OnboardingContentView(
-                    store: store,
+                    store: store
-                    width: proxy.size.width,
+//                    width: proxy.size.width,
-                    height: proxy.size.height
+//                    height: proxy.size.height
                 )
             }
         }

secant/Features/OnboardingFlow/Views/OnboardingFooterView.swift

@@ -15,26 +15,27 @@ struct OnboardingFooterView: View {
     var body: some View {
         WithViewStore(self.store) { viewStore in
             VStack(spacing: 5) {
-                Spacer()
-                
                 if viewStore.isFinalStep {
                     Button("onboarding.button.newWallet") {
                         viewStore.send(.createNewWallet, animation: .easeInOut(duration: animationDuration))
                     }
                     .activeButtonStyle
                     .onboardingFooterButtonLayout()
+                    .minimumScaleFactor(0.1)
 
                     Button("onboarding.button.importWallet") {
                         viewStore.send(.importExistingWallet, animation: .easeInOut(duration: animationDuration))
                     }
                     .secondaryButtonStyle
                     .onboardingFooterButtonLayout()
+                    .minimumScaleFactor(0.1)
                 } else {
                     Button("Next") {
                         viewStore.send(.next, animation: .easeInOut(duration: animationDuration))
                     }
                     .primaryButtonStyle
                     .onboardingFooterButtonLayout()
+                    .minimumScaleFactor(0.1)
 
                     ProgressView(
                         String(format: "%02d", viewStore.index + 1),
@@ -46,6 +47,7 @@ struct OnboardingFooterView: View {
                     .padding(.vertical, 20)
                 }
             }
+            .padding(.top, 10)
             .navigationLinkEmpty(
                 isActive: viewStore.bindingForDestination(.importExistingWallet),
                 destination: {
@@ -93,7 +95,8 @@ struct OnboardingFooterView_Previews: PreviewProvider {
             OnboardingFooterView(store: store)
                 .applyScreenBackground()
                 .preferredColorScheme(.light)
-                .previewDevice("iPhone 13 Pro Max")
+                .previewDevice("iPhone 14 Pro")
+                .environment(\.sizeCategory, .accessibilityLarge)
 
             OnboardingFooterView(store: store)
                 .applyScreenBackground()

secant/Features/OnboardingFlow/Views/OnboardingHeaderView.swift

@@ -33,6 +33,7 @@ struct OnboardingHeaderView: View {
                         .navigationButtonStyle
                         .frame(width: 75)
                         .disabled(viewStore.isInitialStep)
+                        .minimumScaleFactor(0.1)
                     }
                     
                     Spacer()
@@ -44,6 +45,7 @@ struct OnboardingHeaderView: View {
                         .navigationButtonStyle
                         .disabled(viewStore.isFinalStep)
                         .frame(width: 75)
+                        .minimumScaleFactor(0.1)
                     }
                 }
                 .padding(.horizontal, 30)
@@ -51,7 +53,6 @@ struct OnboardingHeaderView: View {
                 
                 Spacer()
             }
-            .padding(.top, 5)
         }
     }
 }

secant/UI Components/FontStyles/SecantTextStyles.swift

@@ -47,7 +47,7 @@ extension Text {
         func body(content: Content) -> some View {
             content
                 .foregroundColor(Asset.Colors.Text.heading.color)
-                .font(.custom(FontFamily.Rubik.regular.name, size: 33, relativeTo: .callout))
+                .font(.custom(FontFamily.Rubik.medium.name, size: 33, relativeTo: .callout))
                 .shadow(color: Asset.Colors.Text.captionTextShadow.color, radius: 1, x: 0, y: 1)
         }
     }