Update Send button bg color (#5170)

* Update Send button bg color

Change the gradient bg to accent/rest.

* Tidy-up ComposerToolbar to match iOS 18 Figma.

Also simplifies the tests a bit.

* Add a .glassEffect to Compound's SendButton.

* Add a border to TimelineReplyView.

Also use the same sizes in both the message bubbles and the composer.

* Change icon size and container in message bubbles

- Container size = 36x36px
- Icon size = 24x24px

* Update icon of reply contents to be 24x24

* Update the VoiceMessageButton to match the designs.

* Adopt Liquid Glass in the ComposerToolbar.

* Generate and fix snapshots.

---------

Co-authored-by: Doug <douglase@element.io>

ElementX/Sources/Other/VoiceMessage/VoiceMessageButton.swift

@@ -6,31 +6,39 @@
 // Please see LICENSE files in the repository root for full details.
 //
 
+import Compound
 import SwiftUI
 
 struct VoiceMessageButton: View {
     @ScaledMetric private var buttonSize: CGFloat
-
+    
     enum State {
         case loading
         case playing
         case paused
     }
-
+    
     enum Size {
         case small
         case medium
     }
-
+    
     let state: State
     let action: () -> Void
-
+    
+    let iconSize: CompoundIcon.Size
+    let iconColor: Color
+    
     init(state: State, size: Size, action: @escaping () -> Void) {
         switch size {
         case .small:
             _buttonSize = .init(wrappedValue: 30)
+            iconSize = .small
+            iconColor = .compound.iconPrimary
         case .medium:
             _buttonSize = .init(wrappedValue: 36)
+            iconSize = .medium
+            iconColor = .compound.iconSecondary
         }
         
         self.state = state
@@ -41,9 +49,12 @@ struct VoiceMessageButton: View {
         Button(action: action) {
             buttonLabel
                 .frame(width: buttonSize, height: buttonSize)
+                .overlay {
+                    Circle().stroke(.compound.borderInteractiveSecondary)
+                }
         }
         .animation(nil, value: state)
-        .buttonStyle(VoiceMessageButtonStyle())
+        .buttonStyle(VoiceMessageButtonStyle(color: iconColor))
         .disabled(state == .loading)
         .accessibilityLabel(accessibilityLabel)
     }
@@ -54,14 +65,9 @@ struct VoiceMessageButton: View {
         case .loading:
             ProgressView()
         case .playing, .paused:
-            let imageAsset = state == .playing ? Asset.Images.mediaPause : Asset.Images.mediaPlay
-            let offset: CGFloat = state == .playing ? 0 : 2
-
-            Image(asset: imageAsset)
-                .resizable()
-                .scaledToFit()
-                .scaledFrame(width: 12, height: 14)
-                .offset(x: offset)
+            CompoundIcon(state == .playing ? \.pauseSolid : \.playSolid,
+                         size: iconSize,
+                         relativeTo: .compound.headingLG)
         }
     }
     
@@ -79,10 +85,12 @@ struct VoiceMessageButton: View {
 
 private struct VoiceMessageButtonStyle: ButtonStyle {
     @Environment(\.isEnabled) var isEnabled: Bool
+    
+    let color: Color
 
     func makeBody(configuration: Configuration) -> some View {
         configuration.label
-            .foregroundColor(isEnabled ? .compound.textSecondary.opacity(configuration.isPressed ? 0.6 : 1) : .compound.iconDisabled)
+            .foregroundColor(isEnabled ? color.opacity(configuration.isPressed ? 0.6 : 1) : .compound.iconDisabled)
             .background(Circle()
                 .foregroundColor(configuration.isPressed ? .compound.bgSubtlePrimary : .compound.bgCanvasDefault))
     }
@@ -114,6 +122,6 @@ struct VoiceMessageButton_Previews: PreviewProvider, TestablePreview {
             }
         }
         .padding()
-        .background(Color.gray)
+        .background(.compound.bgSubtleSecondary)
     }
 }