From e04b3baed8655ce2136f9e14bd33d544c7fdb02a Mon Sep 17 00:00:00 2001
From: Jamie Kyle <113370520+jamiebuilds-signal@users.noreply.github.com>
Date: Mon, 12 May 2025 11:52:01 -0700
Subject: [PATCH] Add backdrop blur to image grid download button

---
 stylesheets/_modules.scss                     |  1 +
 .../conversation/ImageGrid.stories.tsx        | 36 +++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 94ad491f4c..b2b50ff83c 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -3086,6 +3086,7 @@ button.module-image__border-overlay:focus {
   & {
     background-color: variables.$color-black-alpha-80;
     color: variables.$color-white;
+    backdrop-filter: blur(10px);
 
     height: 44px;
     border-radius: 44px;
diff --git a/ts/components/conversation/ImageGrid.stories.tsx b/ts/components/conversation/ImageGrid.stories.tsx
index 6c0d26204c..fb759df848 100644
--- a/ts/components/conversation/ImageGrid.stories.tsx
+++ b/ts/components/conversation/ImageGrid.stories.tsx
@@ -16,6 +16,8 @@ import {
 } from '../../types/MIME';
 import { pngUrl, squareStickerUrl } from '../../storybook/Fixtures';
 import { fakeAttachment } from '../../test-both/helpers/fakeAttachment';
+import { strictAssert } from '../../util/assert';
+import { isDownloadable } from '../../types/Attachment';
 
 const { i18n } = window.SignalContext;
 
@@ -1040,3 +1042,37 @@ export function ContentAboveAndBelow(args: Props): JSX.Element {
 export function BottomOverlay(args: Props): JSX.Element {
   return <ImageGrid {...args} bottomOverlay />;
 }
+
+export function DownloadPill(args: Props): JSX.Element {
+  const attachment1 = fakeAttachment({
+    contentType: IMAGE_JPEG,
+    fileName: 'tina-rolf-269345-unsplash.jpg',
+    height: 1680,
+    width: 3000,
+    path: undefined,
+    blurHash: 'LDA,FDBnm+I=p{tkIUI;~UkpELV]',
+    key: 'mock-key',
+    digest: 'mock-digest',
+    cdnKey: 'mock-cdn-key',
+    cdnNumber: 4000,
+  });
+
+  const attachment2 = fakeAttachment({
+    contentType: IMAGE_JPEG,
+    fileName: 'tina-rolf-269345-unsplash.jpg',
+    height: 1680,
+    width: 3000,
+    path: undefined,
+    blurHash: 'LDA,FDBnm+I=p{tkIUI;~UkpELV]',
+    key: 'mock-key',
+    digest: 'mock-digest',
+    cdnKey: 'mock-cdn-key',
+    cdnNumber: 4000,
+  });
+
+  // Pill only shows if the attachments are downloadable
+  strictAssert(isDownloadable(attachment1), 'attachment1 must be downloadable');
+  strictAssert(isDownloadable(attachment2), 'attachment2 must be downloadable');
+
+  return <ImageGrid {...args} attachments={[attachment1, attachment2]} />;
+}