Fixing issues with FileUploadPreview

1. Visibility of retry button was quite poor, because of white color on white background. This reload icon has been changes to contrast on white background
2. Cancel button was unaccessible because of overlapping reload icon container.

Author: vishalnarkhede

src/components/MessageInput/FileUploadPreview.js

@@ -39,10 +39,6 @@ const Container = styled.View`
   ${({ theme }) => theme.messageInput.fileUploadPreview.container.css};
 `;
 
-const DismissText = styled.Text`
-  ${({ theme }) => theme.messageInput.fileUploadPreview.dismissText.css};
-`;
-
 const FilenameText = styled.Text`
   padding-left: 10px;
   ${({ theme }) => theme.messageInput.fileUploadPreview.filenameText.css};
@@ -73,8 +69,13 @@ const FileUploadPreview = ({
 
     return (
       <UploadProgressIndicator
-        action={() => (retryUpload ? retryUpload(item.id) : null)}
+        action={() => {
+          retryUpload ? retryUpload(item.id) : null;
+        }}
         active={item.state !== FileState.UPLOADED}
+        cancel={() => {
+          removeFile ? removeFile(item.id) : null;
+        }}
         type={type}
       >
         <AttachmentContainerView>
@@ -86,12 +87,6 @@ const FileUploadPreview = ({
                 : item.file.name}
             </FilenameText>
           </AttachmentView>
-          <DismissText
-            onPress={() => removeFile(item.id)}
-            testID='remove-file-upload-preview'
-          >
-            X
-          </DismissText>
         </AttachmentContainerView>
       </UploadProgressIndicator>
     );

src/components/MessageInput/UploadProgressIndicator.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ActivityIndicator, Image, TouchableOpacity, View } from 'react-native';
+import { ActivityIndicator, Image, View } from 'react-native';
 import styled from '@stream-io/styled-components';
 import PropTypes from 'prop-types';
 
@@ -28,51 +28,71 @@ const Overlay = styled.View`
   ${({ theme }) => theme.messageInput.uploadProgressIndicator.overlay.css};
 `;
 
-const UploadProgressIndicator = ({ action, active, children, type }) =>
+const ActivityIndicatorContainer = styled.View`
+  align-items: center;
+  bottom: 0;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+`;
+
+const DismissText = styled.Text`
+  align-self: flex-end;
+  margin-right: 10px;
+  ${({ theme }) => theme.messageInput.uploadProgressIndicator.dismiss.css};
+`;
+
+const RetryButtonContainer = styled.TouchableOpacity`
+  align-items: center;
+  bottom: 0;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+`;
+
+const UploadProgressIndicator = ({ action, active, cancel, children, type }) =>
   !active ? (
     <View testID='inactive-upload-progress-indicator'>{children}</View>
   ) : (
-    <TouchableOpacity
-      onPress={action}
-      testID='active-upload-progress-indicator'
-    >
+    <View testID='active-upload-progress-indicator'>
       {children}
       <Overlay />
       <Container>
         {type === ProgressIndicatorTypes.IN_PROGRESS && (
-          <View
-            style={{
-              alignItems: 'center',
-              bottom: 0,
-              justifyContent: 'center',
-              left: 0,
-              position: 'absolute',
-              right: 0,
-              top: 0,
-            }}
-          >
+          <ActivityIndicatorContainer style={{}}>
             <ActivityIndicator
-              color='white'
+              color='grey'
               testID='upload-progress-indicator'
             />
-          </View>
+          </ActivityIndicatorContainer>
         )}
         {type === ProgressIndicatorTypes.RETRY && (
-          <Image
-            source={iconReload}
-            style={{ height: 18, width: 18 }}
-            testID='retry-upload-progress-indicator'
-          />
+          <RetryButtonContainer onPress={action}>
+            <Image
+              source={iconReload}
+              style={{ height: 18, width: 18 }}
+              testID='retry-upload-progress-indicator'
+            />
+          </RetryButtonContainer>
         )}
+        <DismissText onPress={cancel} testID='remove-file-upload-preview'>
+          X
+        </DismissText>
       </Container>
-    </TouchableOpacity>
+    </View>
   );
 
 UploadProgressIndicator.propTypes = {
   /** Action triggered when clicked indicator */
   action: PropTypes.func,
-  /** Boolean status of upload progress */
   active: PropTypes.bool,
+  /** Action triggered when clicked cancel button */
+  cancel: PropTypes.func,
+  /** Boolean status of upload progress */
   /** Type of active indicator */
   type: PropTypes.oneOf([
     ProgressIndicatorTypes.IN_PROGRESS,

src/images/reload1.png

@@ -202,7 +202,6 @@ export const defaultTheme = {
       attachmentContainerView: {},
       attachmentView: {},
       container: {},
-      dismissText: {},
       filenameText: {},
     },
     imageUploadPreview: {
@@ -239,6 +238,7 @@ export const defaultTheme = {
     },
     uploadProgressIndicator: {
       container: {},
+      dismiss: {},
       overlay: {},
     },
   },

src/styles/theme.js

@@ -1141,6 +1141,7 @@ export interface UploadProgressIndicatorProps extends StyledComponentProps {
   active: boolean;
   type: 'in_progress' | 'retry';
   action?(event: GestureResponderEvent): void;
+  cancel?(event: GestureResponderEvent): void;
 }
 
 export interface AttachmentActionsProps extends StyledComponentProps {