refactor subscription card

src/components/Container.ts

@@ -80,6 +80,16 @@ export const FluidContainer = styled(FlexWrapper)`
     flex: 1;
 `;
 
+export const Overlay = styled(Box)`
+    display: flex;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1; ;
+`;
+
 export const InvertedIconButton = styled(IconButton)`
     background-color: ${({ theme }) => theme.palette.primary.main};
     color: ${({ theme }) => theme.palette.background.default};

src/components/Sidebar/SubscriptionCard/clickIndicator.tsx

@@ -1,10 +0,0 @@
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import Box from '@mui/material/Box';
-import React from 'react';
-export function ClickIndicator() {
-    return (
-        <Box position={'absolute'} top={64} right={0}>
-            <ChevronRightIcon />
-        </Box>
-    );
-}

src/components/Sidebar/SubscriptionCard/clickOverlay.tsx

@@ -0,0 +1,15 @@
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { Overlay } from 'components/Container';
+import React from 'react';
+export function ClickOverlay(openPlanSelector) {
+    return (
+        <Overlay
+            onClick={openPlanSelector}
+            zIndex={2}
+            justifyContent={'flex-end'}
+            alignItems="center"
+            sx={{ cursor: 'pointer' }}>
+            <ChevronRightIcon />
+        </Overlay>
+    );
+}

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

@@ -0,0 +1,47 @@
+import React, { useMemo } from 'react';
+import StorageSection from './storageSection';
+import { isPartOfFamily } from 'utils/billing';
+import { Overlay, SpaceBetweenFlex } from 'components/Container';
+import { UsageSection } from './usageSection';
+
+export function SubscriptionCardContentOverlay({
+    hasNonAdminFamilyMembers,
+    userDetails,
+}) {
+    const totalUsage = useMemo(() => {
+        if (isPartOfFamily(userDetails.familyData)) {
+            return userDetails.familyData.members.reduce(
+                (sum, currentMember) => sum + currentMember.usage,
+                0
+            );
+        } else {
+            return userDetails.usage;
+        }
+    }, [userDetails]);
+
+    const totalStorage = useMemo(() => {
+        if (isPartOfFamily(userDetails.familyData)) {
+            return userDetails.familyData.storage;
+        } else {
+            return userDetails.subscription.storage;
+        }
+    }, [userDetails]);
+
+    return (
+        <Overlay>
+            <SpaceBetweenFlex
+                flex={1}
+                flexDirection={'column'}
+                padding={'20px 16px'}>
+                <StorageSection
+                    totalStorage={totalStorage}
+                    totalUsage={totalUsage}
+                />
+                <UsageSection
+                    hasNonAdminFamilyMembers={hasNonAdminFamilyMembers}
+                    userDetails={userDetails}
+                />
+            </SpaceBetweenFlex>
+        </Overlay>
+    );
+}

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

@@ -9,7 +9,7 @@ interface Iprops {
 }
 export default function StorageSection({ totalUsage, totalStorage }: Iprops) {
     return (
-        <Box padding={2}>
+        <Box width="100%">
             <Typography variant="body2" color={'text.secondary'}>
                 {constants.STORAGE}
             </Typography>

src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/familyUsageSection/index.tsx

@@ -1,6 +1,6 @@
 import { Legend } from './legend';
 import { FamilyUsageProgressBar } from './progressBar';
-import { Box, Stack, Typography } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
 import { SpaceBetweenFlex } from 'components/Container';
 import React, { useMemo } from 'react';
 import { UserDetails } from 'types/user';
@@ -21,7 +21,7 @@ export function FamilyUsageSection({
     );
 
     return (
-        <Box height={64} padding={2}>
+        <>
             <FamilyUsageProgressBar
                 totalUsage={totalUsage}
                 userDetails={userDetails}
@@ -38,6 +38,6 @@ export function FamilyUsageSection({
                     {constants.PHOTO_COUNT(userDetails.fileCount)}
                 </Typography>
             </SpaceBetweenFlex>
-        </Box>
+        </>
     );
 }

src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/familyUsageSection/legend.tsx

@@ -1,7 +1,7 @@
 import { Typography } from '@mui/material';
 import { FlexWrapper } from 'components/Container';
 import React from 'react';
-import { LegendIndicator } from '../styledComponents';
+import { LegendIndicator } from '../../../styledComponents';
 
 interface Iprops {
     label: string;

src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/familyUsageSection/progressBar.tsx

@@ -1,9 +1,9 @@
 import { Box } from '@mui/material';
 import React from 'react';
-import { Progressbar } from '../styledComponents';
+import { Progressbar } from '../../../styledComponents';
 export function FamilyUsageProgressBar({ totalUsage, userDetails }) {
     return (
-        <Box position={'relative'}>
+        <Box position={'relative'} width="100%">
             <Progressbar
                 sx={{ backgroundColor: 'transparent' }}
                 value={

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

@@ -0,0 +1,16 @@
+import { IndividualUsageSection } from './individualUsageSection';
+import React from 'react';
+import { Box } from '@mui/material';
+import { FamilyUsageSection } from './familyUsageSection';
+
+export function UsageSection({ hasNonAdminFamilyMembers, userDetails }) {
+    return (
+        <Box width="100%" flexDirection="column" justifyContent={'center'}>
+            {hasNonAdminFamilyMembers(userDetails.familyData) ? (
+                <FamilyUsageSection userDetails={userDetails} />
+            ) : (
+                <IndividualUsageSection userDetails={userDetails} />
+            )}
+        </Box>
+    );
+}

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

@@ -1,13 +1,13 @@
-import { Box, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 import { SpaceBetweenFlex } from 'components/Container';
 import React from 'react';
 import { convertBytesToHumanReadable } from 'utils/billing';
 import constants from 'utils/strings/constants';
-import { Progressbar } from './styledComponents';
+import { Progressbar } from '../../styledComponents';
 
 export function IndividualUsageSection({ userDetails }) {
     return (
-        <Box height={64} padding={2}>
+        <>
             <Progressbar
                 value={
                     (userDetails.usage * 100) / userDetails.subscription.storage
@@ -25,6 +25,6 @@ export function IndividualUsageSection({ userDetails }) {
                     {constants.PHOTO_COUNT(userDetails.fileCount)}
                 </Typography>
             </SpaceBetweenFlex>
-        </Box>
+        </>
     );
 }

src/components/Sidebar/SubscriptionCard/index.tsx

@@ -1,13 +1,11 @@
-import { ClickIndicator } from './clickIndicator';
-import { IndividualUsageSection } from './individualUsageSection';
-import React, { useContext, useMemo } from 'react';
+import { ClickOverlay } from './clickOverlay';
+import React, { useContext } from 'react';
 import { Box, Skeleton } from '@mui/material';
 import { UserDetails } from 'types/user';
 
-import StorageSection from './storageSection';
 import { GalleryContext } from 'pages/gallery';
-import { FamilyUsageSection } from './familyUsageSection';
-import { hasNonAdminFamilyMembers, isPartOfFamily } from 'utils/billing';
+import { hasNonAdminFamilyMembers } from 'utils/billing';
+import { SubscriptionCardContentOverlay } from './contentOverlay';
 interface Iprops {
     userDetails: UserDetails;
     closeSidebar: () => void;
@@ -28,43 +26,20 @@ export default function SubscriptionCard({ userDetails }: Iprops) {
         );
     }
 
-    const totalUsage = useMemo(() => {
-        if (isPartOfFamily(userDetails.familyData)) {
-            return userDetails.familyData.members.reduce(
-                (sum, currentMember) => sum + currentMember.usage,
-                0
-            );
-        } else {
-            return userDetails.usage;
-        }
-    }, [userDetails]);
-
-    const totalStorage = useMemo(() => {
-        if (isPartOfFamily(userDetails.familyData)) {
-            return userDetails.familyData.storage;
-        } else {
-            return userDetails.subscription.storage;
-        }
-    }, [userDetails]);
-
     return (
-        <Box onClick={showPlanSelectorModal} sx={{ cursor: 'pointer' }}>
+        <Box position="relative">
             <img
-                style={{ position: 'absolute' }}
+                style={{
+                    width: '100%',
+                    aspectRatio: '2/1',
+                }}
                 src="/subscription-card-background.png"
             />
-            <Box zIndex={1} position={'relative'} height={148}>
-                <StorageSection
-                    totalStorage={totalStorage}
-                    totalUsage={totalUsage}
-                />
-                {hasNonAdminFamilyMembers(userDetails.familyData) ? (
-                    <FamilyUsageSection userDetails={userDetails} />
-                ) : (
-                    <IndividualUsageSection userDetails={userDetails} />
-                )}
-                <ClickIndicator />
-            </Box>
+            <ClickOverlay onClick={showPlanSelectorModal} />
+            <SubscriptionCardContentOverlay
+                hasNonAdminFamilyMembers={hasNonAdminFamilyMembers}
+                userDetails={userDetails}
+            />
         </Box>
     );
 }