From e07bf90f7ae73aaf520d110e39932bf9510b8cd6 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 6 Nov 2024 10:41:25 +0530
Subject: [PATCH] Remove deprecated defaultProps

---
 .../src/components/Sidebar/SubscriptionCard.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/web/apps/photos/src/components/Sidebar/SubscriptionCard.tsx b/web/apps/photos/src/components/Sidebar/SubscriptionCard.tsx
index 922d5bce91..514d6126fd 100644
--- a/web/apps/photos/src/components/Sidebar/SubscriptionCard.tsx
+++ b/web/apps/photos/src/components/Sidebar/SubscriptionCard.tsx
@@ -194,7 +194,10 @@ const IndividualUsageSection: React.FC<IndividualUsageSectionProps> = ({
     // requirement from the library).
     return (
         <Box width="100%">
-            <Progressbar value={Math.min((usage * 100) / storage, 100)} />
+            <ProgressBar
+                variant="determinate"
+                value={Math.min((usage * 100) / storage, 100)}
+            />
             <SpaceBetweenFlex
                 sx={{
                     marginTop: 1.5,
@@ -294,11 +297,13 @@ const FamilyUsageProgressBar: React.FC<FamilyUsageProgressBarProps> = ({
 }) => {
     return (
         <Box position={"relative"} width="100%">
-            <Progressbar
+            <ProgressBar
+                variant="determinate"
                 sx={{ backgroundColor: "transparent" }}
                 value={Math.min((userUsage * 100) / totalStorage, 100)}
             />
-            <Progressbar
+            <ProgressBar
+                variant="determinate"
                 sx={{
                     position: "absolute",
                     top: 0,
@@ -330,7 +335,7 @@ const Legend: React.FC<LegendProps> = ({ label, color }) => {
     );
 };
 
-const Progressbar = styled(LinearProgress)(() => ({
+const ProgressBar = styled(LinearProgress)(() => ({
     ".MuiLinearProgress-bar": {
         borderRadius: "2px",
     },
@@ -338,10 +343,6 @@ const Progressbar = styled(LinearProgress)(() => ({
     backgroundColor: "rgba(255, 255, 255, 0.2)",
 }));
 
-Progressbar.defaultProps = {
-    variant: "determinate",
-};
-
 const DotSeparator = styled(CircleIcon)`
     font-size: 4px;
     margin: 0 ${({ theme }) => theme.spacing(1)};