From 09b7e74d654bc7acc2c59660ed650abcd6b02ba9 Mon Sep 17 00:00:00 2001 From: Camilo Oviedo Date: Wed, 14 Aug 2024 16:21:48 +1000 Subject: [PATCH 1/3] fix: Enhance visual feedback on file drag-and-drop --- .../components/Dropzone/Dropzone.module.css | 34 ++++++++++++++++--- .../src/components/Dropzone/Dropzone.tsx | 14 +++++--- 2 files changed, 40 insertions(+), 8 deletions(-) diff --git a/packages/webapp/src/components/Dropzone/Dropzone.module.css b/packages/webapp/src/components/Dropzone/Dropzone.module.css index 63a207805..4681110b5 100644 --- a/packages/webapp/src/components/Dropzone/Dropzone.module.css +++ b/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; -} \ No newline at end of file + 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 */ +} diff --git a/packages/webapp/src/components/Dropzone/Dropzone.tsx b/packages/webapp/src/components/Dropzone/Dropzone.tsx index 8682a499b..e885407b5 100644 --- a/packages/webapp/src/components/Dropzone/Dropzone.tsx +++ b/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) => { > {
{children}
From 9b8b51cb9129d5e701181f51417e3ae9fcd408a3 Mon Sep 17 00:00:00 2001 From: Camilo Oviedo Date: Wed, 14 Aug 2024 16:29:38 +1000 Subject: [PATCH 2/3] fix: Enhance visual feedback on file drag-and-drop --- packages/webapp/src/components/Dropzone/Dropzone.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/webapp/src/components/Dropzone/Dropzone.tsx b/packages/webapp/src/components/Dropzone/Dropzone.tsx index e885407b5..1c0914385 100644 --- a/packages/webapp/src/components/Dropzone/Dropzone.tsx +++ b/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; From f97b127a69bcd716b426a43e5f94a9aa53c572c0 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Wed, 14 Aug 2024 16:12:13 +0200 Subject: [PATCH 3/3] fix: style tweaks in dropzoen accept/reject modes --- .../components/Dropzone/Dropzone.module.css | 38 +++++-------------- .../src/components/Dropzone/Dropzone.tsx | 5 +-- 2 files changed, 12 insertions(+), 31 deletions(-) diff --git a/packages/webapp/src/components/Dropzone/Dropzone.module.css b/packages/webapp/src/components/Dropzone/Dropzone.module.css index 4681110b5..907edbf30 100644 --- a/packages/webapp/src/components/Dropzone/Dropzone.module.css +++ b/packages/webapp/src/components/Dropzone/Dropzone.module.css @@ -1,6 +1,6 @@ .root { padding: 20px; - border: 2px dashed #c5cbd3; /* Changed from dotted to dashed for better visibility */ + border: 2px dotted #c5cbd3; border-radius: 6px; min-height: 200px; display: flex; @@ -8,31 +8,13 @@ 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 */ -} + &.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) + } +} \ No newline at end of file diff --git a/packages/webapp/src/components/Dropzone/Dropzone.tsx b/packages/webapp/src/components/Dropzone/Dropzone.tsx index 1c0914385..bc0d45b46 100644 --- a/packages/webapp/src/components/Dropzone/Dropzone.tsx +++ b/packages/webapp/src/components/Dropzone/Dropzone.tsx @@ -238,7 +238,8 @@ export const Dropzone = (_props: DropzoneProps) => { className: clsx( styles.root, { - [styles.dropzoneActive]: isDragAccept || isDragReject, + [styles.dropzoneAccept]: isDragAccept, + [styles.dropzoneReject]: isDragReject }, classNames?.root ), @@ -274,8 +275,6 @@ Dropzone.Idle = DropzoneIdle; Dropzone.Reject = DropzoneReject; - - type PossibleRef = Ref | undefined; export function assignRef(ref: PossibleRef, value: T) {