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; `;