2 files changed, 29 insertions, 9 deletions
diff --git a/src/components/common/GradientProgressBar.tsx b/src/components/common/GradientProgressBar.tsx
index fc62bd3c..066295d0 100644
--- a/src/components/common/GradientProgressBar.tsx
+++ b/src/components/common/GradientProgressBar.tsx
@@ -2,20 +2,21 @@ import React, {FC} from 'react';
 import {StyleSheet, ViewProps, ViewStyle} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import Animated, {useAnimatedStyle} from 'react-native-reanimated';
-import {
-  TAGG_LIGHT_BLUE_2,
-  TAGG_LIGHT_BLUE_3,
-  TAGG_PURPLE,
-} from '../../constants';
 import {normalize} from '../../utils';
 
 interface GradientProgressBarProps extends ViewProps {
   progress: Animated.SharedValue<number>;
+  toColor: string;
+  fromColor: string;
+  unfilledColor: string;
 }
 
 const GradientProgressBar: FC<GradientProgressBarProps> = ({
   style,
   progress,
+  toColor,
+  fromColor,
+  unfilledColor,
 }) => {
   const animatedProgressStyle = useAnimatedStyle<ViewStyle>(() => ({
     width: `${(1 - progress.value) * 100}%`,
@@ -24,8 +25,16 @@ const GradientProgressBar: FC<GradientProgressBarProps> = ({
     <LinearGradient
       style={[styles.bar, style]}
       useAngle={true}
-      colors={[TAGG_PURPLE, TAGG_LIGHT_BLUE_2]}>
-      <Animated.View style={[styles.blank, animatedProgressStyle]} />
+      colors={[fromColor, toColor]}>
+      <Animated.View
+        style={[
+          styles.blank,
+          animatedProgressStyle,
+          {
+            backgroundColor: unfilledColor,
+          },
+        ]}
+      />
     </LinearGradient>
   );
 };
@@ -36,12 +45,12 @@ const styles = StyleSheet.create({
   bar: {
     height: normalize(10),
     borderRadius: 6.5,
+    opacity: 1,
   },
   blank: {
     alignSelf: 'flex-end',
     height: normalize(10),
     width: '80%',
-    backgroundColor: TAGG_LIGHT_BLUE_3,
   },
 });
 
diff --git a/src/components/moments/MomentUploadProgressBar.tsx b/src/components/moments/MomentUploadProgressBar.tsx
index d56a8337..82f46c58 100644
--- a/src/components/moments/MomentUploadProgressBar.tsx
+++ b/src/components/moments/MomentUploadProgressBar.tsx
@@ -8,6 +8,11 @@ import {
   withTiming,
 } from 'react-native-reanimated';
 import {useDispatch, useSelector} from 'react-redux';
+import {
+  TAGG_LIGHT_BLUE_2,
+  TAGG_LIGHT_BLUE_3,
+  TAGG_PURPLE,
+} from '../../constants';
 import {checkMomentDoneProcessing} from '../../services';
 import {loadUserMoments} from '../../store/actions';
 import {setMomentUploadProgressBar} from '../../store/reducers';
@@ -143,7 +148,13 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
           {showLoading && (
             <>
               <Text style={styles.text}>Uploading Moment...</Text>
-              <GradientProgressBar style={styles.bar} progress={progress} />
+              <GradientProgressBar
+                style={styles.bar}
+                progress={progress}
+                toColor={TAGG_LIGHT_BLUE_2}
+                fromColor={TAGG_PURPLE}
+                unfilledColor={TAGG_LIGHT_BLUE_3}
+              />
             </>
           )}
           {momentUploadProgressBar.status === MomentUploadStatusType.Done && (