diff --git a/src/components/Container.ts b/src/components/Container.ts
index 53c414e7f..aeea70b92 100644
--- a/src/components/Container.ts
+++ b/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};
diff --git a/src/components/Sidebar/SubscriptionCard/clickIndicator.tsx b/src/components/Sidebar/SubscriptionCard/clickIndicator.tsx
deleted file mode 100644
index 72e3c9967..000000000
--- a/src/components/Sidebar/SubscriptionCard/clickIndicator.tsx
+++ /dev/null
@@ -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 (
-
-
-
- );
-}
diff --git a/src/components/Sidebar/SubscriptionCard/clickOverlay.tsx b/src/components/Sidebar/SubscriptionCard/clickOverlay.tsx
new file mode 100644
index 000000000..1a75f8b2d
--- /dev/null
+++ b/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 (
+
+
+
+ );
+}
diff --git a/src/components/Sidebar/SubscriptionCard/contentOverlay/index.tsx b/src/components/Sidebar/SubscriptionCard/contentOverlay/index.tsx
new file mode 100644
index 000000000..4295b7226
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/Sidebar/SubscriptionCard/storageSection.tsx b/src/components/Sidebar/SubscriptionCard/contentOverlay/storageSection.tsx
similarity index 97%
rename from src/components/Sidebar/SubscriptionCard/storageSection.tsx
rename to src/components/Sidebar/SubscriptionCard/contentOverlay/storageSection.tsx
index 6fd313ec6..9992af43a 100644
--- a/src/components/Sidebar/SubscriptionCard/storageSection.tsx
+++ b/src/components/Sidebar/SubscriptionCard/contentOverlay/storageSection.tsx
@@ -9,7 +9,7 @@ interface Iprops {
}
export default function StorageSection({ totalUsage, totalStorage }: Iprops) {
return (
-
+
{constants.STORAGE}
diff --git a/src/components/Sidebar/SubscriptionCard/familyUsageSection/index.tsx b/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/familyUsageSection/index.tsx
similarity index 92%
rename from src/components/Sidebar/SubscriptionCard/familyUsageSection/index.tsx
rename to src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/familyUsageSection/index.tsx
index e359fc92c..d33f82560 100644
--- a/src/components/Sidebar/SubscriptionCard/familyUsageSection/index.tsx
+++ b/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 (
-
+ <>
-
+ >
);
}
diff --git a/src/components/Sidebar/SubscriptionCard/familyUsageSection/legend.tsx b/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/familyUsageSection/legend.tsx
similarity index 88%
rename from src/components/Sidebar/SubscriptionCard/familyUsageSection/legend.tsx
rename to src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/familyUsageSection/legend.tsx
index 0d2a3246d..5da4a74e1 100644
--- a/src/components/Sidebar/SubscriptionCard/familyUsageSection/legend.tsx
+++ b/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;
diff --git a/src/components/Sidebar/SubscriptionCard/familyUsageSection/progressBar.tsx b/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/familyUsageSection/progressBar.tsx
similarity index 88%
rename from src/components/Sidebar/SubscriptionCard/familyUsageSection/progressBar.tsx
rename to src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/familyUsageSection/progressBar.tsx
index 270e77116..e31ab7854 100644
--- a/src/components/Sidebar/SubscriptionCard/familyUsageSection/progressBar.tsx
+++ b/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 (
-
+
+ {hasNonAdminFamilyMembers(userDetails.familyData) ? (
+
+ ) : (
+
+ )}
+
+ );
+}
diff --git a/src/components/Sidebar/SubscriptionCard/individualUsageSection.tsx b/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/individualUsageSection.tsx
similarity index 86%
rename from src/components/Sidebar/SubscriptionCard/individualUsageSection.tsx
rename to src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/individualUsageSection.tsx
index cdc06fa1d..fd57adbc2 100644
--- a/src/components/Sidebar/SubscriptionCard/individualUsageSection.tsx
+++ b/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 (
-
+ <>
-
+ >
);
}
diff --git a/src/components/Sidebar/SubscriptionCard/index.tsx b/src/components/Sidebar/SubscriptionCard/index.tsx
index d7628d4b1..daf202a94 100644
--- a/src/components/Sidebar/SubscriptionCard/index.tsx
+++ b/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 (
-
+
-
-
- {hasNonAdminFamilyMembers(userDetails.familyData) ? (
-
- ) : (
-
- )}
-
-
+
+
);
}