Improved UI of image uploading

luloxi · Sep 23, 2024 · e982a67 · e982a67
1 parent 15bfb64
commit e982a67
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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/*"