fix: Enhance visual feedback on file drag-and-drop

packages/webapp/src/components/Dropzone/Dropzone.module.css

@@ -1,12 +1,38 @@
-
-
 .root {
   padding: 20px;
-  border: 2px dotted #c5cbd3;
+  border: 2px dashed #c5cbd3; /* Changed from dotted to dashed for better visibility */
   border-radius: 6px;
   min-height: 200px;
   display: flex;
   flex-direction: column;
   background: #fff;
   position: relative;
-}
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.dropzoneActive {
+  background-color: rgba(0, 123, 255, 0.15);
+  border-color: #007bff;
+}
+
+.dropzoneActive .content {
+  color: #007bff; /* Change text color to match the border when active */
+}
+
+.content {
+  position: relative;
+  z-index: 20;
+  transition: color 0.3s ease;
+}
+
+.dropzoneActive:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 123, 255, 0.3); /* This creates a full overlay effect */
+  z-index: 10;
+  border-radius: 6px; /* Ensures the overlay matches the container's rounded corners */
+}

packages/webapp/src/components/Dropzone/Dropzone.tsx

@@ -28,9 +28,9 @@ export type DropzoneCssVariables = {
 };
 
 export interface DropzoneProps {
-  /** Key of `theme.colors` or any valid CSS color to set colors of `Dropzone.Accept`, `theme.primaryColor` by default */
+    /** Key of `theme.colors` or any valid CSS color to set colors of `Dropzone.Accept`, `theme.primaryColor` by default */
   acceptColor?: MantineColor;
-
+    
   /** Key of `theme.colors` or any valid CSS color to set colors of `Dropzone.Reject`, `'red'` by default */
   rejectColor?: MantineColor;
 
@@ -235,7 +235,13 @@ export const Dropzone = (_props: DropzoneProps) => {
     >
       <Box
         {...getRootProps({
-          className: clsx(styles.root, classNames?.root),
+          className: clsx(
+            styles.root,
+            {
+              [styles.dropzoneActive]: isDragAccept || isDragReject,
+            },
+            classNames?.root
+          ),
         })}
         // {...getStyles('root', { focusable: true })}
         {...others}
@@ -253,7 +259,7 @@ export const Dropzone = (_props: DropzoneProps) => {
         <input {...getInputProps(inputProps)} name={name} />
         <div
           data-enable-pointer-events={enablePointerEvents || undefined}
-          className={classNames?.content}
+          className={clsx(styles.content, classNames?.content)}
         >
           {children}
         </div>