Voice message UI polish (part 2) (#1995)

* Update compund

* Fix create poll screen bin button style

* Fix timeline menu description for voice messages

* Fix bin button in ComposerToolbar

* Add VoiceMessageButtonStyle

* Update compound & fix breaking changes

* Fix voice message bin size

* Refactor VoiceMessageRecordingButton

* Fix preview tests

ElementX.xcodeproj/project.pbxproj

@@ -6628,7 +6628,7 @@
 			repositoryURL = "https://github.com/vector-im/compound-ios";
 			requirement = {
 				kind = revision;
-				revision = eba9d995974fcedd55549395d56e336e5ff70cdf;
+				revision = 34dcd1e2960f3b0b7f50d6e7d020c108d5acf604;
 			};
 		};
 		9A472EE0218FE7DCF5283429 /* XCRemoteSwiftPackageReference "SwiftUI-Introspect" */ = {

ElementX.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -5,15 +5,16 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/vector-im/compound-design-tokens.git",
       "state" : {
-        "revision" : "387d2b7211f07761c67e849c59414a1bb803defa"
+        "revision" : "b603371c5e4ac798f4613a7388d2305100b31911",
+        "version" : "0.0.7"
       }
     },
     {
       "identity" : "compound-ios",
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/vector-im/compound-ios",
       "state" : {
-        "revision" : "eba9d995974fcedd55549395d56e336e5ff70cdf"
+        "revision" : "34dcd1e2960f3b0b7f50d6e7d020c108d5acf604"
       }
     },
     {

ElementX/Sources/Generated/Assets.swift

@@ -49,8 +49,6 @@ internal enum Asset {
     internal static let inlineCode = ImageAsset(name: "images/inline-code")
     internal static let italic = ImageAsset(name: "images/italic")
     internal static let link = ImageAsset(name: "images/link")
-    internal static let micFill = ImageAsset(name: "images/mic-fill")
-    internal static let mic = ImageAsset(name: "images/mic")
     internal static let numberedList = ImageAsset(name: "images/numbered-list")
     internal static let quote = ImageAsset(name: "images/quote")
     internal static let sendMessage = ImageAsset(name: "images/send-message")

ElementX/Sources/Other/VoiceMessage/VoiceMessageButton.swift

@@ -53,7 +53,7 @@ struct VoiceMessageButton: View {
                 .frame(width: buttonSize, height: buttonSize)
         }
         .animation(nil, value: state)
-        .buttonStyle(.plain)
+        .buttonStyle(VoiceMessageButtonStyle())
         .disabled(state == .loading)
         .background(Circle().foregroundColor(.compound.bgCanvasDefault))
     }
@@ -73,12 +73,20 @@ struct VoiceMessageButton: View {
                 .scaledToFit()
                 .frame(width: imageWidth, height: imageHeight)
                 .offset(x: offset)
-                .foregroundColor(.compound.iconSecondary)
                 .accessibilityLabel(accessibilityLabel)
         }
     }
 }
 
