feat: move padding globally to the messages list

we dont want individual padding on each message type

ts/components/conversation/SessionLastSeenIndicator.tsx

@@ -28,6 +28,7 @@ const LastSeenBarContainer = styled.div<{ darkMode?: boolean }>`
   padding-bottom: 35px;
   max-width: 300px;
   align-self: center;
+  margin: 0 auto;
   padding-top: 28px;
   display: flex;
   flex-direction: row;

ts/components/conversation/SessionMessagesList.tsx

@@ -2,6 +2,7 @@ import React, { useLayoutEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 
 import useKey from 'react-use/lib/useKey';
+import styled from 'styled-components';
 import {
   PropsForDataExtractionNotification,
   PropsForMessageRequestResponse,
@@ -33,6 +34,10 @@ function isNotTextboxEvent(e: KeyboardEvent) {
   return (e?.target as any)?.type === undefined;
 }
 
+const StyledMessagesList = styled.div`
+  padding: 0 var(--margins-lg) 0;
+`;
+
 let previousRenderedConvo: string | undefined;
 
 export const SessionMessagesList = (props: {
@@ -96,7 +101,7 @@ export const SessionMessagesList = (props: {
   }
 
   return (
-    <>
+    <StyledMessagesList>
       {messagesProps.map(messageProps => {
         const messageId = messageProps.message.props.messageId;
         const unreadIndicator = messageProps.showUnreadIndicator ? (
@@ -161,6 +166,6 @@ export const SessionMessagesList = (props: {
 
         return [<Message messageId={messageId} key={messageId} />, ...componentToMerge];
       })}
-    </>
+    </StyledMessagesList>
   );
 };

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 StyledTimerNotificationContainer = styled.div`
-  padding: 0 var(--margins-lg) 0;
-`;
-
 export const TimerNotification = (props: PropsForExpirationTimer) => {
   const { messageId, pubkey, profileName, expirationMode, timespan, type, disabled } = props;
 
@@ -51,7 +46,6 @@ export const TimerNotification = (props: PropsForExpirationTimer) => {
   }
 
   return (
-    <StyledTimerNotificationContainer>
     <ExpirableReadableMessage
       messageId={messageId}
       isCentered={true}
@@ -74,6 +68,5 @@ export const TimerNotification = (props: PropsForExpirationTimer) => {
         <Text text={textToRender} />
       </Flex>
     </ExpirableReadableMessage>
-    </StyledTimerNotificationContainer>
   );
 };

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components';
 import { PropsForDataExtractionNotification } from '../../../../models/messageType';
 import { SignalService } from '../../../../protobuf';
 import { Flex } from '../../../basic/Flex';
@@ -7,10 +6,6 @@ import { SpacerSM, Text } from '../../../basic/Text';
 import { SessionIcon } from '../../../icon';
 import { ExpirableReadableMessage } from './ExpirableReadableMessage';
 
-const StyledDataExtractionNotificationContainer = styled.div`
-  padding: 0 var(--margins-lg) 0;
-`;
-
 export const DataExtractionNotification = (props: PropsForDataExtractionNotification) => {
   const { name, type, source, messageId } = props;
 
@@ -22,7 +17,6 @@ export const DataExtractionNotification = (props: PropsForDataExtractionNotifica
   }
 
   return (
-    <StyledDataExtractionNotificationContainer>
     <ExpirableReadableMessage
       messageId={messageId}
       key={`readable-message-${messageId}`}
@@ -45,6 +39,5 @@ export const DataExtractionNotification = (props: PropsForDataExtractionNotifica
         <Text text={contentText} ellipsisOverflow={true} />
       </Flex>
     </ExpirableReadableMessage>
-    </StyledDataExtractionNotificationContainer>
   );
 };

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

@@ -46,7 +46,6 @@ const StyledReadableMessage = styled.div<{
   align-items: center;
   width: 100%;
   letter-spacing: 0.03rem;
-  padding: 0 var(--margins-lg) 0;
 
   &.message-highlighted {
     animation: ${highlightedMessageAnimation} 1s ease-in-out;

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

@@ -7,10 +7,6 @@ import { PropsForGroupInvitation } from '../../../../state/ducks/conversations';
 import { SessionIconButton } from '../../../icon';
 import { ExpirableReadableMessage } from './ExpirableReadableMessage';
 
-const StyledGroupInvitationContainer = styled.div`
-  padding: 0 var(--margins-lg) 0;
-`;
-
 const StyledGroupInvitation = styled.div`
   background-color: var(--message-bubbles-received-background-color);
 
@@ -80,7 +76,6 @@ export const GroupInvitation = (props: PropsForGroupInvitation) => {
   const openGroupInvitation = window.i18n('openGroupInvitation');
 
   return (
-    <StyledGroupInvitationContainer>
     <ExpirableReadableMessage
       messageId={messageId}
       key={`readable-message-${messageId}`}
@@ -110,6 +105,5 @@ export const GroupInvitation = (props: PropsForGroupInvitation) => {
         </div>
       </StyledGroupInvitation>
     </ExpirableReadableMessage>
-    </StyledGroupInvitationContainer>
   );
 };

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

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import styled from 'styled-components';
 import {
   PropsForGroupUpdate,
   PropsForGroupUpdateType,
@@ -73,15 +72,10 @@ const ChangeItem = (change: PropsForGroupUpdateType): string => {
   }
 };
 
-const StyledGroupUpdateContainer = styled.div`
-  padding: 0 var(--margins-lg) 0;
-`;
-
 export const GroupUpdateMessage = (props: PropsForGroupUpdate) => {
   const { change, messageId } = props;
 
   return (
-    <StyledGroupUpdateContainer>
     <ExpirableReadableMessage
       messageId={messageId}
       key={`readable-message-${messageId}`}
@@ -90,6 +84,5 @@ export const GroupUpdateMessage = (props: PropsForGroupUpdate) => {
     >
       <NotificationBubble notificationText={ChangeItem(change)} iconType="users" />
     </ExpirableReadableMessage>
-    </StyledGroupUpdateContainer>
   );
 };

ts/components/conversation/message/message-item/notification-bubble/CallNotification.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components';
 import { PubKey } from '../../../../../session/types';
 
 import {
@@ -39,10 +38,6 @@ const style: StyleType = {
   },
 };
 
-const StyledCallNotificationContainer = styled.div`
-  padding: 0 var(--margins-lg) 0;
-`;
-
 export const CallNotification = (props: PropsForCallNotification) => {
   const { messageId, notificationType } = props;
   const selectedConvoId = useSelectedConversationKey();
@@ -64,7 +59,6 @@ export const CallNotification = (props: PropsForCallNotification) => {
   const iconColor = styleItem.iconColor;
 
   return (
-    <StyledCallNotificationContainer>
     <ExpirableReadableMessage
       messageId={messageId}
       key={`readable-message-${messageId}`}
@@ -76,6 +70,5 @@ export const CallNotification = (props: PropsForCallNotification) => {
         iconColor={iconColor}
       />
     </ExpirableReadableMessage>
-    </StyledCallNotificationContainer>
   );
 };