fix: fix reply border style (#2197)

* fix: fix reply border * chore: revert move of MessageRepliesAvatars * chore: revert styling * chore: update snapshot * chore: remove margin * chore: update snapshot
GetStream · Sep 4, 2023 · 0e84191 · 0e84191
1 parent f559a0f
commit 0e84191
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 21 deletions.
diff --git a/package/src/components/Message/MessageSimple/MessageReplies.tsx b/package/src/components/Message/MessageSimple/MessageReplies.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ColorValue, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { ColorValue, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import {
   MessageContextValue,
@@ -28,15 +28,9 @@ const styles = StyleSheet.create({
   },
   leftMessageRepliesCurve: {
     borderBottomLeftRadius: 16,
-    borderRightColor: 'transparent',
-    ...Platform.select({
-      android: {
-        borderRightWidth: 0,
-      },
-    }),
+    borderRightWidth: 0,
   },
   messageRepliesCurve: {
-    borderTopColor: 'transparent',
     borderTopWidth: 0,
     borderWidth: 1,
     height: 16,
@@ -46,16 +40,11 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: '700',
     paddingBottom: 5,
-    paddingLeft: 8,
+    paddingHorizontal: 8,
   },
   rightMessageRepliesCurve: {
     borderBottomRightRadius: 16,
-    borderLeftColor: 'transparent',
-    ...Platform.select({
-      android: {
-        borderLeftWidth: 0,
-      },
-    }),
+    borderLeftWidth: 0,
   },
 });
 
@@ -112,7 +101,7 @@ const MessageRepliesWithContext = <
   return (
     <View style={styles.curveContainer}>
       {alignment === 'left' && (
-        <View testID='message-replies-left'>
+        <View style={styles.curveContainer} testID='message-replies-left'>
           {!noBorder && (
             <View
               style={[
@@ -166,7 +155,7 @@ const MessageRepliesWithContext = <
         </Text>
       </TouchableOpacity>
       {alignment === 'right' && (
-        <View testID='message-replies-right'>
+        <View style={styles.curveContainer} testID='message-replies-right'>
           <MessageRepliesAvatars alignment={alignment} message={message} />
           {!noBorder && (
             <View

diff --git a/package/src/components/Message/MessageSimple/MessageRepliesAvatars.tsx b/package/src/components/Message/MessageSimple/MessageRepliesAvatars.tsx
@@ -54,7 +54,7 @@ export const MessageRepliesAvatarsWithContext = <
     <View
       style={[
         styles.avatarContainer,
-        alignment === 'right' ? { marginLeft: 8, ...rightAvatarsContainer } : leftAvatarsContainer,
+        alignment === 'right' ? rightAvatarsContainer : leftAvatarsContainer,
       ]}
     >
       {avatars.map((user, i) => (

diff --git a/.../src/components/Message/MessageSimple/__tests__/__snapshots__/MessageReplies.test.js.snap b/.../src/components/Message/MessageSimple/__tests__/__snapshots__/MessageReplies.test.js.snap
@@ -9,6 +9,11 @@ exports[`MessageReplies should render message replies 1`] = `
   }
 >
   <View
+    style={
+      Object {
+        "flexDirection": "row",
+      }
+    }
     testID="message-replies-left"
   >
     <View
@@ -18,15 +23,14 @@ exports[`MessageReplies should render message replies 1`] = `
             "borderColor": undefined,
           },
           Object {
-            "borderTopColor": "transparent",
             "borderTopWidth": 0,
             "borderWidth": 1,
             "height": 16,
             "width": 16,
           },
           Object {
             "borderBottomLeftRadius": 16,
-            "borderRightColor": "transparent",
+            "borderRightWidth": 0,
           },
           Object {},
         ]
@@ -73,7 +77,7 @@ exports[`MessageReplies should render message replies 1`] = `
             "fontSize": 12,
             "fontWeight": "700",
             "paddingBottom": 5,
-            "paddingLeft": 8,
+            "paddingHorizontal": 8,
           },
           Object {
             "color": "#005FFF",