Backup Succeeded View design

updated to the latest

secant/Assets.xcassets/Backgrounds/calloutBackupSucceeded.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "filename" : "calloutBackupSucceeded.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "calloutBackupSucceeded@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

secant/Colors.xcassets/ScreenBackground/greenGradientEnd.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xF5",
+          "green" : "0xFA",
+          "red" : "0xE4"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xF5",
+          "green" : "0xFA",
+          "red" : "0xE4"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

secant/Colors.xcassets/ScreenBackground/greenGradientStart.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xF6",
+          "green" : "0xF6",
+          "red" : "0xEF"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xF6",
+          "green" : "0xF6",
+          "red" : "0xEF"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

secant/Features/BackupFlow/Views/ValidationSucceededView.swift

@@ -11,38 +11,34 @@ import ComposableArchitecture
 struct ValidationSucceededView: View {
     var store: RecoveryPhraseValidationStore
     
-    @ScaledMetric var scaledPadding: CGFloat = 10
-    @ScaledMetric var scaledButtonHeight: CGFloat = 130
-
     var body: some View {
         WithViewStore(store) { viewStore in
             GeometryReader { proxy in
                 VStack {
                     VStack(spacing: 20) {
                         Text("validationSuccess.title")
-                            .font(.custom(FontFamily.Rubik.regular.name, size: 36))
+                            .titleText()
+                            .multilineTextAlignment(.center)
 
                         Text("validationSuccess.description")
-                            .bodyText()
+                            .paragraphText()
                             .multilineTextAlignment(.center)
-                            .lineSpacing(2)
-                            .fixedSize(horizontal: false, vertical: true)
+                            .padding(.horizontal, 45)
                     }
-
-                    Spacer()
+                    .padding(.vertical, 40)
 
                     VStack {
                         CircularFrame()
                             .backgroundImage(
-                                Asset.Assets.Backgrounds.callout1.image
+                                Asset.Assets.Backgrounds.calloutBackupSucceeded.image
                             )
                             .frame(
-                                width: proxy.size.width * 0.84,
-                                height: proxy.size.width * 0.84
+                                width: circularFrameUniformSize(width: proxy.size.width, height: proxy.size.height),
+                                height: circularFrameUniformSize(width: proxy.size.width, height: proxy.size.height)
                             )
                             .badgeIcon(.shield)
                     }
-                    .padding(.vertical, 20)
+                    .padding(.bottom, 40)
 
                     Spacer()
 
@@ -57,11 +53,7 @@ struct ValidationSucceededView: View {
                             }
                         )
                         .activeButtonStyle
-                        .frame(
-                            minHeight: 60,
-                            idealHeight: 60,
-                            maxHeight: .infinity
-                        )
+                        .validationSucceededViewLayout()
                         
                         Button(
                             action: {
@@ -76,30 +68,77 @@ struct ValidationSucceededView: View {
                             }
                         )
                         .secondaryButtonStyle
-                        .frame(
-                            minHeight: 60,
-                            idealHeight: 60,
-                            maxHeight: .infinity
-                        )
+                        .validationSucceededViewLayout()
                     }
-                    .frame(height: scaledButtonHeight)
-                    .padding(.vertical, scaledPadding)
                 }
                 .padding(.horizontal)
                 .scrollableWhenScaledUp()
             }
         }
-        .navigationBarBackButtonHidden(true)
-        .applyScreenBackground()
+        .navigationBarHidden(true)
+        .applySucceededScreenBackground()
+        .preferredColorScheme(.light)
+    }
+}
+
+/// 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 ValidationSucceededView {
+    func circularFrameUniformSize(width: CGFloat, height: CGFloat) -> CGFloat {
+        var deviceMultiplier = 1.0
+        
+        if width > 0.0 {
+            let aspect = height / width
+            deviceMultiplier = 1.0 + (((aspect / 1.51) - 1.0) * 2.0)
+        }
+        
+        return width * 0.48 * deviceMultiplier
+    }
+}
+
+// swiftlint:disable:next private_over_fileprivate strict_fileprivate
+fileprivate struct ValidationSucceededViewLayout: ViewModifier {
+    func body(content: Content) -> some View {
+        content
+            .frame(
+                minWidth: 0,
+                maxWidth: .infinity,
+                minHeight: 64,
+                maxHeight: .infinity,
+                alignment: .center
+            )
+            .fixedSize(horizontal: false, vertical: true)
+            .padding(.horizontal, 28)
+            .transition(.opacity)
+    }
+}
+
+extension View {
+    func validationSucceededViewLayout() -> some View {
+        modifier(ValidationSucceededViewLayout())
     }
 }
 
 struct ValidationSuccededView_Previews: PreviewProvider {
     static var previews: some View {
         Group {
+            NavigationView {
                 ValidationSucceededView(store: .demo)
+            }
+            
             ValidationSucceededView(store: .demo)
-                .environment(\.sizeCategory, .accessibilityExtraLarge)
+                .preferredColorScheme(.dark)
+            
+            ValidationSucceededView(store: .demo)
+                .previewDevice(PreviewDevice(rawValue: "iPhone SE (2nd generation)"))
+            
+            ValidationSucceededView(store: .demo)
+                .environment(\.sizeCategory, .accessibilityLarge)
+
+            ValidationSucceededView(store: .demo)
+                .environment(\.sizeCategory, .accessibilityLarge)
+                .previewDevice(PreviewDevice(rawValue: "iPhone SE (2nd generation)"))
         }
     }
 }

secant/Generated/XCAssets+Generated.swift

@@ -30,6 +30,7 @@ internal enum Asset {
       internal static let callout3 = ImageAsset(name: "callout3")
       internal static let callout4 = ImageAsset(name: "callout4")
       internal static let calloutBackupFlow1 = ImageAsset(name: "calloutBackupFlow1")
+      internal static let calloutBackupSucceeded = ImageAsset(name: "calloutBackupSucceeded")
     }
     internal enum Icons {
       internal static let list = ImageAsset(name: "list")
@@ -77,6 +78,8 @@ internal enum Asset {
     internal enum ScreenBackground {
       internal static let gradientEnd = ColorAsset(name: "gradientEnd")
       internal static let gradientStart = ColorAsset(name: "gradientStart")
+      internal static let greenGradientEnd = ColorAsset(name: "greenGradientEnd")
+      internal static let greenGradientStart = ColorAsset(name: "greenGradientStart")
       internal static let redGradientEnd = ColorAsset(name: "redGradientEnd")
       internal static let redGradientStart = ColorAsset(name: "redGradientStart")
     }

secant/UIComponents/Backgrounds/ScreenBackground.swift

@@ -66,6 +66,17 @@ extension View {
             )
         )
     }
+
+    func applySucceededScreenBackground() -> some View {
+        self.modifier(
+            ScreenBackgroundModifier(
+                colors: [
+                    Asset.Colors.ScreenBackground.greenGradientStart.color,
+                    Asset.Colors.ScreenBackground.greenGradientEnd.color
+                ]
+            )
+        )
+    }
 }
 
 struct ScreenBackground_Previews: PreviewProvider {