From ed1ec21002d9615bec5877de3fcb364125f3dd98 Mon Sep 17 00:00:00 2001
From: Felipe Rocha <felipe.rocha@gympass.com>
Date: Mon, 27 May 2024 09:13:33 -0300
Subject: [PATCH] fix: add extra margin to result title and badge container

---
 .../native/Result/__snapshots__/index.test.jsx.snap  | 12 ++++++++++++
 packages/yoga/src/Result/native/Result/index.jsx     | 11 ++++++++---
 packages/yoga/src/Result/native/Result/styles.jsx    |  5 -----
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/yoga/src/Result/native/Result/__snapshots__/index.test.jsx.snap b/packages/yoga/src/Result/native/Result/__snapshots__/index.test.jsx.snap
index a329b076e4..7802f9cb15 100644
--- a/packages/yoga/src/Result/native/Result/__snapshots__/index.test.jsx.snap
+++ b/packages/yoga/src/Result/native/Result/__snapshots__/index.test.jsx.snap
@@ -533,11 +533,15 @@ exports[`<Result /> should match snapshot 1`] = `
       </View>
     </View>
     <View
+      alignItems="center"
+      flexDirection="row"
+      marginRight="zero"
       style={
         [
           {
             "alignItems": "center",
             "flexDirection": "row",
+            "marginRight": 0,
           },
         ]
       }
@@ -1180,11 +1184,15 @@ exports[`<Result /> should match snapshot without attendence 1`] = `
     }
   >
     <View
+      alignItems="center"
+      flexDirection="row"
+      marginRight="zero"
       style={
         [
           {
             "alignItems": "center",
             "flexDirection": "row",
+            "marginRight": 0,
           },
         ]
       }
@@ -2074,11 +2082,15 @@ exports[`<Result /> should match snapshot without limitLabel prop 1`] = `
       </View>
     </View>
     <View
+      alignItems="center"
+      flexDirection="row"
+      marginRight="zero"
       style={
         [
           {
             "alignItems": "center",
             "flexDirection": "row",
+            "marginRight": 0,
           },
         ]
       }
diff --git a/packages/yoga/src/Result/native/Result/index.jsx b/packages/yoga/src/Result/native/Result/index.jsx
index b3fd16833c..4cadaec5a9 100644
--- a/packages/yoga/src/Result/native/Result/index.jsx
+++ b/packages/yoga/src/Result/native/Result/index.jsx
@@ -3,10 +3,11 @@ import React, { isValidElement } from 'react';
 import { arrayOf, string, shape, func, bool, node } from 'prop-types';
 
 import Text from '../../../Text';
+import Box from '../../../Box';
 import Attendances from '../Attendances';
 import Badge from '../Badge';
 
-import { Content, StyledBox, TitleAndBadgeContainer } from './styles';
+import { Content, StyledBox } from './styles';
 
 /**
  * The Result component is used when you have a list to show. It is applied to
@@ -33,7 +34,11 @@ const Result = ({
           color={attendancesColor}
         />
       )}
-      <TitleAndBadgeContainer>
+      <Box
+        flexDirection="row"
+        alignItems="center"
+        marginRight={badgeIcon ? 'small' : 'zero'}
+      >
         <Text.Body1 numberOfLines={1} bold>
           {title}
         </Text.Body1>
@@ -50,7 +55,7 @@ const Result = ({
             h="small"
           />
         )}
-      </TitleAndBadgeContainer>
+      </Box>
       {subTitle && subTitle !== '' && (
         <Text.Body2 numberOfLines={1} color="deep">
           {subTitle}
diff --git a/packages/yoga/src/Result/native/Result/styles.jsx b/packages/yoga/src/Result/native/Result/styles.jsx
index 37e9c370ce..4e1bf3a8c2 100644
--- a/packages/yoga/src/Result/native/Result/styles.jsx
+++ b/packages/yoga/src/Result/native/Result/styles.jsx
@@ -31,8 +31,3 @@ export const Content = styled.View`
     `;
   }}
 `;
-
-export const TitleAndBadgeContainer = styled(Box)`
-  flex-direction: row;
-  align-items: center;
-`;