Merge pull request #537 from shravyaramesh/tma1028-progress-bar-style-change

[TMA-1028] Change progress bar style

1 files changed, 17 insertions, 8 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,
   },
 });