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,29 +46,27 @@ export const TimerNotification = (props: PropsForExpirationTimer) => {
   }
 
   return (
-    <StyledTimerNotificationContainer>
-      <ExpirableReadableMessage
-        messageId={messageId}
-        isCentered={true}
-        key={`readable-message-${messageId}`}
-        dataTestId={'disappear-control-message'}
+    <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' }}
       >
-        <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>
+        <SessionIcon iconType="stopwatch" iconColor="inherit" iconSize="medium" />
+        <SpacerSM />
+        <Text text={textToRender} />
+      </Flex>
+    </ExpirableReadableMessage>
   );
 };

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,29 +17,27 @@ export const DataExtractionNotification = (props: PropsForDataExtractionNotifica
   }
 
   return (
-    <StyledDataExtractionNotificationContainer>
-      <ExpirableReadableMessage
-        messageId={messageId}
-        key={`readable-message-${messageId}`}
-        isCentered
+    <ExpirableReadableMessage
+      messageId={messageId}
+      key={`readable-message-${messageId}`}
+      isCentered
+    >
+      <Flex
+        container={true}
+        flexDirection="column"
+        alignItems="center"
+        justifyContent="center"
+        width="90%"
+        maxWidth="700px"
+        margin="10px auto"
+        padding="5px 10px"
+        id={`msg-${messageId}`}
+        style={{ textAlign: 'center' }}
       >
-        <Flex
-          container={true}
-          flexDirection="column"
-          alignItems="center"
-          justifyContent="center"
-          width="90%"
-          maxWidth="700px"
-          margin="10px auto"
-          padding="5px 10px"
-          id={`msg-${messageId}`}
-          style={{ textAlign: 'center' }}
-        >
-          <SessionIcon iconType="save" iconColor="inherit" iconSize="large" />
-          <SpacerSM />
-          <Text text={contentText} ellipsisOverflow={true} />
-        </Flex>
-      </ExpirableReadableMessage>
-    </StyledDataExtractionNotificationContainer>
+        <SessionIcon iconType="save" iconColor="inherit" iconSize="large" />
+        <SpacerSM />
+        <Text text={contentText} ellipsisOverflow={true} />
+      </Flex>
+    </ExpirableReadableMessage>
   );
 };

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,36 +76,34 @@ export const GroupInvitation = (props: PropsForGroupInvitation) => {
   const openGroupInvitation = window.i18n('openGroupInvitation');
 
   return (
-    <StyledGroupInvitationContainer>
-      <ExpirableReadableMessage
-        messageId={messageId}
-        key={`readable-message-${messageId}`}
-        dataTestId="control-message"
-      >
-        <StyledGroupInvitation className={classNames(classes)}>
-          <div className="contents">
-            <StyledIconContainer>
-              <SessionIconButton
-                iconColor={
-                  props.direction === 'outgoing'
-                    ? 'var(--message-bubbles-sent-text-color)'
-                    : 'var(--message-bubbles-received-text-color)'
-                }
-                iconType={props.direction === 'outgoing' ? 'communities' : 'plus'}
-                iconSize={'large'}
-                onClick={() => {
-                  acceptOpenGroupInvitation(props.acceptUrl, props.serverName);
-                }}
-              />
-            </StyledIconContainer>
-            <span className="group-details">
-              <span className="group-name">{props.serverName}</span>
-              <span className="group-type">{openGroupInvitation}</span>
-              <span className="group-address">{props.url}</span>
-            </span>
-          </div>
-        </StyledGroupInvitation>
-      </ExpirableReadableMessage>
-    </StyledGroupInvitationContainer>
+    <ExpirableReadableMessage
+      messageId={messageId}
+      key={`readable-message-${messageId}`}
+      dataTestId="control-message"
+    >
+      <StyledGroupInvitation className={classNames(classes)}>
+        <div className="contents">
+          <StyledIconContainer>
+            <SessionIconButton
+              iconColor={
+                props.direction === 'outgoing'
+                  ? 'var(--message-bubbles-sent-text-color)'
+                  : 'var(--message-bubbles-received-text-color)'
+              }
+              iconType={props.direction === 'outgoing' ? 'communities' : 'plus'}
+              iconSize={'large'}
+              onClick={() => {
+                acceptOpenGroupInvitation(props.acceptUrl, props.serverName);
+              }}
+            />
+          </StyledIconContainer>
+          <span className="group-details">
+            <span className="group-name">{props.serverName}</span>
+            <span className="group-type">{openGroupInvitation}</span>
+            <span className="group-address">{props.url}</span>
+          </span>
+        </div>
+      </StyledGroupInvitation>
+    </ExpirableReadableMessage>
   );
 };

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,23 +72,17 @@ 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}`}
-        dataTestId="group-update-message"
-        isCentered={true}
-      >
-        <NotificationBubble notificationText={ChangeItem(change)} iconType="users" />
-      </ExpirableReadableMessage>
-    </StyledGroupUpdateContainer>
+    <ExpirableReadableMessage
+      messageId={messageId}
+      key={`readable-message-${messageId}`}
+      dataTestId="group-update-message"
+      isCentered={true}
+    >
+      <NotificationBubble notificationText={ChangeItem(change)} iconType="users" />
+    </ExpirableReadableMessage>
   );
 };

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,18 +59,16 @@ export const CallNotification = (props: PropsForCallNotification) => {
   const iconColor = styleItem.iconColor;
 
   return (
-    <StyledCallNotificationContainer>
-      <ExpirableReadableMessage
-        messageId={messageId}
-        key={`readable-message-${messageId}`}
-        isCentered={true}
-      >
-        <NotificationBubble
-          notificationText={notificationText}
-          iconType={iconType}
-          iconColor={iconColor}
-        />
-      </ExpirableReadableMessage>
-    </StyledCallNotificationContainer>
+    <ExpirableReadableMessage
+      messageId={messageId}
+      key={`readable-message-${messageId}`}
+      isCentered={true}
+    >
+      <NotificationBubble
+        notificationText={notificationText}
+        iconType={iconType}
+        iconColor={iconColor}
+      />
+    </ExpirableReadableMessage>
   );
 };