From 982a06677064d4474581d4ed4a9249f0a17e9be0 Mon Sep 17 00:00:00 2001
From: Carl Fuchs <cfuchs@techform.fr>
Date: Wed, 8 Feb 2023 16:01:32 +0100
Subject: [PATCH] =?UTF-8?q?[Update]=20Am=C3=A9lioration=20simple=20du=20Dr?=
 =?UTF-8?q?agNDrop=20:=20correction=20du=20bg=20color=20sur=20l'item=20sel?=
 =?UTF-8?q?ected=20et=20offset=20de=20la=20dragimage=20pour=20ne=20pas=20g?=
 =?UTF-8?q?=C3=AAner?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Components/Components/Components.tsx           | 4 +++-
 src/Components/ElementsSidebar/ElementsSidebar.tsx | 6 ++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/Components/Components/Components.tsx b/src/Components/Components/Components.tsx
index 8b519c5..f7bd816 100644
--- a/src/Components/Components/Components.tsx
+++ b/src/Components/Components/Components.tsx
@@ -19,7 +19,9 @@ interface IComponentsProps {
 }
 
 function HandleDragStart(event: React.DragEvent<HTMLButtonElement>): void {
-  event.dataTransfer.setData('type', (event.target as HTMLButtonElement).id);
+  const element = event.target as HTMLButtonElement;
+  event.dataTransfer.setData('type', element.id);
+  event.dataTransfer.setDragImage(element, 0, 0);
 }
 
 interface SidebarCategory {
diff --git a/src/Components/ElementsSidebar/ElementsSidebar.tsx b/src/Components/ElementsSidebar/ElementsSidebar.tsx
index fdae986..369d6b0 100644
--- a/src/Components/ElementsSidebar/ElementsSidebar.tsx
+++ b/src/Components/ElementsSidebar/ElementsSidebar.tsx
@@ -34,6 +34,7 @@ function RemoveBorderClasses(target: HTMLButtonElement, exception: string = ''):
 
 function HandleDragLeave(event: React.DragEvent): void {
   const target: HTMLButtonElement = event.target as HTMLButtonElement;
+
   RemoveBorderClasses(target);
 }
 
@@ -43,6 +44,7 @@ function HandleDragOver(
 ): void {
   event.preventDefault();
   const target: HTMLButtonElement = event.target as HTMLButtonElement;
+
   const rect = target.getBoundingClientRect();
   const y = event.clientY - rect.top; // y position within the element.
 
@@ -193,7 +195,7 @@ export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element {
         </div>
         <List
           itemCount={containers.length}
-          itemSize={35}
+          itemSize={40}
           height={height}
           width={'100%'}
         >
@@ -228,7 +230,7 @@ function ElementsListRow(
   }
 
   const buttonSelectedClass: string = isSelected
-    ? 'bg-blue-500 shadow-lg shadow-blue-500/60 hover:bg-blue-600 hover:shadow-blue-500 text-slate-50'
+    ? 'bg-blue-500  shadow-lg shadow-blue-500/60 hover:bg-blue-600 border-blue-600 hover:shadow-blue-500 text-slate-50'
     : 'bg-slate-300/60 hover:bg-slate-400 hover:shadow-slate-400';
 
   return <button type="button"