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,22 +22,29 @@ 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)
+            CompoundIcon(asset: Asset.Images.composerAttachment, size: .custom(30), relativeTo: .title)
-                .resizable()
-                .scaledToFit()
-                .scaledFrame(size: 30, relativeTo: .title)
-                .foregroundColor(.compound.textActionPrimary)
                 .scaledPadding(7, relativeTo: .title)
         }
+        .buttonStyle(RoomAttachmentPickerButtonStyle())
         .accessibilityLabel(L10n.actionAddToTimeline)
         .accessibilityIdentifier(A11yIdentifiers.roomScreen.composerToolbar.openComposeOptions)
         .popover(isPresented: $context.showAttachmentPopover) {
+            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
@@ -95,21 +102,17 @@ struct RoomAttachmentPicker: View {
                 .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)])
+private struct RoomAttachmentPickerButtonStyle: ButtonStyle {
-            .presentationBackground(Color.compound.bgCanvasDefault)
+    func makeBody(configuration: Configuration) -> some View {
-            .presentationDragIndicator(.visible)
+        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)
     }
 }
 

changelog.d/2157.bugfix

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