[PB-1262] bugfix/Backups usage is not being reported properly on the usage

src/app/core/views/Preferences/tabs/Account/Usage.tsx

@@ -1,7 +1,6 @@
-import { SdkFactory } from 'app/core/factory/sdk';
 import usageService, { UsageDetailsProps } from 'app/drive/services/usage.service';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { useSelector } from 'react-redux';
 import Card from '../../../../../shared/components/Card';
@@ -47,13 +46,24 @@ export default function Usage({ className = '' }: { className?: string }): JSX.E
 
   const userSubscription = plan.subscription;
 
+  const sumUsageDetails = (usageDetails: UsageDetailsProps): number => {
+    return Object.values(usageDetails).reduce((acc, value) => acc + value, 0);
+  };
+
+  const totalPlanUsage = useMemo(() => (planUsage ? sumUsageDetails(planUsage) : 0), [planUsage, sumUsageDetails]);
+
   return (
     <Section className={className} title={translate('drive.usage')}>
       <Card>
         {products && plan.planLimit && userSubscription ? (
           <>
             <CurrentPlanWrapper bytesInPlan={plan.planLimit} userSubscription={userSubscription} />
-            <UsageDetails className="mt-5" planLimitInBytes={plan.planLimit} products={products} />
+            <UsageDetails
+              className="mt-5"
+              planLimitInBytes={plan.planLimit}
+              products={products}
+              planUsage={totalPlanUsage}
+            />
           </>
         ) : (
           <div className="flex items-center justify-center" style={{ height: '122px' }}>

src/app/drive/components/DriveListItemSkeleton/DriveListItemSkeleton.tsx

@@ -17,7 +17,7 @@ const DriveListItemSkeleton = (): JSX.Element => {
       <div className="flex w-1/12 cursor-pointer items-center opacity-50">
         <Skeleton width={80} />
       </div>
-      <div className="flex w-1/12 items-center rounded-tr-4px opacity-50">
+      <div className="rounded-tr-4px flex w-1/12 items-center opacity-50">
         <Skeleton circle={true} height={25} width={25} />
       </div>
     </div>

src/app/drive/components/PlanUsage/PlanUsage.tsx

@@ -13,12 +13,12 @@ export default function PlanUsage({
   usage,
   isLoading,
   className = '',
-}: {
+}: Readonly<{
   limit: number;
   usage: number;
   isLoading: boolean;
   className?: string;
-}): JSX.Element {
+}>): JSX.Element {
   const { translate } = useTranslationContext();
   const usagePercent = usageService.getUsagePercent(usage, limit);
   const plan = useSelector<RootState, PlanState>((state) => state.plan);

src/app/photos/components/PhotoThumbnail.tsx

@@ -27,7 +27,7 @@ export default function PhotoThumbnail({
         <img
           onClick={onClick}
           className={`h-full w-full object-cover ${
-            selected && 'rounded-lg brightness-80'
+            selected && 'brightness-80 rounded-lg'
           } transition-all duration-100 ease-in-out`}
           src={src}
           draggable="false"

src/app/shared/components/UsageDetails/index.tsx

@@ -2,13 +2,12 @@ import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import { useEffect, useRef, useState } from 'react';
 import { bytesToString } from '../../../drive/services/size.service';
 import Tooltip from '../Tooltip';
-import { RootState } from 'app/store';
-import { useAppSelector } from 'app/store/hooks';
 
 export default function UsageDetails({
   className = '',
   planLimitInBytes,
   products,
+  planUsage,
 }: {
   className?: string;
   planLimitInBytes: number;
@@ -17,6 +16,7 @@ export default function UsageDetails({
     usageInBytes: number;
     color: 'red' | 'orange' | 'yellow' | 'green' | 'pink' | 'indigo' | 'primary' | 'gray';
   }[];
+  planUsage: number;
 }): JSX.Element {
   const { translate } = useTranslationContext();
   const [barWidth, setBarWidth] = useState(0);
@@ -48,7 +48,6 @@ export default function UsageDetails({
     gray: 'bg-gray-40',
   };
 
-  const planUsage = useAppSelector((state: RootState) => state.plan.planUsage);
   const maxBytesLimit = Math.max(planUsage, planLimitInBytes);
   const percentageUsed = Math.round((planUsage / planLimitInBytes) * 100);