fix: fixed timer alignment once and for all

ts/components/conversation/ExpireTimer.tsx

@@ -4,11 +4,10 @@ import { getTimerBucketIcon } from '../../util/timer';
 
 // tslint:disable-next-line: no-submodule-imports
 import useInterval from 'react-use/lib/useInterval';
-import styled from 'styled-components';
+import styled, { CSSProperties } from 'styled-components';
 import { SessionIcon } from '../icon/SessionIcon';
 
 const ExpireTimerBucket = styled.div`
-  margin-inline-start: 6px;
   font-size: var(--font-size-xs);
   line-height: 16px;
   letter-spacing: 0.3px;
@@ -20,11 +19,11 @@ const ExpireTimerBucket = styled.div`
 type Props = {
   expirationLength: number; // should be in milliseconds
   expirationTimestamp: number | null;
-  isCorrectSide: boolean;
+  style: CSSProperties;
 };
 
 export const ExpireTimer = (props: Props) => {
-  const { expirationLength, expirationTimestamp, isCorrectSide } = props;
+  const { expirationLength, expirationTimestamp, style } = props;
 
   const initialTimeLeft = Math.max(Math.round(((expirationTimestamp || 0) - Date.now()) / 1000), 0);
   const [timeLeft, setTimeLeft] = useState(initialTimeLeft);
@@ -41,7 +40,7 @@ export const ExpireTimer = (props: Props) => {
   const updateFrequency = 500;
   useInterval(update, updateFrequency);
 
-  if (!(isCorrectSide && expirationLength && expirationTimestamp)) {
+  if (!(expirationLength && expirationTimestamp)) {
     return null;
   }
 
@@ -50,7 +49,7 @@ export const ExpireTimer = (props: Props) => {
   const bucket = getTimerBucketIcon(expirationTimestamp, expirationLength);
 
   return (
-    <ExpireTimerBucket>
+    <ExpireTimerBucket style={style}>
       <SessionIcon iconType={bucket} iconSize="tiny" iconColor={expireTimerColor} />
     </ExpireTimerBucket>
   );

ts/components/conversation/TimerNotification.tsx

@@ -12,11 +12,11 @@ import styled from 'styled-components';
 const StyledTimerNotification = styled(Flex)`
   text-align: center;
 `;
+
 export const TimerNotification = (props: PropsForExpirationTimer) => {
   const {
     messageId,
     receivedAt,
-    direction,
     isUnread,
     pubkey,
     profileName,
@@ -66,12 +66,15 @@ export const TimerNotification = (props: PropsForExpirationTimer) => {
     <ExpirableReadableMessage
       convoId={props.convoId}
       messageId={messageId}
-      direction={direction}
+      direction={type === 'fromOther' ? 'incoming' : 'outgoing'}
       receivedAt={receivedAt}
       isUnread={isUnread}
       expirationLength={expirationLength}
       expirationTimestamp={expirationTimestamp}
       isExpired={props.isExpired}
+      isCentered={true}
+      marginInlineStart={`calc(var(--margins-lg) + 6px)`}
+      marginInlineEnd={`calc(var(--margins-lg) + 6px)`}
       key={`readable-message-${messageId}`}
     >
       <StyledTimerNotification

ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx

@@ -64,7 +64,9 @@ function useIsExpired(props: PropsForExpiringMessage) {
   return { isExpired };
 }
 
-const StyledReadableMessage = styled(ReadableMessage)<{ isIncoming: boolean }>`
+const StyledReadableMessage = styled(ReadableMessage)<{
+  isIncoming: boolean;
+}>`
   display: flex;
   justify-content: ${props => (props.isIncoming ? 'flex-start' : 'flex-end')};
   align-items: center;
@@ -75,6 +77,9 @@ export interface ExpirableReadableMessageProps
   extends ReadableMessageProps,
     PropsForExpiringMessage {
   direction: MessageModelType;
+  isCentered?: boolean;
+  marginInlineStart?: string;
+  marginInlineEnd?: string;
 }
 
 export const ExpirableReadableMessage = (props: ExpirableReadableMessageProps) => {
@@ -86,6 +91,9 @@ export const ExpirableReadableMessage = (props: ExpirableReadableMessageProps) =
     isUnread,
     expirationLength,
     expirationTimestamp,
+    isCentered,
+    marginInlineStart = '6px',
+    marginInlineEnd = '6px',
   } = props;
 
   const expiringProps: PropsForExpiringMessage = {
@@ -113,17 +121,25 @@ export const ExpirableReadableMessage = (props: ExpirableReadableMessageProps) =
     >
       {expirationLength && expirationTimestamp && (
         <ExpireTimer
-          isCorrectSide={!isIncoming}
           expirationLength={expirationLength}
           expirationTimestamp={expirationTimestamp}
+          style={{
+            display: !isCentered && isIncoming ? 'none' : 'block',
+            visibility: !isIncoming ? 'visible' : 'hidden',
+            marginInlineStart,
+          }}
         />
       )}
       {props.children}
       {expirationLength && expirationTimestamp && (
         <ExpireTimer
-          isCorrectSide={isIncoming}
           expirationLength={expirationLength}
           expirationTimestamp={expirationTimestamp}
+          style={{
+            display: !isCentered && !isIncoming ? 'none' : 'block',
+            visibility: isIncoming ? 'visible' : 'hidden',
+            marginInlineEnd,
+          }}
         />
       )}
     </StyledReadableMessage>