Message composer icon and scroll to bottom button dark mode (#562)

Remove animations on the composer when entering/exiting edit/reply mode too.

ElementX/Resources/Assets.xcassets/Images/timelineComposerSendMessage.imageset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "timelineComposerSendMessage.svg",
+      "filename" : "send.svg",
       "idiom" : "universal"
     }
   ],

ElementX/Sources/Generated/Assets.swift

@@ -36,7 +36,6 @@ internal enum Asset {
     internal static let appLogo = ImageAsset(name: "Images/app-logo")
     internal static let closeCircle = ImageAsset(name: "Images/close_circle")
     internal static let timelineComposerSendMessage = ImageAsset(name: "Images/timelineComposerSendMessage")
-    internal static let timelineScrollToBottom = ImageAsset(name: "Images/timelineScrollToBottom")
   }
 }
 // swiftlint:enable identifier_name line_length nesting type_body_length type_name

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

@@ -21,12 +21,14 @@ struct MessageComposer: View {
     @Binding var focused: Bool
     let sendingDisabled: Bool
     let type: RoomScreenComposerMode
-    @State private var isMultiline = false
 
     let sendAction: () -> Void
     let replyCancellationAction: () -> Void
     let editCancellationAction: () -> Void
 
+    @State private var isMultiline = false
+    @ScaledMetric private var sendButtonIconSize = 16
+
     var body: some View {
         let roundedRectangle = RoundedRectangle(cornerRadius: borderRadius)
         VStack(alignment: .leading, spacing: -6) {
@@ -48,14 +50,13 @@ struct MessageComposer: View {
                         .symbolVariant(.fill)
                         .font(.element.body)
                         .foregroundColor(sendingDisabled ? .element.quaternaryContent : .global.white)
-                        .padding(5)
                         .background {
                             Circle()
                                 .foregroundColor(sendingDisabled ? .clear : .element.brand)
                         }
                 }
                 .disabled(sendingDisabled)
-                .animation(.elementDefault, value: sendingDisabled)
+                .animation(.linear(duration: 0.1), value: sendingDisabled)
                 .keyboardShortcut(.return, modifiers: [.command])
                 .padding([.vertical, .trailing], 6)
             }
@@ -70,7 +71,9 @@ struct MessageComposer: View {
                     .opacity(focused ? 1 : 0)
             }
         }
-        .animation(.elementDefault, value: type)
+        // Explicitly disable all animations to fix weirdness with the header immediately
+        // appearing whilst the text field and keyboard are still animating up to it.
+        .animation(.noAnimation, value: type)
     }
 
     @ViewBuilder
@@ -93,9 +96,12 @@ struct MessageComposer: View {
                 .fontWeight(.medium)
                 .accessibilityLabel(ElementL10n.actionConfirm)
                 .accessibilityHidden(!type.isEdit)
-            Image(systemName: "paperplane")
-                .offset(x: -1, y: 0)
+            Image(asset: Asset.Images.timelineComposerSendMessage)
+                .resizable()
+                .frame(width: sendButtonIconSize, height: sendButtonIconSize)
+                .padding(EdgeInsets(top: 7, leading: 8, bottom: 7, trailing: 6))
                 .opacity(type.isEdit ? 0 : 1)
+                .accessibilityLabel(ElementL10n.actionSend)
                 .accessibilityHidden(type.isEdit)
         }
     }

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

@@ -64,8 +64,18 @@ struct RoomScreen: View {
 
     var scrollToBottomButton: some View {
         Button { context.viewState.scrollToBottomPublisher.send(()) } label: {
-            Image(uiImage: Asset.Images.timelineScrollToBottom.image)
-                .shadow(radius: 2.0)
+            Image(systemName: "chevron.down")
+                .font(.element.body)
+                .fontWeight(.semibold)
+                .foregroundColor(.element.secondaryContent)
+                .padding(13)
+                .offset(y: 1)
+                .background {
+                    Circle()
+                        .fill(Color.element.background)
+                        // Intentionally using system primary colour to get white/black.
+                        .shadow(color: .primary.opacity(0.33), radius: 2.0)
+                }
                 .padding()
         }
         .opacity(context.scrollToBottomButtonVisible ? 1.0 : 0.0)