diff --git a/src/renderer/components/+extensions/notice.module.css b/src/renderer/components/+extensions/notice.module.css index 200855b549..5cc5260092 100644 --- a/src/renderer/components/+extensions/notice.module.css +++ b/src/renderer/components/+extensions/notice.module.css @@ -20,7 +20,7 @@ */ .notice { - @apply p-8 flex flex-col gap-2 mb-14 rounded-lg; + @apply p-8 flex flex-col gap-2 mb-14 mt-3 rounded-lg; background-color: var(--noticeBackground); border: 1px solid var(--boxShadow); color: var(--textColorTertiary); diff --git a/src/renderer/components/hotbar/hotbar-cell.tsx b/src/renderer/components/hotbar/hotbar-cell.tsx index aa19faa052..c9e75e08fd 100644 --- a/src/renderer/components/hotbar/hotbar-cell.tsx +++ b/src/renderer/components/hotbar/hotbar-cell.tsx @@ -8,7 +8,7 @@ import { cssNames } from "../../utils"; interface Props extends HTMLAttributes { children?: ReactNode; index: number; - innerRef?: React.LegacyRef; + innerRef?: React.Ref; } export function HotbarCell({ innerRef, children, className, ...rest }: Props) { diff --git a/src/renderer/components/input/drop-file-input.scss b/src/renderer/components/input/drop-file-input.scss index 5a6aae99c8..aa0ca4f9c1 100644 --- a/src/renderer/components/input/drop-file-input.scss +++ b/src/renderer/components/input/drop-file-input.scss @@ -21,10 +21,7 @@ .DropFileInput { &.droppable { - box-shadow: 0 0 0 5px $primary; // fixme: might not work sometimes - - > * { - pointer-events: none; - } + box-shadow: inset 0 0 0 6px $primary; + transition: all 0.3s; } } \ No newline at end of file diff --git a/src/renderer/components/input/drop-file-input.tsx b/src/renderer/components/input/drop-file-input.tsx index 276fb8d839..e3c9b512aa 100644 --- a/src/renderer/components/input/drop-file-input.tsx +++ b/src/renderer/components/input/drop-file-input.tsx @@ -39,15 +39,21 @@ export interface DropFileMeta { @observer export class DropFileInput extends React.Component { @observable dropAreaActive = false; + dragCounter = 0; // Counter preventing firing onDragLeave() too early (https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element) @autobind() onDragEnter() { + this.dragCounter++; this.dropAreaActive = true; } @autobind() onDragLeave() { - this.dropAreaActive = false; + this.dragCounter--; + + if (this.dragCounter == 0) { + this.dropAreaActive = false; + } } @autobind()