Minor tweaks to the message composer. (#548)

DesignKit/Sources/Colors/ElementColors.swift

@@ -21,6 +21,7 @@ import SwiftUI
 
 public extension Color {
     static let element = ElementColors()
+    static let global = Color.global
 }
 
 public struct ElementColors {
@@ -128,25 +129,6 @@ public extension UIColor {
         let colorIndex = Int(contentId.hashCode % Int32(contentAndAvatars.count))
         return contentAndAvatars[colorIndex % contentAndAvatars.count]
     }
-    
-    // MARK: - Temp
-    
-    private var tempActionBlack: UIColor { UIColor(red: 20 / 255, green: 20 / 255, blue: 20 / 255, alpha: 1.0) }
-    
-    public var tempActionBackground: UIColor {
-        UIColor { collection in
-            collection.userInterfaceStyle == .light ? self.tempActionBlack : .white
-        }
-    }
-    
-    public var tempActionForeground: UIColor {
-        UIColor { collection in
-            collection.userInterfaceStyle == .light ? .white : self.tempActionBlack
-        }
-    }
-    
-    public var tempActionBackgroundTint: UIColor { tempActionBackground.withAlphaComponent(0.2) }
-    public var tempActionForegroundTint: UIColor { tempActionForeground.withAlphaComponent(0.2) }
 }
 
 private extension String {

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

@@ -29,7 +29,7 @@ struct MessageComposer: View {
     
     var body: some View {
         let roundedRectangle = RoundedRectangle(cornerRadius: borderRadius)
-        VStack(alignment: .leading, spacing: 0) {
+        VStack(alignment: .leading, spacing: -6) {
             header
             HStack(alignment: .bottom) {
                 MessageComposerTextField(placeholder: ElementL10n.roomMessagePlaceholder,
@@ -47,7 +47,7 @@ struct MessageComposer: View {
                     submitButtonImage
                         .symbolVariant(.fill)
                         .font(.element.body)
-                        .foregroundColor(sendingDisabled ? .element.quaternaryContent : .element.background)
+                        .foregroundColor(sendingDisabled ? .element.quaternaryContent : .global.white)
                         .padding(5)
                         .background {
                             Circle()
@@ -57,8 +57,7 @@ struct MessageComposer: View {
                 .disabled(sendingDisabled)
                 .animation(.elementDefault, value: sendingDisabled)
                 .keyboardShortcut(.return, modifiers: [.command])
-                .padding(.trailing, 8)
-                .padding(.vertical, 6)
+                .padding([.vertical, .trailing], 6)
             }
         }
         .padding(.leading, 12.0)
@@ -70,7 +69,6 @@ struct MessageComposer: View {
                     .stroke(Color.element.quinaryContent, lineWidth: 1)
                     .opacity(focused ? 1 : 0)
             }
-            .animation(.easeOut(duration: 0.25), value: isMultiline)
         }
         .animation(.elementDefault, value: type)
     }
@@ -93,17 +91,21 @@ struct MessageComposer: View {
             Image(systemName: "checkmark")
                 .opacity(type.isEdit ? 1 : 0)
                 .fontWeight(.medium)
+                .accessibilityLabel(ElementL10n.actionConfirm)
+                .accessibilityHidden(!type.isEdit)
             Image(systemName: "paperplane")
+                .offset(x: -1, y: 0)
                 .opacity(type.isEdit ? 0 : 1)
+                .accessibilityHidden(type.isEdit)
         }
     }
     
     private var borderRadius: CGFloat {
         switch type {
         case .default:
-            return isMultiline ? 8 : 28
+            return isMultiline ? 20 : 28
         case .reply, .edit:
-            return 8
+            return 20
         }
     }
 }
@@ -115,13 +117,9 @@ private struct MessageComposerReplyHeader: View {
     var body: some View {
         HStack(alignment: .center) {
             Label(ElementL10n.roomTimelineReplyingTo(displayName), systemImage: "arrowshape.turn.up.left")
-                .font(.element.caption1)
-                .foregroundColor(.element.secondaryContent)
-                .lineLimit(1)
+                .labelStyle(MessageComposerHeaderLabelStyle())
             Spacer()
-            Button {
-                action()
-            } label: {
+            Button(action: action) {
                 Image(systemName: "xmark")
                     .font(.element.caption2.weight(.medium))
                     .foregroundColor(.element.secondaryContent)
@@ -137,13 +135,9 @@ private struct MessageComposerEditHeader: View {
     var body: some View {
         HStack(alignment: .center) {
             Label(ElementL10n.roomTimelineEditing, systemImage: "pencil.line")
-                .font(.element.caption1)
-                .foregroundColor(.element.secondaryContent)
-                .lineLimit(1)
+                .labelStyle(MessageComposerHeaderLabelStyle())
             Spacer()
-            Button {
-                action()
-            } label: {
+            Button(action: action) {
                 Image(systemName: "xmark")
                     .font(.element.caption2.weight(.medium))
                     .foregroundColor(.element.secondaryContent)
@@ -153,6 +147,18 @@ private struct MessageComposerEditHeader: View {
     }
 }
 
+private struct MessageComposerHeaderLabelStyle: LabelStyle {
+    func makeBody(configuration: Configuration) -> some View {
+        HStack(alignment: .firstTextBaseline, spacing: 5) {
+            configuration.icon
+            configuration.title
+        }
+        .font(.element.caption1)
+        .foregroundColor(.element.secondaryContent)
+        .lineLimit(1)
+    }
+}
+
 struct MessageComposer_Previews: PreviewProvider {
     static var previews: some View {
         VStack {

changelog.d/430.change

@@ -1 +1 @@
-Add missing shimmer effect on home screen.
+Add missing shimmer effect on home screen and tweak the message composer.