Improve layout on different devices

Fix dynamic type on some fonts.

DesignKit/Variants/Fonts/ElementFonts.swift

@@ -110,10 +110,10 @@ extension ElementFonts: Fonts {
     public var title2: SharedFont {
         let uiFont = self.font(forTextStyle: .title2)
         
-        if #available(iOS 13.0, *) {
+        if #available(iOS 14.0, *) {
-            return SharedFont(uiFont: uiFont, font: Font(uiFont))
-        } else if #available(iOS 14.0, *) {
             return SharedFont(uiFont: uiFont, font: .title2)
+        } else if #available(iOS 13.0, *) {
+            return SharedFont(uiFont: uiFont, font: Font(uiFont))
         } else {
             return SharedFont(uiFont: uiFont)
         }
@@ -122,10 +122,10 @@ extension ElementFonts: Fonts {
     public var title2B: SharedFont {
         let uiFont = self.title2.uiFont.vc_bold
         
-        if #available(iOS 13.0, *) {
+        if #available(iOS 14.0, *) {
-            return SharedFont(uiFont: uiFont, font: Font(uiFont))
-        } else if #available(iOS 14.0, *) {
             return SharedFont(uiFont: uiFont, font: .title2.bold())
+        } else if #available(iOS 13.0, *) {
+            return SharedFont(uiFont: uiFont, font: Font(uiFont))
         } else {
             return SharedFont(uiFont: uiFont)
         }
@@ -134,10 +134,10 @@ extension ElementFonts: Fonts {
     public var title3: SharedFont {
         let uiFont = self.font(forTextStyle: .title3)
         
-        if #available(iOS 13.0, *) {
+        if #available(iOS 14.0, *) {
-            return SharedFont(uiFont: uiFont, font: Font(uiFont))
-        } else if #available(iOS 14.0, *) {
             return SharedFont(uiFont: uiFont, font: .title3)
+        } else if #available(iOS 13.0, *) {
+            return SharedFont(uiFont: uiFont, font: Font(uiFont))
         } else {
             return SharedFont(uiFont: uiFont)
         }
@@ -146,10 +146,10 @@ extension ElementFonts: Fonts {
     public var title3SB: SharedFont {
         let uiFont = self.title3.uiFont.vc_semiBold
         
-        if #available(iOS 13.0, *) {
+        if #available(iOS 14.0, *) {
-            return SharedFont(uiFont: uiFont, font: Font(uiFont))
-        } else if #available(iOS 14.0, *) {
             return SharedFont(uiFont: uiFont, font: .title3.weight(.semibold))
+        } else if #available(iOS 13.0, *) {
+            return SharedFont(uiFont: uiFont, font: Font(uiFont))
         } else {
             return SharedFont(uiFont: uiFont)
         }
@@ -258,10 +258,10 @@ extension ElementFonts: Fonts {
     public var caption2: SharedFont {
         let uiFont = self.font(forTextStyle: .caption2)
         
-        if #available(iOS 13.0, *) {
+        if #available(iOS 14.0, *) {
-            return SharedFont(uiFont: uiFont, font: Font(uiFont))
-        } else if #available(iOS 14.0, *) {
             return SharedFont(uiFont: uiFont, font: .caption2)
+        } else if #available(iOS 13.0, *) {
+            return SharedFont(uiFont: uiFont, font: Font(uiFont))
         } else {
             return SharedFont(uiFont: uiFont)
         }
@@ -270,10 +270,10 @@ extension ElementFonts: Fonts {
     public var caption2SB: SharedFont {
         let uiFont = self.caption2.uiFont.vc_semiBold
         
-        if #available(iOS 13.0, *) {
+        if #available(iOS 14.0, *) {
-            return SharedFont(uiFont: uiFont, font: Font(uiFont))
-        } else if #available(iOS 14.0, *) {
             return SharedFont(uiFont: uiFont, font: .caption2.weight(.semibold))
+        } else if #available(iOS 13.0, *) {
+            return SharedFont(uiFont: uiFont, font: Font(uiFont))
         } else {
             return SharedFont(uiFont: uiFont)
         }

RiotSwiftUI/Modules/AnalyticsPrompt/View/AnalyticsPrompt.swift

