App polish part 5 (#1149)

- Set launch/splash screens to default background colour. - Replace launch screen storyboard with info plist keys. - Remove useless layout components in bubble styler. - Fix lint error. - Rename all assets. - Update design of Analytics Prompt.
2026-11-03 16:10:20 +00:00 · 2023-06-23 17:10:37 +01:00
parent 1f99e9af8d
commit aa30fe29e9
38 changed files with 188 additions and 947 deletions
@@ -25,21 +25,20 @@ internal typealias AssetImageTypeAlias = ImageAsset.Image
 // swiftlint:disable identifier_name line_length nesting type_body_length type_name
 internal enum Asset {
  internal enum Colors {
-    internal static let accentColor = ColorAsset(name: "Colors/AccentColor")
+    internal static let accentColor = ColorAsset(name: "colors/accent-color")
+    internal static let backgroundColor = ColorAsset(name: "colors/background-color")
  }
  internal enum Images {
-    internal static let analyticsCheckmark = ImageAsset(name: "Images/AnalyticsCheckmark")
-    internal static let analyticsLogo = ImageAsset(name: "Images/AnalyticsLogo")
-    internal static let serverSelectionIcon = ImageAsset(name: "Images/Server Selection Icon")
-    internal static let encryptionNormal = ImageAsset(name: "Images/encryption_normal")
-    internal static let encryptionTrusted = ImageAsset(name: "Images/encryption_trusted")
-    internal static let encryptionWarning = ImageAsset(name: "Images/encryption_warning")
-    internal static let launchBackground = ImageAsset(name: "Images/LaunchBackground")
-    internal static let launchLogo = ImageAsset(name: "Images/LaunchLogo")
-    internal static let appLogo = ImageAsset(name: "Images/app-logo")
-    internal static let closeCircle = ImageAsset(name: "Images/close_circle")
-    internal static let locationPin = ImageAsset(name: "Images/location-pin")
-    internal static let timelineComposerSendMessage = ImageAsset(name: "Images/timelineComposerSendMessage")
+    internal static let encryptionNormal = ImageAsset(name: "images/encryption-normal")
+    internal static let encryptionTrusted = ImageAsset(name: "images/encryption-trusted")
+    internal static let encryptionWarning = ImageAsset(name: "images/encryption-warning")
+    internal static let appLogo = ImageAsset(name: "images/app-logo")
+    internal static let serverSelectionIcon = ImageAsset(name: "images/server-selection-icon")
+    internal static let closeCircle = ImageAsset(name: "images/close-circle")
+    internal static let launchBackground = ImageAsset(name: "images/launch-background")
+    internal static let launchLogo = ImageAsset(name: "images/launch-logo")
+    internal static let locationPin = ImageAsset(name: "images/location-pin")
+    internal static let timelineComposerSendMessage = ImageAsset(name: "images/timeline-composer-send-message")
  }
 }
 // swiftlint:enable identifier_name line_length nesting type_body_length type_name
@@ -34,7 +34,7 @@ actor ExpiringTaskRunner<T> {
            continuation = $0
            
            Task {
-                try await Task.sleep(for: timeout)
+                try? await Task.sleep(for: timeout)
                continuation?.resume(with: .failure(ExpiringTaskRunnerError.timeout))
                continuation = nil
            }
@@ -38,8 +38,8 @@ struct AnalyticsPromptScreenViewState: BindableState {
 /// A collection of strings for the UI that need to be parsed from HTML
 struct AnalyticsPromptScreenStrings {
    let optInContent: AttributedString
-    let point1 = AttributedStringBuilder().fromHTML(L10n.screenAnalyticsPromptDataUsage)?.replacingFontWithPresentationIntent() ?? AttributedString(L10n.screenAnalyticsPromptDataUsage)
-    let point2 = AttributedStringBuilder().fromHTML(L10n.screenAnalyticsPromptThirdPartySharing)?.replacingFontWithPresentationIntent() ?? AttributedString(L10n.screenAnalyticsPromptThirdPartySharing)
+    let point1 = L10n.screenAnalyticsPromptDataUsage
+    let point2 = L10n.screenAnalyticsPromptThirdPartySharing
    let point3 = L10n.screenAnalyticsPromptSettings
    
    init(termsURL: URL) {
@@ -34,40 +34,39 @@ struct AnalyticsPromptScreen: View {
    
    /// The main content of the screen that is shown inside the scroll view.
    private var mainContent: some View {
-        VStack {
-            Image(uiImage: Asset.Images.analyticsLogo.image)
-                .padding(.bottom, 24)
+        VStack(spacing: 40) {
+            header
+            checkmarkList
+        }
+    }
+    
+    private var header: some View {
+        VStack(spacing: 8) {
+            AuthenticationIconImage(image: Image(systemName: "chart.bar"))
+                .symbolVariant(.fill)
+                .padding(.bottom, 8)
            
            Text(L10n.screenAnalyticsPromptTitle(InfoPlistReader.main.bundleDisplayName))
                .font(.compound.headingMDBold)
                .multilineTextAlignment(.center)
                .foregroundColor(.compound.textPrimary)
-                .padding(.bottom, 2)
                .accessibilityIdentifier(A11yIdentifiers.analyticsPromptScreen.title)
            
            Text(context.viewState.strings.optInContent)
-                .font(.compound.bodyLG)
+                .font(.compound.bodyMD)
                .multilineTextAlignment(.center)
                .foregroundColor(.compound.textSecondary)
-            
-            Divider()
-                .overlay { Color.compound.borderDisabled }
-                .padding(.vertical, 20)
-            
-            checkmarkList
        }
    }
    
    /// The list of re-assurances about analytics.
    private var checkmarkList: some View {
-        VStack(alignment: .leading, spacing: 8) {
-            AnalyticsPromptScreenCheckmarkItem(attributedString: context.viewState.strings.point1)
-            AnalyticsPromptScreenCheckmarkItem(attributedString: context.viewState.strings.point2)
-            AnalyticsPromptScreenCheckmarkItem(string: context.viewState.strings.point3)
+        VStack(alignment: .leading, spacing: 4) {
+            AnalyticsPromptScreenCheckmarkItem(title: context.viewState.strings.point1, listPosition: .top)
+            AnalyticsPromptScreenCheckmarkItem(title: context.viewState.strings.point2, listPosition: .middle)
+            AnalyticsPromptScreenCheckmarkItem(title: context.viewState.strings.point3, listPosition: .bottom)
        }
        .fixedSize(horizontal: false, vertical: true)
-        .font(.compound.bodyLG)
-        .foregroundColor(.compound.textSecondary)
        .frame(maxWidth: .infinity)
    }
    
@@ -75,7 +74,7 @@ struct AnalyticsPromptScreen: View {
    private var buttons: some View {
        VStack(spacing: 16) {
            Button { context.send(viewAction: .enable) } label: {
-                Text(L10n.actionEnable)
+                Text(L10n.actionOk)
                    .font(.compound.bodyLGSemibold)
            }
            .buttonStyle(.elementAction(.xLarge))
@@ -17,21 +17,50 @@
 import SwiftUI

 struct AnalyticsPromptScreenCheckmarkItem: View {
-    private let attributedString: AttributedString
-    
-    init(attributedString: AttributedString) {
-        self.attributedString = attributedString
+    /// Represents the position of a checkmark item in a list.
+    enum ListPosition {
+        case top, middle, bottom
+        
+        /// The corners that should be rounded for this position.
+        var roundedCorners: UIRectCorner {
+            switch self {
+            case .top:
+                return [.topLeft, .topRight]
+            case .middle:
+                return []
+            case .bottom:
+                return [.bottomLeft, .bottomRight]
+            }
+        }
    }
    
-    init(string: String) {
-        attributedString = AttributedString(string)
-    }
+    let title: String
+    let listPosition: ListPosition
    
    var body: some View {
-        Label { Text(attributedString) } icon: {
+        Label { Text(title) } icon: {
            Image(systemName: "checkmark.circle")
-                .foregroundColor(.compound.iconPrimary)
+                .symbolVariant(.fill)
+                .symbolRenderingMode(.palette)
+                .foregroundStyle(Color.compound.iconAccentTertiary, Color.compound.textOnSolidPrimary)
        }
+        .labelStyle(CheckmarkLabelStyle())
+        .padding(.horizontal, 20)
+        .padding(.vertical, 12)
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .background(Color.compound.bgSubtleSecondary, in: RoundedCornerShape(radius: 16, corners: listPosition.roundedCorners))
+    }
+}
+
+private struct CheckmarkLabelStyle: LabelStyle {
+    func makeBody(configuration: Configuration) -> some View {
+        HStack(alignment: .firstTextBaseline, spacing: 16) {
+            configuration.icon
+                .font(.compound.bodyLGSemibold)
+            configuration.title
+                .font(.compound.bodyMDSemibold)
+        }
+        .foregroundColor(.compound.textPrimary)
    }
 }

@@ -41,11 +70,12 @@ struct AnalyticsPromptScreenCheckmarkItem_Previews: PreviewProvider {
    static let strings = AnalyticsPromptScreenStrings(termsURL: ServiceLocator.shared.settings.analyticsConfiguration.termsURL)
    
    static var previews: some View {
-        VStack(alignment: .leading) {
-            AnalyticsPromptScreenCheckmarkItem(attributedString: strings.point1)
-            AnalyticsPromptScreenCheckmarkItem(attributedString: strings.point2)
-            AnalyticsPromptScreenCheckmarkItem(attributedString: AttributedString("This is a short string."))
-            AnalyticsPromptScreenCheckmarkItem(attributedString: AttributedString("This is a very long string that will be used to test the layout over multiple lines of text to ensure everything is correct."))
+        VStack(alignment: .leading, spacing: 4) {
+            AnalyticsPromptScreenCheckmarkItem(title: strings.point1, listPosition: .top)
+            AnalyticsPromptScreenCheckmarkItem(title: strings.point2, listPosition: .middle)
+            AnalyticsPromptScreenCheckmarkItem(title: "This is a short string.", listPosition: .middle)
+            AnalyticsPromptScreenCheckmarkItem(title: "This is a very long string that will be used to test the layout over multiple lines of text to ensure everything is correct.",
+                                               listPosition: .bottom)
        }
        .padding()
    }
@@ -27,10 +27,7 @@ class SplashScreenCoordinator: CoordinatorProtocol {
 /// these 2 screens are matched.
 struct SplashScreen: View {
    var body: some View {
-        Image(asset: Asset.Images.launchLogo)
-            .accessibilityHidden(true)
-            .frame(maxWidth: .infinity, maxHeight: .infinity)
-            .background { OnboardingBackgroundImage() }
+        Color.compound.bgCanvasDefault.ignoresSafeArea()
    }
 }

@@ -68,23 +68,20 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
    @ViewBuilder
    private var header: some View {
        if shouldShowSenderDetails {
-            VStack {
-                Spacer()
-                    .frame(height: 8)
-                HStack(alignment: .top, spacing: 4) {
-                    TimelineSenderAvatarView(timelineItem: timelineItem)
-                        .accessibilityHidden(true)
-                    Text(timelineItem.sender.displayName ?? timelineItem.sender.id)
-                        .font(.compound.bodySMSemibold)
-                        .foregroundColor(.compound.textPrimary)
-                        .lineLimit(1)
-                        .padding(.vertical, senderNameVerticalPadding)
-                }
-                .accessibilityElement(children: .combine)
-                .onTapGesture {
-                    context.send(viewAction: .tappedOnUser(userID: timelineItem.sender.id))
-                }
+            HStack(alignment: .top, spacing: 4) {
+                TimelineSenderAvatarView(timelineItem: timelineItem)
+                    .accessibilityHidden(true)
+                Text(timelineItem.sender.displayName ?? timelineItem.sender.id)
+                    .font(.compound.bodySMSemibold)
+                    .foregroundColor(.compound.textPrimary)
+                    .lineLimit(1)
+                    .padding(.vertical, senderNameVerticalPadding)
            }
+            .accessibilityElement(children: .combine)
+            .onTapGesture {
+                context.send(viewAction: .tappedOnUser(userID: timelineItem.sender.id))
+            }
+            .padding(.top, 8)
        }
    }