Add a subtitle to the QR login instructions. (#3386)

Author: pixlwave

ElementX/Resources/Localizations/en.lproj/Localizable.strings

@@ -588,6 +588,7 @@
 "screen_qr_code_login_initial_state_item_3" = "Select %1$@";
 "screen_qr_code_login_initial_state_item_3_action" = "“Link new device”";
 "screen_qr_code_login_initial_state_item_4" = "Scan the QR code with this device";
+"screen_qr_code_login_initial_state_subtitle" = "Only available if your account provider supports it.";
 "screen_qr_code_login_initial_state_title" = "Open %1$@ on another device to get the QR code";
 "screen_qr_code_login_invalid_scan_state_description" = "Use the QR code shown on the other device.";
 "screen_qr_code_login_invalid_scan_state_subtitle" = "Wrong QR code";

ElementX/Sources/Generated/Strings.swift

@@ -1395,6 +1395,8 @@ internal enum L10n {
   internal static var screenQrCodeLoginInitialStateItem3Action: String { return L10n.tr("Localizable", "screen_qr_code_login_initial_state_item_3_action") }
   /// Scan the QR code with this device
   internal static var screenQrCodeLoginInitialStateItem4: String { return L10n.tr("Localizable", "screen_qr_code_login_initial_state_item_4") }
+  /// Only available if your account provider supports it.
+  internal static var screenQrCodeLoginInitialStateSubtitle: String { return L10n.tr("Localizable", "screen_qr_code_login_initial_state_subtitle") }
   /// Open %1$@ on another device to get the QR code
   internal static func screenQrCodeLoginInitialStateTitle(_ p1: Any) -> String {
     return L10n.tr("Localizable", "screen_qr_code_login_initial_state_title", String(describing: p1))

ElementX/Sources/Screens/QRCodeLoginScreen/View/QRCodeLoginScreen.swift

@@ -43,10 +43,17 @@ struct QRCodeLoginScreen: View {
                 VStack(spacing: 16) {
                     HeroImage(icon: \.computer, style: .subtle)
 
-                    Text(L10n.screenQrCodeLoginInitialStateTitle(InfoPlistReader.main.productionAppName))
-                        .foregroundColor(.compound.textPrimary)
-                        .font(.compound.headingMDBold)
-                        .multilineTextAlignment(.center)
+                    VStack(spacing: 8) {
+                        Text(L10n.screenQrCodeLoginInitialStateTitle(InfoPlistReader.main.productionAppName))
+                            .foregroundColor(.compound.textPrimary)
+                            .font(.compound.headingMDBold)
+                            .multilineTextAlignment(.center)
+                        
+                        Text(L10n.screenQrCodeLoginInitialStateSubtitle)
+                            .font(.compound.bodyMD)
+                            .multilineTextAlignment(.center)
+                            .foregroundColor(.compound.textSecondary)
+                    }
                 }
                 .padding(.horizontal, 24)