Merge pull request #603 from Champetaman/fix-import-drag-area-colors-blue

Fix: Enhance Dropzone visual feedback for dropzone

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

@@ -1,5 +1,3 @@
-
-
 .root {
   padding: 20px;
   border: 2px dotted #c5cbd3;
@@ -9,4 +7,14 @@
   flex-direction: column;
   background: #fff;
   position: relative;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+
+  &.dropzoneAccept {
+    border-color: rgb(0, 82, 204);
+    background: rgba(0, 82, 204, 0.05);
+  }
+  &.dropzoneReject {
+    border-color: #AC2F33;
+    background: rgba(172, 47, 51, 0.05)
+  }
 }

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

@@ -235,7 +235,14 @@ export const Dropzone = (_props: DropzoneProps) => {
     >
       <Box
         {...getRootProps({
-          className: clsx(styles.root, classNames?.root),
+          className: clsx(
+            styles.root,
+            {
+              [styles.dropzoneAccept]: isDragAccept,
+              [styles.dropzoneReject]: isDragReject
+            },
+            classNames?.root
+          ),
         })}
         // {...getStyles('root', { focusable: true })}
         {...others}
@@ -253,7 +260,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>
@@ -268,8 +275,6 @@ Dropzone.Idle = DropzoneIdle;
 Dropzone.Reject = DropzoneReject;
 
 
-
-
 type PossibleRef<T> = Ref<T> | undefined;
 
 export function assignRef<T>(ref: PossibleRef<T>, value: T) {