From 8fa9b80fad5bca0ad9f4369fdddbda34daba74d5 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Thu, 9 Nov 2023 11:08:43 +1100
Subject: [PATCH] fix: made the saved media notification a bubble

as it is not pretty otherwise
---
 .../DataExtractionNotification.tsx            | 21 ++-----------------
 1 file changed, 2 insertions(+), 19 deletions(-)

diff --git a/ts/components/conversation/message/message-item/DataExtractionNotification.tsx b/ts/components/conversation/message/message-item/DataExtractionNotification.tsx
index c33b8e3c5..9d93625fe 100644
--- a/ts/components/conversation/message/message-item/DataExtractionNotification.tsx
+++ b/ts/components/conversation/message/message-item/DataExtractionNotification.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 import { PropsForDataExtractionNotification } from '../../../../models/messageType';
 import { SignalService } from '../../../../protobuf';
-import { Flex } from '../../../basic/Flex';
-import { SpacerSM, Text } from '../../../basic/Text';
-import { SessionIcon } from '../../../icon';
 import { ExpirableReadableMessage } from './ExpirableReadableMessage';
+import { NotificationBubble } from './notification-bubble/NotificationBubble';
 
 export const DataExtractionNotification = (props: PropsForDataExtractionNotification) => {
   const { name, type, source, messageId } = props;
@@ -23,22 +21,7 @@ export const DataExtractionNotification = (props: PropsForDataExtractionNotifica
       key={`readable-message-${messageId}`}
       isControlMessage={true}
     >
-      <Flex
-        container={true}
-        flexDirection="column"
-        alignItems="center"
-        justifyContent="center"
-        width="90%"
-        maxWidth="700px"
-        margin="5px auto 10px auto" // top margin is smaller that bottom one to make the stopwatch icon of expirable message closer to its content
-        padding="5px 10px"
-        id={`msg-${messageId}`}
-        style={{ textAlign: 'center' }}
-      >
-        <SessionIcon iconType="save" iconColor="inherit" iconSize="large" />
-        <SpacerSM />
-        <Text text={contentText} ellipsisOverflow={true} />
-      </Flex>
+      <NotificationBubble notificationText={contentText} iconType="save" />
     </ExpirableReadableMessage>
   );
 };