Bespoke

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

@@ -1,71 +0,0 @@
-import FileUploadOutlinedIcon from "@mui/icons-material/FileUploadOutlined";
-import { Button, ButtonProps, IconButton, styled } from "@mui/material";
-import { type UploadTypeSelectorIntent } from "components/Upload/UploadTypeSelector";
-import { t } from "i18next";
-import uploadManager from "services/upload/uploadManager";
-
-interface UploadButtonProps {
-    openUploader: (intent?: UploadTypeSelectorIntent) => void;
-    text?: string;
-    color?: ButtonProps["color"];
-    disableShrink?: boolean;
-    icon?: JSX.Element;
-}
-export const UploadButton: React.FC<UploadButtonProps> = ({
-    openUploader,
-    text,
-    color,
-    disableShrink,
-    icon,
-}) => {
-    const onClickHandler = () => openUploader();
-
-    return (
-        <UploadButton_
-            $disableShrink={disableShrink}
-            style={{
-                cursor: !uploadManager.shouldAllowNewUpload() && "not-allowed",
-            }}
-        >
-            <Button
-                sx={{ whiteSpace: "nowrap" }}
-                onClick={onClickHandler}
-                disabled={!uploadManager.shouldAllowNewUpload()}
-                className="desktop-button"
-                color={color ?? "secondary"}
-                startIcon={icon ?? <FileUploadOutlinedIcon />}
-            >
-                {text ?? t("upload")}
-            </Button>
-
-            <IconButton
-                onClick={onClickHandler}
-                disabled={!uploadManager.shouldAllowNewUpload()}
-                className="mobile-button"
-            >
-                {icon ?? <FileUploadOutlinedIcon />}
-            </IconButton>
-        </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/pages/shared-albums.tsx

@@ -42,7 +42,6 @@ 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 Uploader from "components/Upload/Uploader";
 import { UploadSelectorInputs } from "components/UploadSelectorInputs";
 import { t } from "i18next";
@@ -340,13 +339,7 @@ export default function PublicCollectionGallery() {
                 ? {
                       item: (
                           <CenteredFlex sx={{ marginTop: "56px" }}>
-                              <UploadButton
-                                  disableShrink
-                                  openUploader={onAddPhotos}
-                                  text={t("ADD_MORE_PHOTOS")}
-                                  color="accent"
-                                  icon={<AddPhotoAlternateOutlined />}
-                              />
+                              <AddMorePhotosButton onClick={onAddPhotos} />
                           </CenteredFlex>
                       ),
                       itemType: ITEM_TYPE.FOOTER,
@@ -677,6 +670,26 @@ const AddPhotosButton: React.FC<ButtonProps & IconButtonProps> = (props) => {
     );
 };
 
+/**
+ * A visually different variation of {@link AddPhotosButton}. It also does not
+ * shrink on mobile sized screens.
+ */
+const AddMorePhotosButton: React.FC<ButtonProps> = (props) => {
+    const disabled = !uploadManager.shouldAllowNewUpload();
+    return (
+        <Box>
+            <Button
+                {...props}
+                disabled={disabled}
+                color={"accent"}
+                startIcon={<AddPhotoAlternateOutlined />}
+            >
+                {t("ADD_MORE_PHOTOS")}
+            </Button>
+        </Box>
+    );
+};
+
 const GoToEnte: React.FC = () => {
     // Touchscreen devices are overwhemingly likely to be Android or iOS.
     const isTouchscreen = useIsTouchscreen();