diff --git a/web/packages/gallery/components/FullScreenDropZone.tsx b/web/packages/gallery/components/FullScreenDropZone.tsx
index eaf6ef46f4..230c1abe1c 100644
--- a/web/packages/gallery/components/FullScreenDropZone.tsx
+++ b/web/packages/gallery/components/FullScreenDropZone.tsx
@@ -1,5 +1,5 @@
import CloseIcon from "@mui/icons-material/Close";
-import { IconButton, Stack, styled } from "@mui/material";
+import { IconButton, Stack, styled, Typography } from "@mui/material";
import { t } from "i18next";
import React, { useCallback, useEffect, useState } from "react";
import type { DropzoneState } from "react-dropzone";
@@ -41,9 +41,7 @@ export const FullScreenDropZone: React.FC<
useEffect(() => {
const handleKeydown = (event: KeyboardEvent) => {
- if (event.code === "Escape") {
- onDragLeave();
- }
+ if (event.code == "Escape") onDragLeave();
};
window.addEventListener("keydown", handleKeydown);
@@ -57,7 +55,9 @@ export const FullScreenDropZone: React.FC<
- {message ?? t("upload_dropzone_hint")}
+
+ {message ?? t("upload_dropzone_hint")}
+
)}
{children}
@@ -65,24 +65,19 @@ export const FullScreenDropZone: React.FC<
);
};
-const Overlay = styled("div")`
- border-width: 8px;
+const Overlay = styled(Stack)`
+ position: absolute;
left: 0;
top: 0;
- outline: none;
- transition: border 0.24s ease-in-out;
height: 100%;
width: 100%;
- display: flex;
+ outline: none;
justify-content: center;
align-items: center;
- color: #fff;
- font-size: 24px;
- font-weight: 900;
- text-align: center;
- position: absolute;
- border-color: #51cd7c;
+ transition: border 0.24s ease-in-out;
+ border-width: 8px;
border-style: solid;
+ border-color: #51cd7c;
background: rgba(0, 0, 0, 0.9);
z-index: 3000;
`;