Fixes #4512 - Make the preview item count label more proeminent

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

@@ -283,6 +283,7 @@
 "common_server_unreachable" = "Server unreachable";
 "common_server_url" = "Server URL";
 "common_settings" = "Settings";
+"common_share_space" = "Share space";
 "common_shared_location" = "Shared location";
 "common_signing_out" = "Signing out";
 "common_something_went_wrong" = "Something went wrong";
@@ -374,6 +375,7 @@
 "emoji_picker_category_objects" = "Objects";
 "emoji_picker_category_people" = "Smileys & People";
 "emoji_picker_category_places" = "Travel & Places";
+"emoji_picker_category_recent" = "Recent emojis";
 "emoji_picker_category_symbols" = "Symbols";
 "emoji_picker_search_placeholder" = "Search emojis";
 "error_invalid_invite" = "The room no longer exists or the invite is no longer valid.";
@@ -575,6 +577,7 @@
 "screen_media_upload_preview_error_failed_sending" = "Failed uploading media, please try again.";
 "screen_media_upload_preview_error_too_large_message" = "The maximum file size allowed is %1$@.";
 "screen_media_upload_preview_error_too_large_title" = "The file is too large to upload";
+"screen_media_upload_preview_item_count" = "Item %1$d of %2$d";
 "screen_media_upload_preview_optimize_image_quality_title" = "Optimise image quality";
 "screen_media_upload_preview_processing" = "Processing...";
 "screen_pinned_timeline_empty_state_description" = "Press on a message and choose “%1$@” to include here.";

ElementX/Sources/Generated/Strings.swift

@@ -640,6 +640,8 @@ internal enum L10n {
   internal static var commonServerUrl: String { return L10n.tr("Localizable", "common_server_url") }
   /// Settings
   internal static var commonSettings: String { return L10n.tr("Localizable", "common_settings") }
+  /// Share space
+  internal static var commonShareSpace: String { return L10n.tr("Localizable", "common_share_space") }
   /// Shared location
   internal static var commonSharedLocation: String { return L10n.tr("Localizable", "common_shared_location") }
   /// Signing out
@@ -850,6 +852,8 @@ internal enum L10n {
   internal static var emojiPickerCategoryPeople: String { return L10n.tr("Localizable", "emoji_picker_category_people") }
   /// Travel & Places
   internal static var emojiPickerCategoryPlaces: String { return L10n.tr("Localizable", "emoji_picker_category_places") }
+  /// Recent emojis
+  internal static var emojiPickerCategoryRecent: String { return L10n.tr("Localizable", "emoji_picker_category_recent") }
   /// Symbols
   internal static var emojiPickerCategorySymbols: String { return L10n.tr("Localizable", "emoji_picker_category_symbols") }
   /// Search emojis
@@ -1876,6 +1880,10 @@ internal enum L10n {
   }
   /// The file is too large to upload
   internal static var screenMediaUploadPreviewErrorTooLargeTitle: String { return L10n.tr("Localizable", "screen_media_upload_preview_error_too_large_title") }
+  /// Item %1$d of %2$d
+  internal static func screenMediaUploadPreviewItemCount(_ p1: Int, _ p2: Int) -> String {
+    return L10n.tr("Localizable", "screen_media_upload_preview_item_count", p1, p2)
+  }
   /// Optimise image quality
   internal static var screenMediaUploadPreviewOptimizeImageQualityTitle: String { return L10n.tr("Localizable", "screen_media_upload_preview_optimize_image_quality_title") }
   /// Processing...

ElementX/Sources/Screens/MediaUploadPreviewScreen/View/MediaUploadPreviewScreen.swift

@@ -29,9 +29,13 @@ struct MediaUploadPreviewScreen: View {
             .ignoresSafeArea(edges: [.horizontal])
             .safeAreaInset(edge: .top) {
                 if context.viewState.mediaURLs.count > 1 {
-                    Text("\(currentIndex + 1) / \(context.viewState.mediaURLs.count)")
+                    Text(L10n.screenMediaUploadPreviewItemCount(currentIndex + 1, context.viewState.mediaURLs.count))
-                        .font(.compound.bodySM)
+                        .font(.compound.bodyMD)
-                        .foregroundColor(.compound.textSecondary)
+                        .foregroundColor(.compound.textPrimary)
+                        .padding(.vertical, 4)
+                        .padding(.horizontal, 8)
+                        .background(.compound.bgBadgeDefault)
+                        .clipShape(.capsule)
                 }
             }
             .safeAreaInset(edge: .bottom, spacing: 0) {