App polish part 2 (#1118)

- Fix sheet backgrounds in dark mode.
- Fix background colours for reaction buttons.
- Reply view layout.
- Update separator colours.
- Don't show sender name/avatar in DMs.
- Fix inconsistent line heights with formatted body text.
- Use plain text for reply
- Increase tappable size of collapsed state changes button.
- Blockquote layout and text colour.
- Tap to expand the topic in room details.
- Change the topic and security font size in room details.
- Add cancel button when inviting someone to an existing room.
- Reword Add Friends to Add People in start chat screen.
- Update compound.

ElementX/Sources/Screens/RoomDetailsEditScreen/View/RoomDetailsEditScreen.swift

@@ -91,10 +91,9 @@ struct RoomDetailsEditScreen: View {
                       prompt: canEditName ? Text(L10n.commonRoomNamePlaceholder) : nil,
                       axis: .horizontal)
                 .focused($focus, equals: .name)
-                .font(.compound.bodyLG)
-                .foregroundColor(.compound.textPrimary)
+                .textFieldStyle(.compoundForm)
                 .disabled(!canEditName)
-                .listRowBackground(canEditName ? nil : Color.clear)
+                .listRowBackground(canEditName ? Color.element.formRowBackground : .clear)
                 .clipShape(RoundedRectangle(cornerRadius: 8))
         } header: {
             Text(L10n.commonRoomName)
@@ -109,14 +108,13 @@ struct RoomDetailsEditScreen: View {
             
             TextField(L10n.commonTopic,
                       text: $context.topic,
-                      prompt: canEditTopic ? Text(L10n.commonTopicPlaceholder) : nil,
+                      prompt: canEditTopic ? Text(L10n.commonTopicPlaceholder).foregroundColor(.compound.textPlaceholder) : nil,
                       axis: .vertical)
                 .focused($focus, equals: .topic)
-                .font(.compound.bodyLG)
-                .foregroundColor(.compound.textPrimary)
+                .textFieldStyle(.compoundForm)
                 .disabled(!canEditTopic)
-                .listRowBackground(canEditTopic ? nil : Color.clear)
-                .lineLimit(3, reservesSpace: true)
+                .listRowBackground(canEditTopic ? Color.element.formRowBackground : .clear)
+                .lineLimit(3...)
         } header: {
             Text(L10n.commonTopic)
                 .formSectionHeader()