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>
2026-11-03 16:10:20 +00:00 · 2026-03-25 18:42:10 +01:00
parent a2481b59ba
commit 96b6d69d5a
181 changed files with 790 additions and 719 deletions
@@ -0,0 +1,65 @@
+//
+// Copyright 2026 Element Creations Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
+// Please see LICENSE files in the repository root for full details.
+//
+
+import Compound
+import SwiftUI
+
+struct VoiceMessageTrashButton: View {
+    let action: () -> Void
+    
+    var body: some View {
+        if #available(iOS 26, *) {
+            Button(role: .destructive, action: action) {
+                CompoundIcon(\.delete, size: .medium, relativeTo: .compound.headingLG)
+                    .modifier(GlassStyle())
+                    .compositingGroup()
+            }
+        } else {
+            Button(role: .destructive, action: action) {
+                CompoundIcon(\.delete)
+                    .scaledToFit()
+                    .scaledFrame(size: 30, relativeTo: .compound.headingLG)
+            }
+            .buttonStyle(.compound(.textLink))
+        }
+    }
+    
+    @available(iOS 26, *)
+    private struct GlassStyle: ViewModifier {
+        @Environment(\.isEnabled) private var isEnabled
+        
+        func body(content: Content) -> some View {
+            if isEnabled {
+                label(content: content)
+                    .snapshotableGlassEffect(.regular.tint(.compound.bgCriticalPrimary).interactive(),
+                                             snapshotBackground: .compound.bgCriticalPrimary,
+                                             in: .circle)
+            } else {
+                label(content: content)
+                    .background(.compound.bgSubtlePrimary, in: .circle)
+            }
+        }
+        
+        private func label(content: Content) -> some View {
+            content
+                .foregroundStyle(isEnabled ? .compound.iconOnSolidPrimary : .compound.iconDisabled)
+                .scaledPadding(10, relativeTo: .compound.headingLG)
+        }
+    }
+}
+
+// MARK: - Previews
+
+struct VoiceMessageTrashButton_Previews: PreviewProvider, TestablePreview {
+    static var previews: some View {
+        HStack(spacing: 12) {
+            VoiceMessageTrashButton { }
+                .disabled(true)
+            VoiceMessageTrashButton { }
+        }
+    }
+}