From b3d8dfae5e46e533be9af8963537efc2da64397d Mon Sep 17 00:00:00 2001
From: Max S <maxime.sallerin@smart-chain.fr>
Date: Mon, 12 Aug 2024 19:42:25 +0200
Subject: [PATCH] :fix: dashed drag and drop

---
 .../DragAndDrop/classes.module.scss           | 27 ++++++++++++++++---
 .../DesignSystem/DragAndDrop/index.tsx        |  5 +++-
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/front/Components/DesignSystem/DragAndDrop/classes.module.scss b/src/front/Components/DesignSystem/DragAndDrop/classes.module.scss
index 0c3fae28..7c452659 100644
--- a/src/front/Components/DesignSystem/DragAndDrop/classes.module.scss
+++ b/src/front/Components/DesignSystem/DragAndDrop/classes.module.scss
@@ -1,6 +1,7 @@
 @import "@Themes/constants.scss";
 
 .root {
+	position: relative;
 	display: inline-flex;
 	flex-direction: column;
 	gap: var(--spacing-3, 24px);
@@ -8,11 +9,31 @@
 	width: fit-content;
 	padding: var(--spacing-2, 16px) var(--Radius-2xl, 32px) var(--spacing-2, 16px) var(--spacing-xl, 32px);
 
-	border-radius: var(--Radius-md, 8px);
-	border: 1px dashed var(--dropdown-input-border-hovered, #b4bec5);
+	clip-path: inset(0 round var(--Radius-md, 8px));
+
+	&::before {
+		content: "";
+		position: absolute;
+		left: -15px;
+		top: -15px;
+		right: -15px;
+		bottom: -15px;
+		border: 16px dashed var(--dropdown-input-border-hovered);
+		border-radius: calc(2 * var(--Radius-md, 8px));
+		box-sizing: border-box;
+		z-index: -1;
+	}
+
+	&.filled {
+		&::before {
+			border-color: var(--dropdown-input-border-expanded);
+		}
+	}
 
 	&:hover {
-		border-color: var(--dropdown-input-border-expanded);
+		&::before {
+			border-color: var(--dropdown-input-border-expanded);
+		}
 		background: var(--primary-weak-higlight, #e5eefa);
 	}
 
diff --git a/src/front/Components/DesignSystem/DragAndDrop/index.tsx b/src/front/Components/DesignSystem/DragAndDrop/index.tsx
index 16ce9619..a803b05c 100644
--- a/src/front/Components/DesignSystem/DragAndDrop/index.tsx
+++ b/src/front/Components/DesignSystem/DragAndDrop/index.tsx
@@ -94,7 +94,10 @@ export default function DragAndDrop(props: IProps) {
 	};
 
 	return (
-		<div className={classNames(classes["root"])} onDrop={handleDrop} onDragOver={(e) => e.preventDefault()}>
+		<div
+			className={classNames(classes["root"], documents.length > 0 && classes["filled"])}
+			onDrop={handleDrop}
+			onDragOver={(e) => e.preventDefault()}>
 			<div className={classes["content"]}>
 				<DocumentPlusIcon />
 				<Separator direction={ESeperatorDirection.VERTICAL} color={ESeperatorColor.STRONG} size={64} />