Inline

web/apps/photos/src/components/Sidebar/SubscriptionCard/styledComponents.tsx

@@ -1,5 +1,5 @@
+import CircleIcon from "@mui/icons-material/Circle";
 import { LinearProgress, styled } from "@mui/material";
-import { DotSeparator } from "../styledComponents";
 
 export const Progressbar = styled(LinearProgress)(() => ({
     ".MuiLinearProgress-bar": {
@@ -13,6 +13,12 @@ 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;

web/apps/photos/src/components/Sidebar/index.tsx

@@ -27,9 +27,10 @@ import CategoryIcon from "@mui/icons-material/Category";
 import DeleteOutline from "@mui/icons-material/DeleteOutline";
 import LockOutlined from "@mui/icons-material/LockOutlined";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";
-import { Box, Divider, Skeleton, Stack } from "@mui/material";
+import { Box, Divider, Skeleton, Stack, styled } from "@mui/material";
 import Typography from "@mui/material/Typography";
 import DeleteAccountModal from "components/DeleteAccountModal";
+import { EnteDrawer } from "components/EnteDrawer";
 import { EnteMenuItem } from "components/Menu/EnteMenuItem";
 import TwoFactorModal from "components/TwoFactor/Modal";
 import { WatchFolder } from "components/WatchFolder";
@@ -63,7 +64,6 @@ import HeaderSection from "./Header";
 import Preferences from "./Preferences";
 import SubscriptionCard from "./SubscriptionCard";
 import SubscriptionStatus from "./SubscriptionStatus";
-import { DrawerSidebar } from "./styledComponents";
 
 interface Iprops {
     collectionSummaries: CollectionSummaries;
@@ -97,6 +97,14 @@ export default function Sidebar({
     );
 }
 
+const DrawerSidebar = styled(EnteDrawer)(({ theme }) => ({
+    "& .MuiPaper-root": {
+        padding: theme.spacing(1.5),
+    },
+}));
+
+DrawerSidebar.defaultProps = { anchor: "left" };
+
 interface UserDetailsSectionProps {
     sidebarView: boolean;
 }

web/apps/photos/src/components/Sidebar/styledComponents.tsx

@@ -1,17 +0,0 @@
-import CircleIcon from "@mui/icons-material/Circle";
-import { styled } from "@mui/material";
-import { EnteDrawer } from "components/EnteDrawer";
-
-export const DrawerSidebar = styled(EnteDrawer)(({ theme }) => ({
-    "& .MuiPaper-root": {
-        padding: theme.spacing(1.5),
-    },
-}));
-
-DrawerSidebar.defaultProps = { anchor: "left" };
-
-export const DotSeparator = styled(CircleIcon)`
-    font-size: 4px;
-    margin: 0 ${({ theme }) => theme.spacing(1)};
-    color: inherit;
-`;