From b1895e8c3cfaffd6a2fccbeb127d5fe2092dfdec Mon Sep 17 00:00:00 2001
From: Leah <45321184+ChaoticLeah@users.noreply.github.com>
Date: Sun, 8 Dec 2024 15:11:14 +0100
Subject: [PATCH] Fixed upload page style

---
 src/app/images/upload/page.css | 43 +++++++++++++++++++++++++++++++++-
 src/app/images/upload/page.tsx | 34 +++++++++++++++++++++------
 2 files changed, 69 insertions(+), 8 deletions(-)

diff --git a/src/app/images/upload/page.css b/src/app/images/upload/page.css
index 06f0d96..0187def 100644
--- a/src/app/images/upload/page.css
+++ b/src/app/images/upload/page.css
@@ -1,6 +1,6 @@
 .page {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
 }
@@ -9,4 +9,45 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
+}
+
+.info {
+    opacity: 50%;
+    margin-bottom: 10px;
+}
+
+.file-upload{
+    /* width: 60vw;
+    height: 50vh; */
+    text-wrap: nowrap;
+    padding: 30vh 30vw;
+    margin: 20px;
+    border-radius: 1rem;
+    outline-style: dashed;
+    cursor: pointer;
+    font-size: larger;
+}
+
+.fadeonhover {
+    transition: all;
+    transition-duration: 500ms;
+}
+
+.fadeonhover:hover {
+    opacity: 50%;
+}
+
+.popuponhover {
+    transition: all;
+    transition-duration: 500ms;
+}
+
+.popuponhover:hover {
+    transform: scale(110%);
+}
+
+.filename {
+    text-align: center;
+    opacity: 50%;
+    font-size: smaller;
 }
\ No newline at end of file
diff --git a/src/app/images/upload/page.tsx b/src/app/images/upload/page.tsx
index 8209e00..776c27e 100644
--- a/src/app/images/upload/page.tsx
+++ b/src/app/images/upload/page.tsx
@@ -3,7 +3,7 @@ import "@radix-ui/themes/styles.css";
 import {useState} from "react";
 import './page.css'
 import {getCookie} from "@/app/helpers";
-import {Button, Theme} from "@radix-ui/themes";
+import {Button, Heading, Theme} from "@radix-ui/themes";
 
 
 export default function Page() {
@@ -14,9 +14,23 @@ export default function Page() {
 
     //@ts-expect-error the thing breaks idfk
     const handleFileChange = (e) => {
+        console.log(e.target.files[0].name)
         setFile(e.target.files[0]);
     };
 
+    const dropFile = (e: DragEvent) => {
+        e.preventDefault();
+        const files = e.dataTransfer?.files ?? []
+        if(files.length > 0)
+            //@ts-expect-error the thing breaks idfk
+            setFile(files[0])
+    }
+
+    function dragOverHandler(ev: DragEvent) {
+        ev.preventDefault();
+    }
+      
+
     const handleUpload = async () => {
         if (!file) {
             setMessage('Please select a file first.');
@@ -56,19 +70,25 @@ export default function Page() {
     };
 
     return (
-        <Theme appearance="dark">
+        //@ts-expect-error the thing breaks idfk
+        <Theme appearance="dark" onDrop={dropFile} onDragOver={dragOverHandler}>
             <div className="mainpage">
                 <div className="page">
-                    <h2>Upload a File</h2>
+                    <Heading color="crimson" as="h2">Upload a File</Heading>
                 </div>
                 <div className="page">
-
-                    <input type="file" onChange={handleFileChange}/>
-                    <Button color="crimson" variant="surface" onClick={handleUpload} style={{marginLeft: '10px'}}>
+                    <label htmlFor="file-upload" className="file-upload fadeonhover">
+                        Drag files here
+                        {/*@ts-expect-error ts is sucking ):*/}
+                        <p className="filename">{file != null ? file.name : ''}</p>
+                    </label>
+                    <input id="file-upload" type="file" style={{display: "none"}} onChange={handleFileChange}/>
+                    <div className="page info">{message && <p>{message}</p>}</div>
+                    <Button color="crimson" variant="surface" onClick={handleUpload} style={{marginLeft: '10px'}} className="popuponhover">
+                        <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.81825 1.18188C7.64251 1.00615 7.35759 1.00615 7.18185 1.18188L4.18185 4.18188C4.00611 4.35762 4.00611 4.64254 4.18185 4.81828C4.35759 4.99401 4.64251 4.99401 4.81825 4.81828L7.05005 2.58648V9.49996C7.05005 9.74849 7.25152 9.94996 7.50005 9.94996C7.74858 9.94996 7.95005 9.74849 7.95005 9.49996V2.58648L10.1819 4.81828C10.3576 4.99401 10.6425 4.99401 10.8182 4.81828C10.994 4.64254 10.994 4.35762 10.8182 4.18188L7.81825 1.18188ZM2.5 9.99997C2.77614 9.99997 3 10.2238 3 10.5V12C3 12.5538 3.44565 13 3.99635 13H11.0012C11.5529 13 12 12.5528 12 12V10.5C12 10.2238 12.2239 9.99997 12.5 9.99997C12.7761 9.99997 13 10.2238 13 10.5V12C13 13.104 12.1062 14 11.0012 14H3.99635C2.89019 14 2 13.103 2 12V10.5C2 10.2238 2.22386 9.99997 2.5 9.99997Z" fill="currentColor"></path></svg>
                         Upload
                     </Button>
                 </div>
-                <div className="page">{message && <p>{message}</p>}</div>
             </div>
         </Theme>
     );