fix: styling for markerbadge

Expensify · Aug 12, 2021 · cc630ed · cc630ed
1 parent dd79836
commit cc630ed
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 39 deletions.
diff --git a/src/pages/home/report/MarkerBadge.js b/src/pages/home/report/MarkerBadge.js
@@ -67,48 +67,51 @@ class Markerbadge extends PureComponent {
         return (
             <View style={styles.reportMarkerBadgeWrapper}>
                 <Animated.View style={[
-                    styles.flexRow,
-                    styles.justifyContentBetween,
-                    styles.alignItemsCenter,
                     styles.reportMarkerBadge,
                     styles.reportMarkerBadgeTransformation(this.translateY),
                 ]}
                 >
-                    <Button
-                        success
-                        small
-                        onPress={this.props.onClick}
-                        ContentComponent={() => (
-                            <View style={[styles.flexRow]}>
-                                <Icon small src={DownArrow} fill={themeColors.textReversed} />
-                                <Text
-                                    selectable={false}
-                                    style={[
-                                        styles.ml2,
-                                        styles.buttonSmallText,
-                                        styles.textWhite,
-                                    ]}
-                                >
-                                    {this.props.translate(
-                                        'reportActionsViewMarkerBadge.newMsg',
-                                        {count: this.props.count},
-                                    )}
-                                </Text>
-                            </View>
-                        )}
-                        shouldRemoveRightBorderRadius
-                        style={[styles.flex1]}
-                    />
-                    <Button
-                        success
-                        small
-                        style={[styles.buttonDropdown]}
-                        onPress={this.props.onClose}
-                        shouldRemoveLeftBorderRadius
-                        ContentComponent={() => (
-                            <Icon small src={Close} fill={themeColors.textReversed} />
-                        )}
-                    />
+                    <View style={[
+                        styles.flexRow,
+                        styles.justifyContentBetween,
+                        styles.alignItemsCenter,
+                    ]}
+                    >
+                        <Button
+                            success
+                            small
+                            onPress={this.props.onClick}
+                            ContentComponent={() => (
+                                <View style={[styles.flexRow]}>
+                                    <Icon small src={DownArrow} fill={themeColors.textReversed} />
+                                    <Text
+                                        selectable={false}
+                                        style={[
+                                            styles.ml2,
+                                            styles.buttonSmallText,
+                                            styles.textWhite,
+                                        ]}
+                                    >
+                                        {this.props.translate(
+                                            'reportActionsViewMarkerBadge.newMsg',
+                                            {count: this.props.count},
+                                        )}
+                                    </Text>
+                                </View>
+                            )}
+                            shouldRemoveRightBorderRadius
+                        />
+                        <Button
+                            success
+                            small
+                            style={[styles.buttonDropdown]}
+                            onPress={this.props.onClose}
+                            shouldRemoveLeftBorderRadius
+                            ContentComponent={() => (
+                                <Icon small src={Close} fill={themeColors.textReversed} />
+                            )}
+                        />
+                    </View>
                 </Animated.View>
             </View>
         );

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -250,7 +250,8 @@ const styles = {
     },
 
     buttonDropdown: {
-        marginLeft: 1,
+        borderLeftWidth: 1,
+        borderColor: themeColors.textReversed,
     },
 
     noRightBorderRadius: {