From 22ebb0e1f4ac24c6b0fa9fe1bd31556d8a8422be Mon Sep 17 00:00:00 2001
From: ALAMI Adnane <Adnane.Alami@bordeaux-inp.fr>
Date: Tue, 11 Feb 2025 20:47:37 +0100
Subject: [PATCH] feat: enhancing canvass layout

---
 .../src/components/canvas/CanvasItem.vue      | 27 ++++++++++++-------
 .../src/components/canvas/LeanCanvas.vue      |  1 -
 .../src/components/canvas/style-project.css   | 17 ------------
 3 files changed, 18 insertions(+), 27 deletions(-)

diff --git a/front/MyINPulse-front/src/components/canvas/CanvasItem.vue b/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
index d999eb9..b96a575 100644
--- a/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
+++ b/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
@@ -26,7 +26,7 @@
         currentDescription.value = expanded.value
           ? "3 problèmes essentiels à résoudre pour le client"
           : "FAKE DATA";
-        
+
           expanded.value = !expanded.value;
       };
   
@@ -42,7 +42,7 @@
   <style scoped>
   @import "@/components/canvas/style-project.css";
   
-	.cell {
+  .cell {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -50,15 +50,24 @@
 		text-align: center;
 		transition: all 0.3s ease;
 		cursor: pointer;
+    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
 	}
 
-  .cell_Expanded {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		transition: all 0.3s ease;
-		cursor: pointer;
-	}
+  .cell:not(.expanded):hover {
+    transform: scale(1.05);
+    box-shadow: 0 8px 9px rgba(0, 0, 0, 0.2);
+  }
+
+  .cell h3 {
+      font-size: 20px;
+      font-weight: 500;
+      /*margin-bottom: 10px;*/
+  }
+
+  .cell p {
+      font-size: 14px;
+      color: #666;
+  }
 
 	.expanded {
     position: fixed;
diff --git a/front/MyINPulse-front/src/components/canvas/LeanCanvas.vue b/front/MyINPulse-front/src/components/canvas/LeanCanvas.vue
index ee085bb..ebfb9bf 100644
--- a/front/MyINPulse-front/src/components/canvas/LeanCanvas.vue
+++ b/front/MyINPulse-front/src/components/canvas/LeanCanvas.vue
@@ -46,7 +46,6 @@ export default {
   padding: 10px;
   max-width: 1200px;
   margin: 20px auto;
-  border: 2px dashed #d33;
   background-color: #fff; 
   position: relative;
   height: 80vh;
diff --git a/front/MyINPulse-front/src/components/canvas/style-project.css b/front/MyINPulse-front/src/components/canvas/style-project.css
index 4369b49..e505a15 100644
--- a/front/MyINPulse-front/src/components/canvas/style-project.css
+++ b/front/MyINPulse-front/src/components/canvas/style-project.css
@@ -4,15 +4,6 @@ body {
     padding: 10px;
   }
   
-  .canvas {
-    display: flex;
-    flex-direction: column;
-    max-width: 1200px;
-    margin: 20px auto;
-    border: 2px dashed #d33;
-    background: #fff;
-  }
-  
   .row {
     display: flex;
   }
@@ -67,14 +58,6 @@ body {
     margin-bottom: 10px;
   }
 
-  .cell {
-    flex: 1;
-    border: 1px solid #ddd;
-    padding: 20px;
-    text-align: center;
-    background-color: #f1f1f1;
-  }
-
   #ade {
     max-width: 1200px;
     margin: 20px auto;