+private struct VoiceMessageButtonStyle: ButtonStyle {
+    @Environment(\.isEnabled) var isEnabled: Bool
+
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .foregroundColor(isEnabled ? .compound.textSecondary.opacity(configuration.isPressed ? 0.6 : 1) : .compound.iconDisabled)
+    }
+}
+
 extension VoiceMessageButton.State {
     init(state: AudioPlayerPlaybackState) {
         switch state {

ElementX/Sources/Screens/ComposerToolbar/View/ComposerToolbar.swift

@@ -25,7 +25,6 @@ struct ComposerToolbar: View {
 
     @FocusState private var composerFocused: Bool
     @ScaledMetric private var sendButtonIconSize = 16
-    @ScaledMetric private var trashButtonIconSize = 24
     @ScaledMetric(relativeTo: .title) private var spinnerSize = 44
     @ScaledMetric(relativeTo: .title) private var closeRTEButtonSize = 30
 
@@ -288,18 +287,14 @@ struct ComposerToolbar: View {
     }
 
     private var voiceMessageTrashButton: some View {
-        Button {
+        Button(role: .destructive) {
             context.send(viewAction: .deleteVoiceMessageRecording)
         } label: {
             CompoundIcon(\.delete)
-                .font(.compound.bodyLG)
-                .foregroundColor(.compound.textCriticalPrimary)
-                .frame(width: trashButtonIconSize, height: trashButtonIconSize)
                 .padding(EdgeInsets(top: 10, leading: 11, bottom: 10, trailing: 11))
-                .fixedSize()
-                .accessibilityLabel(L10n.a11yDelete)
         }
-        .buttonStyle(.plain)
+        .buttonStyle(.compound(.plain))
+        .accessibilityLabel(L10n.a11yDelete)
     }
 
     private var voiceMessageRecordingButtonTooltipView: some View {

ElementX/Sources/Screens/ComposerToolbar/View/VoiceMessageRecordingButton.swift

@@ -18,7 +18,6 @@ import Compound
 import SwiftUI
 
 struct VoiceMessageRecordingButton: View {
-    @ScaledMetric private var buttonIconSize = 24
     @State private var buttonPressed = false
 
     var startRecording: (() -> Void)?
@@ -38,14 +37,11 @@ struct VoiceMessageRecordingButton: View {
                 stopRecording?()
             }
         }
-        .fixedSize()
     }
 
     @ViewBuilder
     private var voiceMessageButtonImage: some View {
-        (buttonPressed ? Image(asset: Asset.Images.micFill) : Image(asset: Asset.Images.mic))
-            .resizable()
-            .frame(width: buttonIconSize, height: buttonIconSize)
+        CompoundIcon(buttonPressed ? \.micOnSolid : \.micOnOutline)
             .foregroundColor(.compound.iconSecondary)
             .padding(EdgeInsets(top: 6, leading: 6, bottom: 6, trailing: 6))
             .accessibilityLabel(L10n.a11yVoiceMessageRecord)

ElementX/Sources/Screens/CreatePollScreen/View/CreatePollScreen.swift

@@ -139,12 +139,11 @@ private struct CreatePollOptionView: View {
     var body: some View {
         HStack {
             if editMode?.wrappedValue == .active {
-                Button(action: deleteAction) {
+                Button(role: .destructive, action: deleteAction) {
                     CompoundIcon(\.delete)
-                        .foregroundColor(.compound.iconCriticalPrimary)
                 }
                 .disabled(!canDeleteItem)
-                .buttonStyle(.plain)
+                .buttonStyle(.compound(.plain))
                 .accessibilityLabel(L10n.actionRemove)
             }
             TextField(text: $text) {

ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift

@@ -167,15 +167,15 @@ struct RoomScreen: View {
                 Button {
                     context.send(viewAction: .presentCall)
                 } label: {
-                    Label(L10n.actionJoin, icon: \.videoCall)
+                    Label(L10n.actionJoin, icon: \.videoCallSolid)
                         .labelStyle(.titleAndIcon)
                 }
                 .buttonStyle(ElementCallButtonStyle())
             } else {
                 Button {
                     context.send(viewAction: .presentCall)
                 } label: {
-                    CompoundIcon(\.videoCall)
+                    CompoundIcon(\.videoCallSolid)
                 }
             }
         }

ElementX/Sources/Screens/RoomScreen/View/Timeline/EncryptedHistoryRoomTimelineView.swift

@@ -28,7 +28,7 @@ struct EncryptedHistoryRoomTimelineView: View {
                 .font(.compound.bodyMDSemibold)
                 .foregroundColor(.compound.textInfoPrimary)
         } icon: {
-            CompoundIcon(\.info, size: .small, relativeTo: .compound.bodyMDSemibold)
+            CompoundIcon(\.infoSolid, size: .small, relativeTo: .compound.bodyMDSemibold)
                 .foregroundColor(.compound.iconInfoPrimary)
         }
         .labelStyle(EncryptedHistoryLabelStyle())

ElementX/Sources/Screens/RoomScreen/View/TimelineItemMenu.swift

@@ -193,7 +193,7 @@ public struct TimelineItemMenu: View {
                     .font(.compound.bodySMSemibold)
                     .foregroundColor(.compound.textPrimary)
 
-                Text(item.body.trimmingCharacters(in: .whitespacesAndNewlines))
+                Text(item.timelineMenuDescription)
                     .font(.compound.bodyMD)
                     .foregroundColor(.compound.textSecondary)
                     .lineLimit(1)

ElementX/Sources/Screens/SecureBackup/SecureBackupRecoveryKeyScreen/View/SecureBackupRecoveryKeyScreen.swift

@@ -134,7 +134,7 @@ struct SecureBackupRecoveryKeyScreen: View {
 
             HStack(alignment: .top) {
                 if context.viewState.recoveryKey == nil {
-                    CompoundIcon(\.info, size: .small, relativeTo: .compound.bodySM)
+                    CompoundIcon(\.infoSolid, size: .small, relativeTo: .compound.bodySM)
                 }
 
                 Text(context.viewState.recoveryKeySubtitle)

ElementX/Sources/Services/Timeline/TimelineItems/EventBasedTimelineItemProtocol.swift

@@ -59,6 +59,15 @@ extension EventBasedTimelineItemProtocol {
         self is EncryptedRoomTimelineItem
     }
 
+    var timelineMenuDescription: String {
+        switch self {
+        case is VoiceMessageRoomTimelineItem:
+            return L10n.commonVoiceMessage
+        default:
+            return body.trimmingCharacters(in: .whitespacesAndNewlines)
+        }
+    }
+
     func additionalWhitespaces(timelineStyle: TimelineStyle) -> Int {
         guard timelineStyle == .bubbles else {
             return 0

project.yml

@@ -49,7 +49,7 @@ packages:
     # path: ../matrix-rust-sdk
   Compound:
     url: https://github.com/vector-im/compound-ios
-    revision: eba9d995974fcedd55549395d56e336e5ff70cdf
+    revision: 34dcd1e2960f3b0b7f50d6e7d020c108d5acf604
     # path: ../compound-ios
   AnalyticsEvents:
     url: https://github.com/matrix-org/matrix-analytics-events