update subscription card and rounding logic

src/components/Sidebar/SubscriptionCard/contentOverlay/individual/usageSection.tsx

@@ -19,9 +19,8 @@ export function IndividualUsageSection({ usage, storage, fileCount }: Iprops) {
                     marginTop: 1.5,
                 }}>
                 <Typography variant="caption">{`${makeHumanReadableStorage(
-                    usage,
+                    storage - usage
-                    'round-up'
+                )} ${constants.FREE}`}</Typography>
-                )} ${constants.USED}`}</Typography>
                 <Typography variant="caption" fontWeight={'bold'}>
                     {constants.PHOTO_COUNT(fileCount ?? 0)}
                 </Typography>

src/components/Sidebar/SubscriptionCard/contentOverlay/storageSection.tsx

@@ -1,8 +1,21 @@
-import { Box, Typography } from '@mui/material';
+import { Box, styled, Typography } from '@mui/material';
 import React from 'react';
-import { makeHumanReadableStorage } from 'utils/billing';
+import { convertBytesToGBs, makeHumanReadableStorage } from 'utils/billing';
 import constants from 'utils/strings/constants';
 
+const MobileSmallBox = styled(Box)`
+    display: none;
+    @media (max-width: 359px) {
+        display: block;
+    }
+`;
+
+const DefaultBox = styled(Box)`
+    display: none;
+    @media (min-width: 360px) {
+        display: block;
+    }
+`;
 interface Iprops {
     usage: number;
     storage: number;
@@ -17,9 +30,16 @@ export default function StorageSection({ usage, storage }: Iprops) {
             <Typography
                 fontWeight={'bold'}
                 sx={{ fontSize: '24px', lineHeight: '30px' }}>
-                {`${makeHumanReadableStorage(storage - usage)} ${
+                <DefaultBox>
-                    constants.OF
+                    {`${makeHumanReadableStorage(usage, 'round-up')} ${
-                } ${makeHumanReadableStorage(storage)} ${constants.FREE}`}
+                        constants.OF
+                    } ${makeHumanReadableStorage(storage)} ${constants.USED}`}
+                </DefaultBox>
+                <MobileSmallBox>
+                    {`${convertBytesToGBs(usage)} /  ${convertBytesToGBs(
+                        storage
+                    )} ${constants.GB} ${constants.USED}`}
+                </MobileSmallBox>
             </Typography>
         </Box>
     );

src/components/pages/gallery/PlanSelector/card.tsx

@@ -168,7 +168,7 @@ function PlanSelectorCard(props: Props) {
                                 <Typography
                                     variant="body2"
                                     color={'text.secondary'}>
-                                    {convertBytesToGBs(subscription.storage)}{' '}
+                                    {convertBytesToGBs(subscription.storage, 2)}{' '}
                                     {constants.GB}
                                 </Typography>
                             </Box>

src/utils/billing/index.ts

@@ -33,8 +33,8 @@ const StorageUnits = ['B', 'KB', 'MB', 'GB', 'TB'];
 
 const ONE_GB = 1024 * 1024 * 1024;
 
-export function convertBytesToGBs(bytes: number): string {
+export function convertBytesToGBs(bytes: number, precision = 0): string {
-    return (bytes / (1024 * 1024 * 1024)).toFixed(0);
+    return (bytes / (1024 * 1024 * 1024)).toFixed(precision);
 }
 
 export function convertBytesToHumanReadable(