refactor: enhance DashboardCard interaction and update SimulationPlayer ROI calculation, improve dashboard styles for better layout and responsiveness

app/src/components/Dashboard/DashboardCard.tsx

@@ -182,6 +182,7 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
             className="dashboard-card-container"
             onClick={navigateToProject}
             title={projectName}
+            onMouseLeave={() => setIsKebabOpen(false)}
         >
             <div className="dashboard-card-wrapper">
                 <div className="preview-container">

app/src/components/ui/simulation/simulationPlayer.tsx

@@ -120,7 +120,7 @@ const SimulationPlayer: React.FC = () => {
   // UI-Part
   const hourlySimulation = 25;
   const dailyProduction = 75;
-  const monthlyROI = 50;
+  const monthlyROI = 10;
   const { processBar } = useProcessBar();
 
   useEffect(() => { }, [processBar]);
@@ -219,7 +219,7 @@ const SimulationPlayer: React.FC = () => {
                   <div className="progress-wrapper">
                     <div
                       className="progress"
-                      style={{ width: monthlyROI }}
+                      style={{ width: `${monthlyROI}%` }}
                     ></div>
                   </div>{" "}
                 </div>
@@ -315,8 +315,8 @@ const SimulationPlayer: React.FC = () => {
                           {index < intervals.length - 1 && (
                             <div
                               className={`line ${progress >= ((index + 1) / totalSegments) * 100
-                                  ? "filled"
-                                  : ""
+                                ? "filled"
+                                : ""
                                 }`}
                             ></div>
                           )}

app/src/styles/pages/dashboard.scss

@@ -85,6 +85,12 @@
           font-weight: var(--font-weight-medium);
           background: var(--background-color-button);
 
+          svg {
+            path {
+              stroke: var(--background-color-selected);
+            }
+          }
+
           &:hover {
             background: var(--background-color-button);
           }
@@ -206,6 +212,10 @@
     transition: transform 0.25s linear;
 
     .project-details {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+
       .project-name {
         margin-bottom: 7px;
       }
@@ -226,7 +236,8 @@
         line-height: 26px;
         text-align: center;
         background: var(--accent-color);
-        color: var(--primary-color);
+        // color: var(--primary-color);
+          color: var(--text-color);
         border-radius: #{$border-radius-circle};
       }
 
@@ -247,6 +258,7 @@
     border-radius: 8px;
     z-index: 100;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(20px);
     display: flex;
     flex-direction: column;
     transform: translate(100%, 100%);
@@ -265,16 +277,18 @@
       text-transform: capitalize;
 
       &:hover {
-        background-color: var(--background-color-secondary);
+        background-color: var(--background-color-selected);
       }
     }
   }
 
   &:hover {
     overflow: visible;
+
     .kebab-options-wrapper {
       display: flex;
     }
+
     .project-details-container {
       transform: translateY(0);
     }
@@ -334,4 +348,4 @@
     font-family: #{$font-roboto};
     cursor: pointer;
   }
-}
+}