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 ;
}
+
+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 ;
+}