Reactions - Design review tweaks (#1417)

* Design review tweaks

- truncate reactions as per spec
- add haptic feedback on reacting
- Remove all collapse/expand animations on reactions
- tweak reaction and summary padding
- Fix alignment of time on reaction summary view
- Made sure reaction summary button in horizontal scroller is on screen on appear
- update screenshots

* Update TimelineReactionsView.swift

* Remove dark add more button and check long rtl reactions

* Set colour of  templated add more button

* Fix padding and only inset from the bubble on the leading side as per designs

- Fix padding
- Only inset from the bubble on the leading side as per designs

* Update screenshots

* Fix line length warning.

ElementX/Sources/Services/Timeline/TimelineItemContent/AggregratedReaction.swift

@@ -18,6 +18,11 @@ import Foundation
 
 /// Represents all reactions of the same type for a single event.
 struct AggregatedReaction: Hashable {
+    /// Length at which we ellipsize a reaction key for display
+    /// Reactions can be free text, so we need to limit the length
+    /// displayed on screen.
+    private static let maxDisplayChars = 16
+    
     /// The id of the account owner
     let accountOwnerID: String
     /// The reaction that was sent.
@@ -44,4 +49,9 @@ extension AggregatedReaction {
     var isHighlighted: Bool {
         senders.contains(where: { $0.senderID == accountOwnerID })
     }
+    
+    /// The key to be displayed on screen. See `maxDisplayChars`.
+    var displayKey: String {
+        key.ellipsize(length: Self.maxDisplayChars)
+    }
 }