use newer

web/apps/photos/src/components/Collections/CollectionSelector/AddCollectionButton.tsx

@@ -1,30 +0,0 @@
-import { AllCollectionTile } from "@/new/photos/components/ItemCards";
-import { CenteredFlex, Overlay } from "@ente/shared/components/Container";
-import { styled } from "@mui/material";
-import CollectionCard from "components/Collections/CollectionCard";
-import { AllCollectionTileText } from "components/Collections/styledComponents";
-import { t } from "i18next";
-
-const ImageContainer = styled(Overlay)`
-    display: flex;
-    font-size: 42px;
-`;
-
-interface Iprops {
-    showNextModal: () => void;
-}
-
-export default function AddCollectionButton({ showNextModal }: Iprops) {
-    return (
-        <CollectionCard
-            collectionTile={AllCollectionTile}
-            onClick={() => showNextModal()}
-            coverFile={null}
-        >
-            <AllCollectionTileText>{t("create_albums")}</AllCollectionTileText>
-            <ImageContainer>
-                <CenteredFlex>+</CenteredFlex>
-            </ImageContainer>
-        </CollectionCard>
-    );
-}

web/apps/photos/src/components/Collections/CollectionSelector/index.tsx

@@ -8,10 +8,20 @@ import type {
     CollectionSummaries,
     CollectionSummary,
 } from "@/new/photos/types/collection";
-import { FlexWrapper } from "@ente/shared/components/Container";
+import {
+    CenteredFlex,
+    FlexWrapper,
+    Overlay,
+} from "@ente/shared/components/Container";
 import DialogTitleWithCloseButton from "@ente/shared/components/DialogBox/TitleWithCloseButton";
-import { DialogContent, Typography, useMediaQuery } from "@mui/material";
+import {
+    DialogContent,
+    styled,
+    Typography,
+    useMediaQuery,
+} from "@mui/material";
 import { AllCollectionDialog } from "components/Collections/AllCollections/dialog";
+import CollectionCard from "components/Collections/CollectionCard";
 import { t } from "i18next";
 import { useEffect, useState } from "react";
 import { createUnCategorizedCollection } from "services/collectionService";
@@ -22,7 +32,6 @@ import {
     isAddToAllowedCollection,
     isMoveToAllowedCollection,
 } from "utils/collection";
-import AddCollectionButton from "./AddCollectionButton";
 
 export interface CollectionSelectorAttributes {
     callback: (collection: Collection) => void;
@@ -182,3 +191,27 @@ const CollectionSelectorCard: React.FC<CollectionSelectorCardProps> = ({
         </LargeTileTextOverlay>
     </ItemCard>
 );
+
+interface AddCollectionButtonProps {
+    showNextModal: () => void;
+}
+
+export const AddCollectionButton: React.FC<AddCollectionButtonProps> = ({
+    showNextModal,
+}) => (
+    <CollectionCard
+        collectionTile={AllCollectionTile}
+        onClick={() => showNextModal()}
+        coverFile={null}
+    >
+        <LargeTileTextOverlay>{t("create_albums")}</LargeTileTextOverlay>
+        <ImageContainer>
+            <CenteredFlex>+</CenteredFlex>
+        </ImageContainer>
+    </CollectionCard>
+);
+
+const ImageContainer = styled(Overlay)`
+    display: flex;
+    font-size: 42px;
+`;