[Gekidou - MM-44258] Modifies post padding to 16 (#6292)

* modifies post padding to 16 instead of 20

* add spacing changes for date separator, new message line, youtube, files, thread overview, channel info, post with channel info

* update snapshots

Co-authored-by: Elias Nahum <nahumhbl@gmail.com>

app/components/post_list/date_separator/index.tsx

@@ -32,7 +32,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
         },
         date: {
             color: theme.centerChannelColor,
-            marginHorizontal: 16,
+            marginHorizontal: 12,
             ...typography('Body', 75, 'SemiBold'),
         },
     };

app/components/post_list/new_message_line/index.tsx

@@ -21,10 +21,10 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
             alignItems: 'center',
             flexDirection: 'row',
             height: 28,
-            paddingHorizontal: 20,
+            paddingHorizontal: 16,
         },
         textContainer: {
-            marginHorizontal: 15,
+            marginHorizontal: 8,
         },
         line: {
             flex: 1,

app/components/post_list/post/body/content/youtube/index.tsx

@@ -67,7 +67,7 @@ const YouTube = ({isReplyPost, layoutWidth, metadata}: YouTubeProps) => {
     const dimensions = calculateDimensions(
         MAX_YOUTUBE_IMAGE_HEIGHT,
         MAX_YOUTUBE_IMAGE_WIDTH,
-        layoutWidth || (getViewPortWidth(isReplyPost, isTablet) - 15),
+        layoutWidth || (getViewPortWidth(isReplyPost, isTablet) - 6),
     );
 
     const playYouTubeVideo = useCallback(() => {

app/components/post_list/post/body/files/files.tsx

@@ -128,7 +128,7 @@ const Files = ({canDownloadFiles, failed, filesInfo, isReplyPost, layoutWidth, l
                         nonVisibleImagesCount={nonVisibleImagesCount}
                         publicLinkEnabled={publicLinkEnabled}
                         updateFileForGallery={updateFileForGallery}
-                        wrapperWidth={layoutWidth || (getViewPortWidth(isReplyPost, isTablet) - 15)}
+                        wrapperWidth={layoutWidth || (getViewPortWidth(isReplyPost, isTablet) - 6)}
                         inViewPort={inViewPort}
                     />
                 </View>
@@ -142,7 +142,7 @@ const Files = ({canDownloadFiles, failed, filesInfo, isReplyPost, layoutWidth, l
         }
 
         const visibleImages = imageAttachments.slice(0, MAX_VISIBLE_ROW_IMAGES);
-        const portraitPostWidth = layoutWidth || (getViewPortWidth(isReplyPost, isTablet) - 15);
+        const portraitPostWidth = layoutWidth || (getViewPortWidth(isReplyPost, isTablet) - 6);
 
         let nonVisibleImagesCount;
         if (imageAttachments.length > MAX_VISIBLE_ROW_IMAGES) {

app/components/post_list/post/post.tsx

@@ -84,7 +84,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
         postStyle: {
             overflow: 'hidden',
             flex: 1,
-            paddingHorizontal: 20,
+            paddingHorizontal: 16,
         },
         profilePictureContainer: {
             marginBottom: 5,
@@ -96,7 +96,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
             flexDirection: 'column',
         },
         rightColumnPadding: {paddingBottom: 3},
-        touchableContainer: {marginHorizontal: -20, paddingHorizontal: 20},
+        touchableContainer: {marginHorizontal: -16, paddingHorizontal: 16},
     };
 });
 

app/components/post_list/thread_overview/__snapshots__/thread_overview.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`ThreadOverview should match snapshot when post is not saved and 0 repli
         "borderTopWidth": 1,
         "flexDirection": "row",
         "marginVertical": 12,
-        "paddingHorizontal": 20,
+        "paddingHorizontal": 16,
         "paddingVertical": 10,
       },
       Object {
@@ -122,7 +122,7 @@ exports[`ThreadOverview should match snapshot when post is saved and has replies
         "borderTopWidth": 1,
         "flexDirection": "row",
         "marginVertical": 12,
-        "paddingHorizontal": 20,
+        "paddingHorizontal": 16,
         "paddingVertical": 10,
       },
       undefined,

app/components/post_list/thread_overview/thread_overview.tsx

@@ -36,7 +36,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
             borderColor: changeOpacity(theme.centerChannelColor, 0.1),
             flexDirection: 'row',
             marginVertical: 12,
-            paddingHorizontal: 20,
+            paddingHorizontal: 16,
             paddingVertical: 10,
         },
         repliesCountContainer: {

app/components/post_with_channel_info/channel_info/channel_info.tsx

@@ -17,6 +17,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
         flex: 1,
         flexDirection: 'row',
         marginVertical: 8,
+        paddingHorizontal: 16,
     },
     channel: {
         ...typography('Body', 75, 'SemiBold'),

app/components/post_with_channel_info/post_with_channel_info.tsx

@@ -19,7 +19,7 @@ type Props = {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        paddingHorizontal: 20,
+        paddingHorizontal: 0,
     },
     content: {
         flexDirection: 'row',