From e982a673374bf86e7cd55e281685d2d57452b8e2 Mon Sep 17 00:00:00 2001
From: Lulox <lulox.eth@protonmail.com>
Date: Mon, 23 Sep 2024 06:32:08 -0300
Subject: [PATCH] Improved UI of image uploading

---
 .../app/create/_components/DescriptionInput.tsx  |  2 +-
 .../app/create/_components/ImageUploader.tsx     | 14 ++++++++------
 .../_components/ProfilePictureUpload.tsx         | 16 +++++++++-------
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/packages/nextjs/app/create/_components/DescriptionInput.tsx b/packages/nextjs/app/create/_components/DescriptionInput.tsx
index b2ff16a..2948003 100644
--- a/packages/nextjs/app/create/_components/DescriptionInput.tsx
+++ b/packages/nextjs/app/create/_components/DescriptionInput.tsx
@@ -49,7 +49,7 @@ export const DescriptionInput = <T extends { toString: () => string } | undefine
     <div className={`flex bg-base-200 rounded-lg text-accent ${modifier}`}>
       {prefix}
       <textarea
-        className="textarea textarea-ghost border-base-300 focus:border-green-600 border-2 rounded-lg focus:outline-none focus:bg-transparent focus:text-gray-400 h-auto min-h-[3rem] px-4 border w-full font-medium placeholder:text-accent/50 text-green-500 resize-none"
+        className="textarea textarea-ghost border-base-300 focus:border-green-600 border-2 rounded-lg focus:outline-none focus:bg-transparent focus:text-gray-400 h-auto min-h-[3rem] px-4 w-full font-medium placeholder:text-accent/50 text-green-500 resize-none"
         placeholder={placeholder}
         name={name}
         value={value?.toString()}
diff --git a/packages/nextjs/app/create/_components/ImageUploader.tsx b/packages/nextjs/app/create/_components/ImageUploader.tsx
index c5b0a60..f8df576 100644
--- a/packages/nextjs/app/create/_components/ImageUploader.tsx
+++ b/packages/nextjs/app/create/_components/ImageUploader.tsx
@@ -78,7 +78,7 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({ image, setUploaded
     <div
       className={`relative flex items-center justify-center w-60 h-72 rounded-lg shadow-lg ${
         dragActive ? "bg-blue-400 border-2 border-blue-600" : ""
-      } ${previewImage ? "" : "bg-blue-50 dark:bg-blue-950"}`}
+      } ${previewImage ? "" : "bg-base-200"}`}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
@@ -105,11 +105,13 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({ image, setUploaded
           )}
         </div>
       ) : (
-        <div className="absolute inset-0 flex flex-col items-center justify-center text-gray-500">
-          <p className="font-bold">Drag & Drop Image Here</p>
-          <p>or</p>
-          <label className="cursor-pointer text-blue-600 underline">
-            Click to Upload
+        <div className="absolute inset-0 flex flex-col items-center justify-center">
+          {/* <p className="font-bold">Drag & Drop Image Here</p>
+          <p>or</p> */}
+          <label className="w-full h-full flex flex-col items-center justify-center cursor-pointer">
+            <span className="text-5xl h-auto rounded-full ">+</span>
+            <span className="font-bold">Upload image</span>
+            <span className="">Max filesize: 2 MB</span>
             <input
               type="file"
               accept="image/*"
diff --git a/packages/nextjs/app/myProfile/_components/ProfilePictureUpload.tsx b/packages/nextjs/app/myProfile/_components/ProfilePictureUpload.tsx
index 4c43225..1c6a95c 100644
--- a/packages/nextjs/app/myProfile/_components/ProfilePictureUpload.tsx
+++ b/packages/nextjs/app/myProfile/_components/ProfilePictureUpload.tsx
@@ -81,8 +81,8 @@ export const ProfilePictureUpload: React.FC<ProfilePictureUploadProps> = ({
   return (
     <div
       className={`relative flex items-center justify-center w-32 h-32 rounded-full shadow-lg ${
-        dragActive ? "bg-blue-100 border-2 border-blue-600" : "bg-gray-200"
-      } ${previewImage ? "" : "bg-gray-200"}`}
+        dragActive ? "bg-blue-500 border-2 border-blue-600" : "bg-base-200"
+      } ${previewImage ? "" : "bg-base-200"} `}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
@@ -109,12 +109,14 @@ export const ProfilePictureUpload: React.FC<ProfilePictureUploadProps> = ({
           )}
         </div>
       ) : isEditing ? (
-        <div className="absolute inset-0 flex flex-col items-center justify-center text-gray-500 text-center p-2">
-          <p className="text-xs font-bold m-0">Drag & Drop</p>
+        <div className="absolute inset-0 flex flex-col items-center justify-center text-center p-2">
+          {/* <p className="text-xs font-bold m-0">Drag & Drop</p>
           <p className="text-xs m-0">Image Here</p>
-          <p className="text-xs m-0">or</p>
-          <label className="cursor-pointer text-blue-600 underline text-xs m-0">
-            Click to Upload
+          <p className="text-xs m-0">or</p> */}
+          <label className="w-full h-full flex flex-col cursor-pointer text-xs m-0">
+            <span className="text-5xl h-auto rounded-full ">+</span>
+            <span className="font-bold">Upload image</span>
+            <span className="">Max filesize: 2 MB</span>
             <input
               type="file"
               accept="image/*"