Add styles

1 files changed, 40 insertions, 13 deletions

diff --git a/src/components/moments/MomentUploadProgressBar.tsx b/src/components/moments/MomentUploadProgressBar.tsx
index e0a691f7..863afcb1 100644
--- a/src/components/moments/MomentUploadProgressBar.tsx
+++ b/src/components/moments/MomentUploadProgressBar.tsx
@@ -43,6 +43,10 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
       momentUploadProgressBar?.status ===
         MomentUploadStatusType.WaitingForDoneProcessing;
     let timeoutTimer: NodeJS.Timeout | undefined;
+    const cantainerHeight =
+      momentUploadProgressBar?.status === MomentUploadStatusType.Error
+        ? normalize(121)
+        : normalize(84);
 
     const retryUpload = () => {
       if (!momentUploadProgressBar || !timeoutTimer) {
@@ -188,11 +192,12 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
       <View
         style={[
           styles.background,
+          {height: StatusBarHeight + cantainerHeight},
           momentUploadProgressBar?.status === MomentUploadStatusType.Error
             ? styles.redBackground
             : {},
         ]}>
-        <View style={styles.container}>
+        <View style={[styles.container, {height: cantainerHeight}]}>
           {showLoading && (
             <>
               <Text style={styles.text}>Uploading Moment...</Text>
@@ -217,16 +222,20 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
             </View>
           )}
           {momentUploadProgressBar.status === MomentUploadStatusType.Error && (
-            <View style={styles.row}>
-              <Image
-                source={require('../../assets/images/white-x.png')}
-                style={styles.x}
-              />
-              <Text style={styles.whiteText}>
-                Unable to upload Moment. Please retry
-              </Text>
-              <TouchableOpacity onPress={retryUpload}>
-                <Text>fooooo</Text>
+            <View style={styles.column}>
+              <View style={styles.row}>
+                <Image
+                  source={require('../../assets/images/white-x.png')}
+                  style={styles.x}
+                />
+                <Text style={styles.whiteText}>
+                  Unable to upload Moment. Please retry
+                </Text>
+              </View>
+              <TouchableOpacity
+                onPress={retryUpload}
+                style={styles.retryButton}>
+                <Text style={styles.retryText}>Retry</Text>
               </TouchableOpacity>
             </View>
           )}
@@ -239,7 +248,6 @@ const styles = StyleSheet.create({
   background: {
     position: 'absolute',
     zIndex: 999,
-    height: StatusBarHeight + normalize(84),
     backgroundColor: 'white',
     width: '100%',
     alignItems: 'center',
@@ -247,7 +255,6 @@ const styles = StyleSheet.create({
   container: {
     justifyContent: 'center',
     marginTop: StatusBarHeight,
-    height: normalize(84),
   },
   text: {
     fontSize: normalize(14),
@@ -266,6 +273,12 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
+  column: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+    flex: 1,
+  },
   whiteText: {
     color: 'white',
     fontSize: normalize(14),
@@ -278,6 +291,20 @@ const styles = StyleSheet.create({
     height: normalize(26),
     marginRight: 10,
   },
+  retryButton: {
+    backgroundColor: '#A2352C',
+    borderRadius: 6,
+    height: normalize(37),
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  retryText: {
+    color: 'white',
+    fontWeight: 'bold',
+    letterSpacing: 2,
+    fontSize: normalize(15),
+  },
 });
 
 export default MomentUploadProgressBar;