From ca97420c860d68c2c46c3b30c92985c4b18e9fc5 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Thu, 5 Oct 2023 11:42:32 +1100
Subject: [PATCH] fix: timer alignment for timer notifications

---
 .../conversation/TimerNotification.tsx        | 49 +++++++++++--------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/ts/components/conversation/TimerNotification.tsx b/ts/components/conversation/TimerNotification.tsx
index 4eef19309..0e020f263 100644
--- a/ts/components/conversation/TimerNotification.tsx
+++ b/ts/components/conversation/TimerNotification.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import styled from 'styled-components';
 import { PropsForExpirationTimer } from '../../state/ducks/conversations';
 import { assertUnreachable } from '../../types/sqlSharedTypes';
 
@@ -9,6 +10,10 @@ import { SpacerSM, Text } from '../basic/Text';
 import { Flex } from '../basic/Flex';
 import { isLegacyDisappearingModeEnabled } from '../../util/expiringMessages';
 
+const StyledTimerNotificationContainer = styled.div`
+  padding: 0 var(--margins-lg) 0;
+`;
+
 export const TimerNotification = (props: PropsForExpirationTimer) => {
   const { messageId, pubkey, profileName, expirationMode, timespan, type, disabled } = props;
 
@@ -46,27 +51,29 @@ export const TimerNotification = (props: PropsForExpirationTimer) => {
   }
 
   return (
-    <ExpirableReadableMessage
-      messageId={messageId}
-      isCentered={true}
-      key={`readable-message-${messageId}`}
-      dataTestId={'disappear-control-message'}
-    >
-      <Flex
-        container={true}
-        flexDirection="column"
-        alignItems="center"
-        justifyContent="center"
-        width="90%"
-        maxWidth="700px"
-        margin="10px auto"
-        padding="5px 10px"
-        style={{ textAlign: 'center' }}
+    <StyledTimerNotificationContainer>
+      <ExpirableReadableMessage
+        messageId={messageId}
+        isCentered={true}
+        key={`readable-message-${messageId}`}
+        dataTestId={'disappear-control-message'}
       >
-        <SessionIcon iconType="stopwatch" iconColor="inherit" iconSize="medium" />
-        <SpacerSM />
-        <Text text={textToRender} />
-      </Flex>
-    </ExpirableReadableMessage>
+        <Flex
+          container={true}
+          flexDirection="column"
+          alignItems="center"
+          justifyContent="center"
+          width="90%"
+          maxWidth="700px"
+          margin="10px auto"
+          padding="5px 10px"
+          style={{ textAlign: 'center' }}
+        >
+          <SessionIcon iconType="stopwatch" iconColor="inherit" iconSize="medium" />
+          <SpacerSM />
+          <Text text={textToRender} />
+        </Flex>
+      </ExpirableReadableMessage>
+    </StyledTimerNotificationContainer>
   );
 };