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/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,7 +167,7 @@ struct RoomScreen: View {
                 Button {
                     context.send(viewAction: .presentCall)
                 } label: {
-                    Label(L10n.actionJoin, icon: \.videoCall)
+                    Label(L10n.actionJoin, icon: \.videoCallSolid)
                         .labelStyle(.titleAndIcon)
                 }
                 .buttonStyle(ElementCallButtonStyle())
@@ -175,7 +175,7 @@ struct RoomScreen: View {
                 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)