fix of the day, payment + sub + music generation

src/components/BorderGradientButton.js

@@ -3,7 +3,7 @@ import React from "react";
 import { Image, Pressable, Text, View } from "react-native";
 import { Palette, Style } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
-import { size } from "../styles/Style";
+import { size as sizeStyle } from "../styles/Style";
 import BorderGradient from "./BorderGradient/BorderGradient";
 
 const HEIGHT_BY_SIZE = {
@@ -84,7 +84,9 @@ const BorderGradientButton = ({
               gap: 11,
             }}
           >
-            {icon && <Image source={icon} style={size({ size: iconSize })} />}
+            {icon && (
+              <Image source={icon} style={sizeStyle({ size: iconSize })} />
+            )}
             <Text
               style={{
                 fontSize,

src/components/ProgressBar.js

@@ -8,23 +8,34 @@ const ProgressBar = ({
   progress = 0,
   containerStyle = {},
   gradient = false,
+  status = "default",
 }) => {
+  const numericProgress = Number(progress);
+  const normalizedProgress = Math.max(
+    0,
+    Math.min(100, Number.isFinite(numericProgress) ? numericProgress : 0),
+  );
+  const isError = status === "error";
+  const containerBackground = isError ? "#3C101B" : "#0F0C19";
+  const fillColor = isError ? "#FF6B6B" : Palette.white;
+  const shouldUseGradient = gradient && !isError;
+
   return (
     <View
       style={{
         width: "100%",
         height: 5,
-        backgroundColor: "#0F0C19",
+        backgroundColor: containerBackground,
         borderRadius: mainBorderRadius,
         overflow: "hidden",
         ...containerStyle,
       }}
     >
-      {gradient ? (
+      {shouldUseGradient ? (
         <LinearGradient
           colors={["#F94697", "#7023F7"]}
           style={{
-            width: `${progress}%`,
+            width: `${normalizedProgress}%`,
             height: "100%",
             borderRadius: mainBorderRadius,
           }}
@@ -34,9 +45,9 @@ const ProgressBar = ({
       ) : (
         <View
           style={{
-            width: `${progress}%`,
+            width: `${normalizedProgress}%`,
             height: "100%",
-            backgroundColor: Palette.white,
+            backgroundColor: fillColor,
             borderRadius: mainBorderRadius,
           }}
         />