fix: design issues

Author: khushal87

package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList.tsx

@@ -234,10 +234,9 @@ export const AttachmentUploadPreviewList = (props: AttachmentUploadPreviewListPr
 const styles = StyleSheet.create({
   flatList: {
     overflow: 'visible',
-    padding: 4,
   },
   itemSeparator: {
-    width: 16,
+    width: 8,
   },
   wrapper: {},
 });

package/src/components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview.tsx

@@ -49,6 +49,7 @@ export const FileAttachmentUploadPreview = ({
           fileSizeText,
           fileTextContainer,
           uploadProgressOverlay,
+          wrapper,
         },
       },
     },
@@ -63,7 +64,7 @@ export const FileAttachmentUploadPreview = ({
   }, [attachment, removeAttachments]);
 
   return (
-    <>
+    <View style={[styles.wrapper, wrapper]} testID={'file-attachment-upload-preview'}>
       <AttachmentUploadProgressIndicator
         onPress={onRetryHandler}
         style={[styles.overlay, uploadProgressOverlay]}
@@ -77,7 +78,6 @@ export const FileAttachmentUploadPreview = ({
             },
             fileContainer,
           ]}
-          testID={'file-attachment-upload-preview'}
         >
           <View style={styles.fileIcon}>
             <FileAttachmentIcon mimeType={attachment.mime_type} size={40} />
@@ -113,12 +113,12 @@ export const FileAttachmentUploadPreview = ({
       <View style={styles.dismissWrapper}>
         <DismissAttachmentUpload onPress={onDismissHandler} />
       </View>
-    </>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
-  dismissWrapper: { position: 'absolute', right: -4, top: -4 },
+  dismissWrapper: { position: 'absolute', right: 0, top: 0 },
   fileContainer: {
     borderRadius: 12,
     borderWidth: 1,
@@ -149,4 +149,7 @@ const styles = StyleSheet.create({
   overlay: {
     borderRadius: 12,
   },
+  wrapper: {
+    padding: 4,
+  },
 });

package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx

@@ -32,7 +32,7 @@ export const ImageAttachmentUploadPreview = ({
   const {
     theme: {
       messageInput: {
-        imageAttachmentUploadPreview: { container, upload },
+        imageAttachmentUploadPreview: { container, upload, wrapper },
       },
     },
   } = useTheme();
@@ -54,7 +54,7 @@ export const ImageAttachmentUploadPreview = ({
   }, []);
 
   return (
-    <View testID={'image-attachment-upload-preview'}>
+    <View style={[styles.wrapper, wrapper]} testID={'image-attachment-upload-preview'}>
       <AttachmentUploadProgressIndicator
         onPress={onRetryHandler}
         style={[styles.container, container]}
@@ -88,7 +88,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     overflow: 'hidden',
   },
-  dismissWrapper: { position: 'absolute', right: -4, top: -4 },
+  dismissWrapper: { position: 'absolute', right: 0, top: 0 },
   fileSizeText: {
     fontSize: 12,
     paddingHorizontal: 10,
@@ -97,5 +97,7 @@ const styles = StyleSheet.create({
     height: IMAGE_PREVIEW_SIZE,
     width: IMAGE_PREVIEW_SIZE,
   },
-  wrapper: {},
+  wrapper: {
+    padding: 4,
+  },
 });

package/src/components/Reply/Reply.tsx

@@ -280,7 +280,6 @@ export const ReplyWithContext = (props: ReplyPropsWithContext) => {
         rightContainer,
         title: titleStyle,
         subtitleContainer,
-        subtitleIconContainer,
         dismissWrapper,
       },
     },
@@ -320,9 +319,7 @@ export const ReplyWithContext = (props: ReplyPropsWithContext) => {
             {title}
           </Text>
           <View style={[styles.subtitleContainer, subtitleContainer]}>
-            <View style={[styles.subtitleIconContainer, subtitleIconContainer]}>
-              <SubtitleIcon message={quotedMessage} />
-            </View>
+            <SubtitleIcon message={quotedMessage} />
             <SubtitleText message={quotedMessage} />
           </View>
         </View>
@@ -429,8 +426,8 @@ const styles = StyleSheet.create({
   },
   dismissWrapper: {
     position: 'absolute',
-    right: -4,
-    top: -4,
+    right: 0,
+    top: 0,
   },
   iconStyle: {},
   imageAttachment: {},
@@ -464,10 +461,6 @@ const styles = StyleSheet.create({
     gap: 4,
     paddingTop: 4,
   },
-  subtitleIconContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
   title: {
     color: '#384047',
     fontSize: 12,

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

@@ -340,6 +340,7 @@ export type Theme = {
       fileSizeText: TextStyle;
       fileTextContainer: ViewStyle;
       uploadProgressOverlay: ViewStyle;
+      wrapper: ViewStyle;
     };
     fileUploadPreview: {
       flatList: ViewStyle;
@@ -349,6 +350,7 @@ export type Theme = {
     imageAttachmentUploadPreview: {
       container: ViewStyle;
       upload: ImageStyle;
+      wrapper: ViewStyle;
     };
     inputContainer: ViewStyle;
     inputBox: TextStyle;
@@ -841,7 +843,6 @@ export type Theme = {
     title: TextStyle;
     subtitle: TextStyle;
     subtitleContainer: ViewStyle;
-    subtitleIconContainer: ViewStyle;
     videoIcon: IconProps;
     wrapper: ViewStyle;
   };
@@ -1144,6 +1145,7 @@ export const defaultTheme: Theme = {
       fileSizeText: {},
       fileTextContainer: {},
       uploadProgressOverlay: {},
+      wrapper: {},
     },
     fileUploadPreview: {
       flatList: {},
@@ -1153,6 +1155,7 @@ export const defaultTheme: Theme = {
     imageAttachmentUploadPreview: {
       container: {},
       upload: {},
+      wrapper: {},
     },
     inputBox: {},
     inputBoxContainer: {},
@@ -1659,7 +1662,6 @@ export const defaultTheme: Theme = {
     rightContainer: {},
     subtitle: {},
     subtitleContainer: {},
-    subtitleIconContainer: {},
     title: {},
     videoIcon: {},
     wrapper: {},