Remove the isPressed animation from the room attachment picker button. (#2173)

Fixes a bug where the presented sheet would show light mode buttons on a dark mode background when using the in-app appearance override.

ElementX/Resources/Assets.xcassets/images/composer/composer-attachment.imageset/Contents.json

@@ -3,16 +3,6 @@
     {
       "filename" : "composer-attachment-light.svg",
       "idiom" : "universal"
-    },
-    {
-      "appearances" : [
-        {
-          "appearance" : "luminosity",
-          "value" : "dark"
-        }
-      ],
-      "filename" : "composer-attachment-dark.svg",
-      "idiom" : "universal"
     }
   ],
   "info" : {
@@ -20,6 +10,7 @@
     "version" : 1
   },
   "properties" : {
-    "preserves-vector-representation" : true
+    "preserves-vector-representation" : true,
+    "template-rendering-intent" : "template"
   }
 }

ElementX/Resources/Assets.xcassets/images/composer/composer-attachment.imageset/composer-attachment-dark.svg

@@ -1,3 +0,0 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 15C0 23.2843 6.71573 30 15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15ZM16 21V16H21C21.2833 16 21.5208 15.9042 21.7125 15.7125C21.9042 15.5208 22 15.2833 22 15C22 14.7167 21.9042 14.4792 21.7125 14.2875C21.5208 14.0958 21.2833 14 21 14H16V9C16 8.71667 15.9042 8.47917 15.7125 8.2875C15.5208 8.09583 15.2833 8 15 8C14.7167 8 14.4792 8.09583 14.2875 8.2875C14.0958 8.47917 14 8.71667 14 9L14 14L9 14C8.71667 14 8.47917 14.0958 8.2875 14.2875C8.09583 14.4792 8 14.7167 8 15C8 15.2833 8.09583 15.5208 8.2875 15.7125C8.47917 15.9042 8.71667 16 9 16H14V21C14 21.2833 14.0958 21.5208 14.2875 21.7125C14.4792 21.9042 14.7167 22 15 22C15.2833 22 15.5208 21.9042 15.7125 21.7125C15.9042 21.5208 16 21.2833 16 21Z" fill="#EBEEF2"/>
-</svg>

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

@@ -22,95 +22,98 @@ struct RoomAttachmentPicker: View {
     @ObservedObject var context: ComposerToolbarViewModel.Context
     @Environment(\.isPresented) var isPresented
 
-    @State private var sheetContentHeight = CGFloat(0)
+    @State private var sheetContentFrame: CGRect = .zero
     
     var body: some View {
         Button {
             context.showAttachmentPopover = true
         } label: {
-            Image(Asset.Images.composerAttachment.name)
-                .resizable()
-                .scaledToFit()
-                .scaledFrame(size: 30, relativeTo: .title)
-                .foregroundColor(.compound.textActionPrimary)
+            CompoundIcon(asset: Asset.Images.composerAttachment, size: .custom(30), relativeTo: .title)
                 .scaledPadding(7, relativeTo: .title)
         }
+        .buttonStyle(RoomAttachmentPickerButtonStyle())
         .accessibilityLabel(L10n.actionAddToTimeline)
         .accessibilityIdentifier(A11yIdentifiers.roomScreen.composerToolbar.openComposeOptions)
         .popover(isPresented: $context.showAttachmentPopover) {
-            VStack(alignment: .leading, spacing: 0.0) {
-                Button {
-                    context.showAttachmentPopover = false
-                    context.send(viewAction: .displayMediaPicker)
-                } label: {
-                    Label(L10n.screenRoomAttachmentSourceGallery, icon: \.image)
-                        .labelStyle(.menuSheet)
-                }
-                .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerPhotoLibrary)
-                
-                Button {
-                    context.showAttachmentPopover = false
-                    context.send(viewAction: .displayDocumentPicker)
-                } label: {
-                    Label(L10n.screenRoomAttachmentSourceFiles, iconAsset: Asset.Images.attachment)
-                        .labelStyle(.menuSheet)
-                }
-                .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerDocuments)
-                
-                Button {
-                    context.showAttachmentPopover = false
-                    context.send(viewAction: .displayCameraPicker)
-                } label: {
-                    Label(L10n.screenRoomAttachmentSourceCamera, iconAsset: Asset.Images.takePhoto)
-                        .labelStyle(.menuSheet)
-                }
-                .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerCamera)
-
-                Button {
-                    context.showAttachmentPopover = false
-                    context.send(viewAction: .displayLocationPicker)
-                } label: {
-                    Label(L10n.screenRoomAttachmentSourceLocation, iconAsset: Asset.Images.addLocation)
-                        .labelStyle(.menuSheet)
-                }
-                .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerLocation)
-
-                Button {
-                    context.showAttachmentPopover = false
-                    context.send(viewAction: .displayNewPollForm)
-                } label: {
-                    Label(L10n.screenRoomAttachmentSourcePoll, iconAsset: Asset.Images.polls)
-                        .labelStyle(.menuSheet)
-                }
-                .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerPoll)
-
-                if ServiceLocator.shared.settings.richTextEditorEnabled {
-                    Button {
-                        context.showAttachmentPopover = false
-                        context.send(viewAction: .enableTextFormatting)
-                    } label: {
-                        Label(L10n.screenRoomAttachmentTextFormatting, iconAsset: Asset.Images.textFormat)
-                            .labelStyle(.menuSheet)
-                    }
-                    .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerTextFormatting)
-                }
-            }
-            .padding(.top, isPresented ? 20 : 0)
-            .background {
-                // This is done in the background otherwise GeometryReader tends to expand to
-                // all the space given to it like color or shape.
-                GeometryReader { proxy in
-                    Color.clear
-                        .onAppear {
-                            sheetContentHeight = proxy.size.height
-                        }
-                }
-            }
-            .presentationDetents([.height(sheetContentHeight)])
-            .presentationBackground(Color.compound.bgCanvasDefault)
-            .presentationDragIndicator(.visible)
+            menuContent
+                .padding(.top, isPresented ? 20 : 0)
+                .readFrame($sheetContentFrame)
+                .presentationDetents([.height(sheetContentFrame.height)])
+                .presentationBackground(.compound.bgCanvasDefault)
+                .presentationDragIndicator(.visible)
         }
     }
