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>
This commit is contained in:
Aaron Thornburgh
2026-03-25 18:42:10 +01:00
committed by GitHub
parent a2481b59ba
commit 96b6d69d5a
181 changed files with 790 additions and 719 deletions
@@ -6,6 +6,7 @@
// Please see LICENSE files in the repository root for full details.
//
import Compound
import DSWaveformImage
import DSWaveformImageViews
import Foundation
@@ -52,14 +53,12 @@ struct VoiceMessagePreviewComposer: View {
.onChange(of: isDragging) { _, newValue in
onScrubbing(newValue)
}
.padding(.vertical, 4.0)
.padding(.horizontal, 6.0)
.padding(.vertical, Compound.supportsGlass ? 7 : 4)
.padding(.horizontal, Compound.supportsGlass ? 8 : 6)
.padding(.trailing, Compound.supportsGlass ? 8 : 0)
.background {
let roundedRectangle = RoundedRectangle(cornerRadius: 12)
ZStack {
roundedRectangle
.fill(Color.compound.bgSubtleSecondary)
}
RoundedRectangle(cornerRadius: Compound.supportsGlass ? 21 : 12)
.fill(.compound.bgSubtleSecondary)
}
}
@@ -96,6 +95,8 @@ private extension DateFormatter {
}()
}
// MARK: - Previews
struct VoiceMessagePreviewComposer_Previews: PreviewProvider, TestablePreview {
static let playerState = AudioPlayerState(id: .recorderPreview,
title: L10n.commonVoiceMessage,