fix: styles for message input auto complete input

Author: khushal87

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -142,6 +142,7 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
         {
           color: black,
           maxHeight: (textHeight || 17) * numberOfLines,
+          paddingHorizontal: command ? 4 : 16,
           textAlign: I18nManager.isRTL ? 'right' : 'left',
         },
         inputBox,
@@ -205,8 +206,7 @@ const styles = StyleSheet.create({
     flex: 1,
     fontSize: 16,
     includeFontPadding: false, // for android vertical text centering
-    padding: 0, // removal of default text input padding on android
-    paddingTop: 0, // removal of iOS top padding for weird centering
+    paddingVertical: 12,
     textAlignVertical: 'center', // for android vertical text centering
   },
 });

package/src/components/MessageInput/AttachmentUploadPreviewList.tsx

@@ -264,10 +264,10 @@ export const AttachmentUploadPreviewList = (props: AttachmentUploadPreviewListPr
 const styles = StyleSheet.create({
   attachmentSeparator: {
     borderBottomWidth: 1,
-    marginBottom: 10,
+    marginVertical: 8,
   },
-  filesFlatList: { marginBottom: 12, maxHeight: FILE_PREVIEW_HEIGHT * 2.5 + 16 },
-  imagesFlatList: { paddingBottom: 12 },
+  filesFlatList: { maxHeight: FILE_PREVIEW_HEIGHT * 2.5 + 16 },
+  imagesFlatList: {},
 });
 
 AttachmentUploadPreviewList.displayName =

package/src/components/MessageInput/MessageInput.tsx

@@ -63,15 +63,14 @@ import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
 import { CreatePoll } from '../Poll/CreatePollContent';
 
 const styles = StyleSheet.create({
+  attachmentPreviewListContainer: { paddingTop: 12 },
   attachmentSeparator: {
     borderBottomWidth: 1,
     marginBottom: 10,
   },
   autoCompleteInputContainer: {
     alignItems: 'center',
     flexDirection: 'row',
-    paddingLeft: 16,
-    paddingRight: 16,
   },
   composerContainer: {
     alignItems: 'center',
@@ -92,7 +91,7 @@ const styles = StyleSheet.create({
   optionsContainer: {
     flexDirection: 'row',
   },
-  replyContainer: { paddingBottom: 12, paddingHorizontal: 8 },
+  replyContainer: { paddingBottom: 0, paddingHorizontal: 8, paddingTop: 8 },
   sendButtonContainer: {},
   suggestionsListContainer: {
     position: 'absolute',
@@ -231,6 +230,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
     theme: {
       colors: { border, grey_whisper, white, white_smoke },
       messageInput: {
+        attachmentPreviewListContainer,
         attachmentSelectionBar,
         autoCompleteInputContainer,
         composerContainer,
@@ -494,7 +494,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                       styles.inputBoxContainer,
                       {
                         borderColor: grey_whisper,
-                        paddingVertical: command ? 8 : 12,
                       },
                       inputBoxContainer,
                       isFocused ? focusedInputBoxContainer : null,
@@ -505,7 +504,16 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                         <Reply />
                       </View>
                     )}
-                    <AttachmentUploadPreviewList />
+                    {attachments.length > 0 ? (
+                      <View
+                        style={[
+                          styles.attachmentPreviewListContainer,
+                          attachmentPreviewListContainer,
+                        ]}
+                      >
+                        <AttachmentUploadPreviewList />
+                      </View>
+                    ) : null}
                     {command ? (
                       <CommandInput disabled={!isOnline} />
                     ) : (

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -2135,7 +2135,6 @@ exports[`Thread should match thread snapshot 1`] = `
               },
               {
                 "borderColor": "#ECEBEB",
-                "paddingVertical": 12,
               },
               {},
               null,
@@ -2148,8 +2147,6 @@ exports[`Thread should match thread snapshot 1`] = `
                 {
                   "alignItems": "center",
                   "flexDirection": "row",
-                  "paddingLeft": 16,
-                  "paddingRight": 16,
                 },
                 {},
               ]
@@ -2171,13 +2168,13 @@ exports[`Thread should match thread snapshot 1`] = `
                     "flex": 1,
                     "fontSize": 16,
                     "includeFontPadding": false,
-                    "padding": 0,
-                    "paddingTop": 0,
+                    "paddingVertical": 12,
                     "textAlignVertical": "center",
                   },
                   {
                     "color": "#000000",
                     "maxHeight": 85,
+                    "paddingHorizontal": 16,
                     "textAlign": "left",
                   },
                   {},

package/src/contexts/themeContext/utils/theme.ts

@@ -267,6 +267,7 @@ export type Theme = {
   messageInput: {
     attachButton: ViewStyle;
     attachButtonContainer: ViewStyle;
+    attachmentPreviewListContainer: ViewStyle;
     attachmentSelectionBar: ViewStyle;
     attachmentSeparator: ViewStyle;
     attachmentUnsupportedIndicator: {
@@ -1081,6 +1082,7 @@ export const defaultTheme: Theme = {
   messageInput: {
     attachButton: {},
     attachButtonContainer: {},
+    attachmentPreviewListContainer: {},
     attachmentSelectionBar: {},
     attachmentSeparator: {},
     attachmentUnsupportedIndicator: {