diff --git a/web/apps/photos/src/components/Sidebar/SubscriptionCard/contentOverlay/index.tsx b/web/apps/photos/src/components/Sidebar/SubscriptionCard/contentOverlay/index.tsx deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/web/apps/photos/src/components/Sidebar/SubscriptionCard/index.tsx b/web/apps/photos/src/components/Sidebar/SubscriptionCard/index.tsx index 6c7dadb531..922d5bce91 100644 --- a/web/apps/photos/src/components/Sidebar/SubscriptionCard/index.tsx +++ b/web/apps/photos/src/components/Sidebar/SubscriptionCard/index.tsx @@ -6,13 +6,20 @@ import { SpaceBetweenFlex, } from "@ente/shared/components/Container"; import ChevronRightIcon from "@mui/icons-material/ChevronRight"; -import { Box, Skeleton, Stack, Typography, styled } from "@mui/material"; +import CircleIcon from "@mui/icons-material/Circle"; +import { + Box, + LinearProgress, + Skeleton, + Stack, + Typography, + styled, +} from "@mui/material"; import { t } from "i18next"; import type React from "react"; import { useMemo } from "react"; import type { UserDetails } from "types/user"; import { hasNonAdminFamilyMembers, isPartOfFamily } from "utils/user/family"; -import { LegendIndicator, Progressbar } from "./styledComponents"; interface SubscriptionCardProps { userDetails: UserDetails; @@ -322,3 +329,28 @@ const Legend: React.FC = ({ label, color }) => { ); }; + +const Progressbar = styled(LinearProgress)(() => ({ + ".MuiLinearProgress-bar": { + borderRadius: "2px", + }, + borderRadius: "2px", + backgroundColor: "rgba(255, 255, 255, 0.2)", +})); + +Progressbar.defaultProps = { + variant: "determinate", +}; + +const DotSeparator = styled(CircleIcon)` + font-size: 4px; + margin: 0 ${({ theme }) => theme.spacing(1)}; + color: inherit; +`; + +const LegendIndicator = styled(DotSeparator)` + font-size: 8.71px; + margin: 0; + margin-right: 4px; + color: inherit; +`; diff --git a/web/apps/photos/src/components/Sidebar/SubscriptionCard/styledComponents.tsx b/web/apps/photos/src/components/Sidebar/SubscriptionCard/styledComponents.tsx deleted file mode 100644 index 90bea72ce7..0000000000 --- a/web/apps/photos/src/components/Sidebar/SubscriptionCard/styledComponents.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import CircleIcon from "@mui/icons-material/Circle"; -import { LinearProgress, styled } from "@mui/material"; - -export const Progressbar = styled(LinearProgress)(() => ({ - ".MuiLinearProgress-bar": { - borderRadius: "2px", - }, - borderRadius: "2px", - backgroundColor: "rgba(255, 255, 255, 0.2)", -})); - -Progressbar.defaultProps = { - variant: "determinate", -}; - -const DotSeparator = styled(CircleIcon)` - font-size: 4px; - margin: 0 ${({ theme }) => theme.spacing(1)}; - color: inherit; -`; - -export const LegendIndicator = styled(DotSeparator)` - font-size: 8.71px; - margin: 0; - margin-right: 4px; - color: inherit; -`;