+    
+    var menuContent: some View {
+        VStack(alignment: .leading, spacing: 0.0) {
+            Button {
+                context.showAttachmentPopover = false
+                context.send(viewAction: .displayMediaPicker)
+            } label: {
+                Label(L10n.screenRoomAttachmentSourceGallery, icon: \.image)
+                    .labelStyle(.menuSheet)
+            }
+            .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerPhotoLibrary)
+            
+            Button {
+                context.showAttachmentPopover = false
+                context.send(viewAction: .displayDocumentPicker)
+            } label: {
+                Label(L10n.screenRoomAttachmentSourceFiles, iconAsset: Asset.Images.attachment)
+                    .labelStyle(.menuSheet)
+            }
+            .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerDocuments)
+            
+            Button {
+                context.showAttachmentPopover = false
+                context.send(viewAction: .displayCameraPicker)
+            } label: {
+                Label(L10n.screenRoomAttachmentSourceCamera, iconAsset: Asset.Images.takePhoto)
+                    .labelStyle(.menuSheet)
+            }
+            .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerCamera)
+
+            Button {
+                context.showAttachmentPopover = false
+                context.send(viewAction: .displayLocationPicker)
+            } label: {
+                Label(L10n.screenRoomAttachmentSourceLocation, iconAsset: Asset.Images.addLocation)
+                    .labelStyle(.menuSheet)
+            }
+            .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerLocation)
+
+            Button {
+                context.showAttachmentPopover = false
+                context.send(viewAction: .displayNewPollForm)
+            } label: {
+                Label(L10n.screenRoomAttachmentSourcePoll, iconAsset: Asset.Images.polls)
+                    .labelStyle(.menuSheet)
+            }
+            .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerPoll)
+
+            if ServiceLocator.shared.settings.richTextEditorEnabled {
+                Button {
+                    context.showAttachmentPopover = false
+                    context.send(viewAction: .enableTextFormatting)
+                } label: {
+                    Label(L10n.screenRoomAttachmentTextFormatting, iconAsset: Asset.Images.textFormat)
+                        .labelStyle(.menuSheet)
+                }
+                .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerTextFormatting)
+            }
+        }
+    }
+}
+
+private struct RoomAttachmentPickerButtonStyle: ButtonStyle {
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .foregroundStyle(configuration.isPressed ? .compound.bgActionPrimaryPressed : .compound.bgActionPrimaryRest)
+            // Disable animations to fix a bug when the system is in Light mode but the app in Dark mode. For some
+            // reason the animation causes a glitch with sheet's colour scheme when there are presentation detents.
+            // https://github.com/vector-im/element-x-ios/issues/2157
+            .animation(.noAnimation, value: configuration.isPressed)
+    }
 }
 
 struct RoomAttachmentPicker_Previews: PreviewProvider, TestablePreview {

changelog.d/2157.bugfix

@@ -0,0 +1 @@
+Fix the room attachment popover label colour when using the in-app appearance override.