fix: group invitation timer alignment

updated data extraction notification design. Just waiting on icon from ios

stylesheets/_conversation.scss

@@ -9,71 +9,3 @@
   padding-inline-start: 10px;
   padding-inline-end: 10px;
 }
-
-.group-invitation-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.group-invitation {
-  background-color: var(--message-bubbles-received-background-color);
-
-  &.invitation-outgoing {
-    background-color: var(--message-bubbles-sent-background-color);
-    align-self: flex-end;
-
-    .contents {
-      .session-icon-button {
-        background-color: var(--transparent-color);
-      }
-    }
-  }
-
-  display: inline-block;
-  margin: 4px 16px;
-  padding: 4px;
-
-  border-radius: var(--border-radius-message-box);
-
-  align-self: flex-start;
-
-  box-shadow: none;
-
-  .contents {
-    display: flex;
-    align-items: center;
-    margin: 6px;
-
-    .invite-group-avatar {
-      height: 48px;
-      width: 48px;
-    }
-
-    .group-details {
-      display: inline-flex;
-      flex-direction: column;
-
-      padding: 0px 12px;
-      .group-name {
-        font-weight: bold;
-        font-size: 18px;
-      }
-    }
-
-    .session-icon-button {
-      background-color: var(--primary-color);
-    }
-  }
-}
-
-.group-invitation {
-  .group-details {
-    color: var(--message-bubbles-received-text-color);
-  }
-}
-
-.group-invitation.invitation-outgoing {
-  .group-details {
-    color: var(--message-bubbles-sent-text-color);
-  }
-}

ts/components/conversation/TimerNotification.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import styled from 'styled-components';
 import { PropsForExpirationTimer } from '../../state/ducks/conversations';
 import { assertUnreachable } from '../../types/sqlSharedTypes';
 
@@ -10,10 +9,6 @@ import { SpacerSM, Text } from '../basic/Text';
 import { Flex } from '../basic/Flex';
 import { isLegacyDisappearingModeEnabled } from '../../util/expiringMessages';
 
-const StyledTimerNotification = styled(Flex)`
-  text-align: center;
-`;
-
 export const TimerNotification = (props: PropsForExpirationTimer) => {
   const { messageId, pubkey, profileName, expirationType, timespan, type, disabled } = props;
 
@@ -59,7 +54,7 @@ export const TimerNotification = (props: PropsForExpirationTimer) => {
       key={`readable-message-${messageId}`}
       dataTestId={'disappear-control-message'}
     >
-      <StyledTimerNotification
+      <Flex
         container={true}
         flexDirection="column"
         alignItems="center"
@@ -68,11 +63,12 @@ export const TimerNotification = (props: PropsForExpirationTimer) => {
         maxWidth="700px"
         margin="10px auto"
         padding="5px 10px"
+        style={{ textAlign: 'center' }}
       >
         <SessionIcon iconType="stopwatch" iconColor="inherit" iconSize="medium" />
         <SpacerSM />
         <Text text={textToRender} />
-      </StyledTimerNotification>
+      </Flex>
     </ExpirableReadableMessage>
   );
 };

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

@@ -17,18 +17,27 @@ export const DataExtractionNotification = (props: PropsForDataExtractionNotifica
   }
 
   return (
-    <ExpirableReadableMessage messageId={messageId} key={`readable-message-${messageId}`}>
+    <ExpirableReadableMessage
+      messageId={messageId}
+      marginInlineStart={'calc(var(--margins-lg) + 6px)'}
+      marginInlineEnd={'calc(var(--margins-lg) + 6px)'}
+      key={`readable-message-${messageId}`}
+    >
       <Flex
         container={true}
-        flexDirection="row"
+        flexDirection="column"
         alignItems="center"
         justifyContent="center"
-        margin={'var(--margins-sm)'}
+        width="90%"
+        maxWidth="700px"
+        margin="10px auto"
+        padding="5px 10px"
         id={`msg-${messageId}`}
+        style={{ textAlign: 'center' }}
       >
-        <SessionIcon iconType="upload" iconSize="small" iconRotation={180} />
+        <SessionIcon iconType="upload" iconColor="inherit" iconSize="medium" iconRotation={180} />
         <SpacerSM />
-        <Text text={contentText} subtle={true} ellipsisOverflow={true} />
+        <Text text={contentText} ellipsisOverflow={true} />
       </Flex>
     </ExpirableReadableMessage>
   );

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

@@ -6,6 +6,62 @@ import { acceptOpenGroupInvitation } from '../../../../interactions/messageInter
 import { PropsForGroupInvitation } from '../../../../state/ducks/conversations';
 import { SessionIconButton } from '../../../icon';
 import { ExpirableReadableMessage } from './ExpirableReadableMessage';
+import { Flex } from '../../../basic/Flex';
+
+const StyledGroupInvitation = styled.div`
+  background-color: var(--message-bubbles-received-background-color);
+
+  &.invitation-outgoing {
+    background-color: var(--message-bubbles-sent-background-color);
+    align-self: flex-end;
+
+    .contents {
+      .group-details {
+        color: var(--message-bubbles-sent-text-color);
+      }
+      .session-icon-button {
+        background-color: var(--transparent-color);
+      }
+    }
+  }
+
+  display: inline-block;
+  margin: 4px 16px;
+  padding: 4px;
+
+  border-radius: var(--border-radius-message-box);
+
+  align-self: flex-start;
+
+  box-shadow: none;
+
+  .contents {
+    display: flex;
+    align-items: center;
+    margin: 6px;
+
+    .invite-group-avatar {
+      height: 48px;
+      width: 48px;
+    }
+
+    .group-details {
+      display: inline-flex;
+      flex-direction: column;
+      color: var(--message-bubbles-received-text-color);
+
+      padding: 0px 12px;
+      .group-name {
+        font-weight: bold;
+        font-size: 18px;
+      }
+    }
+
+    .session-icon-button {
+      background-color: var(--primary-color);
+    }
+  }
+`;
 
 const StyledIconContainer = styled.div`
   background-color: var(--message-link-preview-background-color);
@@ -23,8 +79,8 @@ export const GroupInvitation = (props: PropsForGroupInvitation) => {
 
   return (
     <ExpirableReadableMessage messageId={messageId} key={`readable-message-${messageId}`}>
-      <div className="group-invitation-container" id={`msg-${props.messageId}`}>
-        <div className={classNames(classes)}>
+      <Flex container={true} flexDirection={'column'} flexGrow={1} id={`msg-${props.messageId}`}>
+        <StyledGroupInvitation className={classNames(classes)}>
           <div className="contents">
             <StyledIconContainer>
               <SessionIconButton
@@ -46,8 +102,8 @@ export const GroupInvitation = (props: PropsForGroupInvitation) => {
               <span className="group-address">{props.url}</span>
             </span>
           </div>
-        </div>
-      </div>
+        </StyledGroupInvitation>
+      </Flex>
     </ExpirableReadableMessage>
   );
 };