[Core Branding] Fix Compose Bar Text Alignment

src/pages/home/report/ReportActionCompose.js

@@ -600,20 +600,22 @@ class ReportActionCompose extends React.Component {
                                                     </Tooltip>
                                                 )}
                                                 <Tooltip text={this.props.translate('reportActionCompose.addAction')}>
-                                                    <TouchableOpacity
-                                                        ref={el => this.actionButton = el}
-                                                        onPress={(e) => {
-                                                            e.preventDefault();
-
-                                                            // Drop focus to avoid blue focus ring.
-                                                            this.actionButton.blur();
-                                                            this.setMenuVisibility(true);
-                                                        }}
-                                                        style={styles.chatItemAttachButton}
-                                                        disabled={isBlockedFromConcierge || this.props.disabled}
-                                                    >
-                                                        <Icon src={Expensicons.Plus} />
-                                                    </TouchableOpacity>
+                                                    <View style={styles.chatItemAttachBorder}>
+                                                        <TouchableOpacity
+                                                            ref={el => this.actionButton = el}
+                                                            onPress={(e) => {
+                                                                e.preventDefault();
+
+                                                                // Drop focus to avoid blue focus ring.
+                                                                this.actionButton.blur();
+                                                                this.setMenuVisibility(true);
+                                                            }}
+                                                            style={styles.chatItemAttachButton}
+                                                            disabled={isBlockedFromConcierge || this.props.disabled}
+                                                        >
+                                                            <Icon src={Expensicons.Plus} />
+                                                        </TouchableOpacity>
+                                                    </View>
                                                 </Tooltip>
                                             </View>
                                             <PopoverMenu
@@ -637,7 +639,7 @@ class ReportActionCompose extends React.Component {
                                         </>
                                     )}
                                 </AttachmentPicker>
-                                <View style={styles.textInputComposeSpacing}>
+                                <View style={[styles.textInputComposeSpacing]}>
                                     <DragAndDrop
                                         dropZoneId={CONST.REPORT.DROP_NATIVE_ID}
                                         activeDropZoneId={CONST.REPORT.ACTIVE_DROP_NATIVE_ID}

src/pages/home/report/ReportActionItemSingle.js

@@ -73,7 +73,7 @@ const ReportActionItemSingle = (props) => {
     return (
         <View style={props.wrapperStyles}>
             <Pressable
-                style={[styles.alignSelfStart, styles.mr2]}
+                style={[styles.alignSelfStart]}
                 onPressIn={ControlSelection.block}
                 onPressOut={ControlSelection.unblock}
                 onPress={() => showUserDetails(props.action.actorEmail)}

src/styles/styles.js

@@ -691,11 +691,11 @@ const styles = {
     },
 
     chatItemComposeSecondaryRowOffset: {
-        marginLeft: 48,
+        marginLeft: variables.chatInputSpacing,
     },
 
     offlineIndicator: {
-        marginLeft: 48,
+        marginLeft: variables.chatInputSpacing,
     },
 
     offlineIndicatorMobile: {
@@ -710,6 +710,7 @@ const styles = {
     // Actions
     actionAvatar: {
         borderRadius: 20,
+        marginRight: variables.avatarChatSpacing,
     },
 
     componentHeightLarge: {
@@ -1306,7 +1307,7 @@ const styles = {
         flexShrink: 1,
         flexBasis: 0,
         position: 'relative',
-        marginLeft: 48,
+        marginLeft: variables.chatInputSpacing,
     },
 
     chatItemRight: {
@@ -1420,7 +1421,7 @@ const styles = {
         // On Android, multiline TextInput with height: 'auto' will show extra padding unless they are configured with
         // paddingVertical: 0, alignSelf: 'center', and textAlignVertical: 'center'
 
-        paddingHorizontal: 8,
+        paddingHorizontal: variables.avatarChatSpacing,
         paddingTop: 0,
         paddingBottom: 0,
         alignSelf: 'center',
@@ -1451,7 +1452,7 @@ const styles = {
         backgroundColor: themeColors.transparent,
         height: 32,
         padding: 6,
-        margin: 4,
+        margin: 3,
         justifyContent: 'center',
     },
 
@@ -1525,8 +1526,7 @@ const styles = {
         alignSelf: 'flex-end',
         borderRadius: variables.buttonBorderRadius,
         height: 32,
-        marginVertical: 4,
-        marginLeft: 3,
+        marginVertical: 3,
         paddingHorizontal: 6,
         justifyContent: 'center',
     },
@@ -1540,24 +1540,31 @@ const styles = {
     },
 
     chatItemAttachButton: {
-        alignItems: 'center',
         alignSelf: 'flex-end',
-        borderRightColor: themeColors.border,
-        borderRightWidth: 1,
+        borderRadius: variables.componentBorderRadiusRounded,
+        backgroundColor: themeColors.transparent,
         height: 32,
-        width: 32,
-        marginBottom: 4,
-        marginTop: 4,
-        marginLeft: 4,
+        padding: 6,
+        marginLeft: 3,
+        marginRight: 3,
         justifyContent: 'center',
     },
 
+    chatItemAttachBorder: {
+        borderRightColor: themeColors.border,
+        borderRightWidth: 1,
+        marginBottom: 3,
+        marginTop: 3,
+
+    },
+
     composerSizeButton: {
         alignItems: 'center',
         alignSelf: 'flex-end',
         height: 26,
         marginBottom: 6,
         marginTop: 6,
+        marginRight: 4,
         justifyContent: 'center',
         width: 32,
     },
@@ -1739,13 +1746,13 @@ const styles = {
     },
 
     emptyAvatar: {
-        marginRight: variables.componentSizeNormal - 24,
+        marginRight: variables.avatarChatSpacing,
         height: variables.avatarSizeNormal,
         width: variables.avatarSizeNormal,
     },
 
     emptyAvatarSmall: {
-        marginRight: variables.componentSizeNormal - 28,
+        marginRight: variables.avatarChatSpacing - 4,
         height: variables.avatarSizeSmall,
         width: variables.avatarSizeSmall,
     },

src/styles/variables.js

@@ -18,7 +18,7 @@ export default {
     contentHeaderHeight: getValueUsingPixelRatio(65, 100),
     componentSizeSmall: getValueUsingPixelRatio(28, 32),
     componentSizeNormal: 40,
-    inputComponentSizeNormal: 42,
+    inputComponentSizeNormal: 40,
     componentSizeLarge: 52,
     componentBorderRadius: 8,
     componentBorderRadiusSmall: 4,
@@ -84,4 +84,6 @@ export default {
     sliderBarHeight: 8,
     sliderKnobSize: 26,
     checkboxLabelActiveOpacity: 0.7,
+    avatarChatSpacing: 12,
+    chatInputSpacing: 52, // 40 + avatarChatSpacing
 };