@@ -71,13 +71,14 @@ struct AnalyticsPrompt: View {
             
             Text(VectorL10n.analyticsPromptTitle(AppInfo.current.displayName))
                 .font(theme.fonts.title2B)
+                .multilineTextAlignment(.center)
                 .foregroundColor(theme.colors.primaryContent)
                 .padding(.bottom, 2)
             
             messageText
                 .font(theme.fonts.body)
-                .foregroundColor(theme.colors.secondaryContent)
                 .multilineTextAlignment(.center)
+                .foregroundColor(theme.colors.secondaryContent)
             
             Divider()
                 .background(theme.colors.quinaryContent)
@@ -117,8 +118,11 @@ struct AnalyticsPrompt: View {
                         .padding(.top, 50)
                         .padding(.horizontal, horizontalPadding)
                 }
+                .frame(maxWidth: OnboardingConstants.maxContentWidth)
+                .frame(maxWidth: .infinity)
                 
                 buttons
+                    .frame(maxWidth: OnboardingConstants.maxContentWidth)
                     .padding(.horizontal, horizontalPadding)
                     .padding(.bottom, geometry.safeAreaInsets.bottom > 0 ? 0 : 16)
             }

RiotSwiftUI/Modules/Onboarding/Avatar/View/OnboardingAvatarScreen.swift

@@ -46,8 +46,9 @@ struct OnboardingAvatarScreen: View {
             }
             .padding(.horizontal)
             .padding(.top, 8)
-            .frame(maxHeight: .infinity)
+            .frame(maxWidth: OnboardingConstants.maxContentWidth)
         }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
         .accentColor(theme.colors.accent)
         .background(theme.colors.background.ignoresSafeArea())
         .alert(item: $viewModel.alertInfo) { $0.alert }
@@ -106,10 +107,12 @@ struct OnboardingAvatarScreen: View {
         VStack(spacing: 8) {
             Text(VectorL10n.onboardingAvatarTitle)
                 .font(theme.fonts.title2B)
+                .multilineTextAlignment(.center)
                 .foregroundColor(theme.colors.primaryContent)
             
             Text(VectorL10n.onboardingAvatarMessage)
                 .font(theme.fonts.subheadline)
+                .multilineTextAlignment(.center)
                 .foregroundColor(theme.colors.secondaryContent)
         }
     }
@@ -134,7 +137,7 @@ struct OnboardingAvatarScreen: View {
 
 // MARK: - Previews
 
-@available(iOS 14.0, *)
+@available(iOS 15.0, *)
 struct OnboardingAvatar_Previews: PreviewProvider {
     static let stateRenderer = MockOnboardingAvatarScreenState.stateRenderer
     static var previews: some View {

RiotSwiftUI/Modules/Onboarding/DisplayName/View/OnboardingDisplayNameScreen.swift

@@ -51,8 +51,9 @@ struct OnboardingDisplayNameScreen: View {
             }
             .padding(.horizontal)
             .padding(.top, 8)
-            .frame(maxHeight: .infinity)
+            .frame(maxWidth: OnboardingConstants.maxContentWidth)
         }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
         .accentColor(theme.colors.accent)
         .background(theme.colors.background.ignoresSafeArea())
         .alert(item: $viewModel.alertInfo) { $0.alert }
@@ -65,18 +66,22 @@ struct OnboardingDisplayNameScreen: View {
     var header: some View {
         VStack(spacing: 8) {
             Image(Asset.Images.onboardingCongratulationsIcon.name)
+                .resizable()
                 .renderingMode(.template)
                 .foregroundColor(theme.colors.accent)
+                .frame(width: 90, height: 90)
                 .background(Circle().foregroundColor(.white).padding(2))
                 .padding(.bottom, 8)
                 .accessibilityHidden(true)
             
             Text(VectorL10n.onboardingDisplayNameTitle)
                 .font(theme.fonts.title2B)
+                .multilineTextAlignment(.center)
                 .foregroundColor(theme.colors.primaryContent)
             
             Text(VectorL10n.onboardingDisplayNameMessage)
                 .font(theme.fonts.subheadline)
+                .multilineTextAlignment(.center)
                 .foregroundColor(theme.colors.secondaryContent)
         }
     }
@@ -118,7 +123,7 @@ struct OnboardingDisplayNameScreen: View {
 
 // MARK: - Previews
 
-@available(iOS 14.0, *)
+@available(iOS 15.0, *)
 struct OnboardingDisplayName_Previews: PreviewProvider {
     static let stateRenderer = MockOnboardingDisplayNameScreenState.stateRenderer
     static var previews: some View {