App Polish (#1098)

* App polish

- Skeleton avatar colour on app switching.
- Bug report icon and string.
- Semi-bold font on room list timestamps.
- Room attachments button spacing and alignment.
- Replace link tint with semi-bold font in AnalyticsSettingsScreen.
- Semi-bold font on Invites button.
- Add padding to media attachment sheet.
- Message composer header layout tweaks.
- Remove indicator after changing homeserver with an MXID.
- Change copy permalink string.
- Formatting of link in Analytics Prompt.
- Remove indicator after changing homeserver with an MXID.
- Change copy permalink string.
- Formatting of link in Analytics Prompt.
- Only semi-bold the room timestamp when unread.
- Tweak the colour of the date separator.
- Add activity indicator to toast style user indicator.

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

@@ -133,7 +133,7 @@ private struct MessageComposerReplyHeader: View {
             .overlay(alignment: .topTrailing) {
                 Button(action: action) {
                     Image(systemName: "xmark")
-                        .font(.caption2.weight(.medium))
+                        .font(.compound.bodySM.weight(.medium))
                         .foregroundColor(.compound.iconTertiary)
                         .padding(16.0)
                 }
@@ -151,9 +151,9 @@ private struct MessageComposerEditHeader: View {
             Spacer()
             Button(action: action) {
                 Image(systemName: "xmark")
-                    .font(.caption2.weight(.medium))
+                    .font(.compound.bodySM.weight(.medium))
                     .foregroundColor(.compound.iconTertiary)
-                    .padding(12.0)
+                    .padding(EdgeInsets(top: 10, leading: 12, bottom: 12, trailing: 14))
             }
         }
     }
@@ -220,6 +220,17 @@ struct MessageComposer_Previews: PreviewProvider {
                             pasteAction: { _ in },
                             replyCancellationAction: { },
                             editCancellationAction: { })
+            
+            MessageComposer(text: .constant(""),
+                            focused: .constant(false),
+                            sendingDisabled: false,
+                            mode: .reply(itemID: UUID().uuidString,
+                                         replyDetails: .loaded(sender: .init(id: "Kirk"),
+                                                               contentType: .text(.init(body: "Text: Where the wild things are")))),
+                            sendAction: { },
+                            pasteAction: { _ in },
+                            replyCancellationAction: { },
+                            editCancellationAction: { })
         }
         .padding(.horizontal)
         

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

@@ -113,7 +113,7 @@ struct TimelineReplyView: View {
                     Spacer().frame(width: 4.0)
                 }
                 
-                VStack(alignment: .leading) {
+                VStack(alignment: .leading, spacing: 4) {
                     Text(sender.displayName ?? sender.id)
                         .font(.compound.bodySMSemibold)
                         .foregroundColor(.compound.textPrimary)

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

@@ -54,6 +54,7 @@ struct RoomAttachmentPicker: View {
                     PickerLabel(title: L10n.screenRoomAttachmentSourceCamera, systemImageName: "camera.fill")
                 }
             }
+            .padding(.top, 20)
             .background {
                 // This is done in the background otherwise GeometryReader tends to expand to
                 // all the space given to it like color or shape.
@@ -79,7 +80,16 @@ struct RoomAttachmentPicker: View {
                 .labelStyle(FixedIconSizeLabelStyle())
                 .multilineTextAlignment(.leading)
                 .frame(maxWidth: .infinity, alignment: .leading)
-                .padding()
+                .padding(16)
         }
     }
 }
+
+struct RoomAttachmentPicker_Previews: PreviewProvider {
+    static let viewModel = RoomScreenViewModel(timelineController: MockRoomTimelineController(),
+                                               mediaProvider: MockMediaProvider(),
+                                               roomProxy: RoomProxyMock(with: .init(displayName: "")))
+    static var previews: some View {
+        RoomAttachmentPicker(context: viewModel.context)
+    }
+}

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

@@ -21,17 +21,22 @@ struct RoomScreen: View {
     @State private var showReactionsMenuForItemId = ""
     @State private var dragOver = false
     
+    private let attachmentButtonPadding = 10.0
+    
     var body: some View {
         timeline
             .background(Color.compound.bgCanvasDefault.ignoresSafeArea()) // Kills the toolbar translucency.
             .safeAreaInset(edge: .bottom, spacing: 0) {
-                HStack(spacing: 4.0) {
+                HStack(alignment: .bottom, spacing: attachmentButtonPadding) {
                     RoomAttachmentPicker(context: context)
+                        .padding(.bottom, 5) // centre align with the send button
                     messageComposer
                         .environmentObject(context)
                 }
-                .padding([.horizontal, .bottom])
+                .padding(.leading, attachmentButtonPadding)
+                .padding(.trailing, 12)
                 .padding(.top, 8)
+                .padding(.bottom)
             }
             .navigationBarTitleDisplayMode(.inline)
             .toolbar { toolbar }

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

@@ -22,7 +22,7 @@ struct SeparatorRoomTimelineView: View {
     var body: some View {
         Text(timelineItem.text)
             .font(.compound.bodySMSemibold)
-            .foregroundColor(.compound.textSecondary)
+            .foregroundColor(.compound.textPrimary)
             .frame(maxWidth: .infinity)
             .padding(.horizontal, 36.0)
             .padding(.vertical, 8.0)

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

@@ -187,7 +187,7 @@ public struct TimelineItemMenu: View {
                 }
             case .copyPermalink:
                 Button { send(action) } label: {
-                    MenuLabel(title: L10n.commonPermalink, systemImageName: "link")
+                    MenuLabel(title: L10n.actionCopyLinkToMessage, systemImageName: "link")
                 }
             case .reply:
                 Button { send(action) } label: {