Improve design of drag & drop overlay

Author: DaneEveritt

resources/scripts/components/server/files/UploadButton.tsx

@@ -3,7 +3,6 @@ import getFileUploadUrl from '@/api/server/files/getFileUploadUrl';
 import tw from 'twin.macro';
 import { Button } from '@/components/elements/button/index';
 import React, { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components/macro';
 import { ModalMask } from '@/components/elements/Modal';
 import Fade from '@/components/elements/Fade';
 import useEventListener from '@/plugins/useEventListener';
@@ -12,11 +11,7 @@ import useFileManagerSwr from '@/plugins/useFileManagerSwr';
 import { ServerContext } from '@/state/server';
 import { WithClassname } from '@/components/types';
 import Portal from '@/components/elements/Portal';
-
-const InnerContainer = styled.div`
-    max-width: 600px;
-    ${tw`bg-black w-full border-4 border-primary-500 border-dashed rounded p-10 mx-10`}
-`;
+import { CloudUploadIcon } from '@heroicons/react/outline';
 
 function isFileOrDirectory(event: DragEvent): boolean {
     if (!event.dataTransfer?.types) {
@@ -123,10 +118,17 @@ export default ({ className }: WithClassname) => {
                             onFileSubmission(e.dataTransfer.files);
                         }}
                     >
-                        <div css={tw`w-full flex items-center justify-center pointer-events-none`}>
-                            <InnerContainer>
-                                <p css={tw`text-lg text-neutral-200 text-center`}>Drag and drop files to upload.</p>
-                            </InnerContainer>
+                        <div className={'w-full flex items-center justify-center pointer-events-none'}>
+                            <div
+                                className={
+                                    'flex items-center space-x-4 bg-black w-full ring-4 ring-blue-200 ring-opacity-60 rounded p-6 mx-10 max-w-sm'
+                                }
+                            >
+                                <CloudUploadIcon className={'w-10 h-10 flex-shrink-0'} />
+                                <p className={'font-header flex-1 text-lg text-neutral-100 text-center'}>
+                                    Drag and drop files to upload.
+                                </p>
+                            </div>
                         </div>
                     </ModalMask>
                 </Fade>