R

web/apps/photos/src/components/Upload/UploadButton.tsx

@@ -4,45 +4,24 @@ import { type UploadTypeSelectorIntent } from "components/Upload/UploadTypeSelec
 import { t } from "i18next";
 import uploadManager from "services/upload/uploadManager";
 
-const Wrapper = styled("div")<{ $disableShrink: boolean }>`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: opacity 1s ease;
-    cursor: pointer;
-    & .mobile-button {
-        display: none;
-    }
-    ${({ $disableShrink }) =>
-        !$disableShrink &&
-        `@media (max-width: 624px) {
-        & .mobile-button {
-            display: inline-flex;
-        }
-        & .desktop-button {
-            display: none;
-        }
-    }`}
-`;
-
-interface Iprops {
+interface UploadButtonProps {
     openUploader: (intent?: UploadTypeSelectorIntent) => void;
     text?: string;
     color?: ButtonProps["color"];
     disableShrink?: boolean;
     icon?: JSX.Element;
 }
-function UploadButton({
+export const UploadButton: React.FC<UploadButtonProps> = ({
     openUploader,
     text,
     color,
     disableShrink,
     icon,
-}: Iprops) {
+}) => {
     const onClickHandler = () => openUploader();
 
     return (
-        <Wrapper
+        <UploadButton_
             $disableShrink={disableShrink}
             style={{
                 cursor: !uploadManager.shouldAllowNewUpload() && "not-allowed",
@@ -66,8 +45,27 @@ function UploadButton({
             >
                 {icon ?? <FileUploadOutlinedIcon />}
             </IconButton>
-        </Wrapper>
+        </UploadButton_>
     );
-}
+};
 
-export default UploadButton;
+const UploadButton_ = styled("div")<{ $disableShrink: boolean }>`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 1s ease;
+    cursor: pointer;
+    & .mobile-button {
+        display: none;
+    }
+    ${({ $disableShrink }) =>
+        !$disableShrink &&
+        `@media (max-width: 624px) {
+        & .mobile-button {
+            display: inline-flex;
+        }
+        & .desktop-button {
+            display: none;
+        }
+    }`}
+`;

web/apps/photos/src/components/pages/sharedAlbum/Navbar.tsx

@@ -3,7 +3,7 @@ import { useIsTouchscreen } from "@/base/hooks";
 import { FluidContainer } from "@ente/shared/components/Container";
 import AddPhotoAlternateOutlined from "@mui/icons-material/AddPhotoAlternateOutlined";
 import { Box, Button } from "@mui/material";
-import UploadButton from "components/Upload/UploadButton";
+import { UploadButton } from "components/Upload/UploadButton";
 import { t } from "i18next";
 
 export default function SharedAlbumNavbar({ showUploadButton, openUploader }) {

web/apps/photos/src/pages/gallery.tsx

@@ -69,7 +69,7 @@ import PhotoFrame from "components/PhotoFrame";
 import { ITEM_TYPE, TimeStampListItem } from "components/PhotoList";
 import { SearchBar, type UpdateSearch } from "components/SearchBar";
 import Sidebar from "components/Sidebar";
-import UploadButton from "components/Upload/UploadButton";
+import { UploadButton } from "components/Upload/UploadButton";
 import type { UploadTypeSelectorIntent } from "components/Upload/UploadTypeSelector";
 import Uploader from "components/Upload/Uploader";
 import { UploadSelectorInputs } from "components/UploadSelectorInputs";

web/apps/photos/src/pages/shared-albums.tsx

@@ -34,7 +34,7 @@ import FullScreenDropZone from "components/FullScreenDropZone";
 import { LoadingOverlay } from "components/LoadingOverlay";
 import PhotoFrame from "components/PhotoFrame";
 import { ITEM_TYPE, TimeStampListItem } from "components/PhotoList";
-import UploadButton from "components/Upload/UploadButton";
+import { UploadButton } from "components/Upload/UploadButton";
 import Uploader from "components/Upload/Uploader";
 import { UploadSelectorInputs } from "components/UploadSelectorInputs";
 import SharedAlbumNavbar from "components/pages/sharedAlbum/Navbar";