From 66b4cbfaaebba205d9d490e176709f609248bd43 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Thu, 8 May 2025 19:19:44 +0530
Subject: [PATCH] refactor: Replace fragment shorthand with React.Fragment for
 clarity in robotic arm and vehicle instances style: Add mask property to
 simulation.scss for improved visual effects

---
 .../roboticArm/instances/roboticArmInstances.tsx         | 9 +++++----
 .../simulation/vehicle/instances/vehicleInstances.tsx    | 8 ++++----
 app/src/styles/components/simulation/simulation.scss     | 2 ++
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx b/app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx
index f3ec98e..fc0865c 100644
--- a/app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx
+++ b/app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx
@@ -1,6 +1,7 @@
 import RoboticArmInstance from "./armInstance/roboticArmInstance";
 import { useArmBotStore } from "../../../../store/simulation/useArmBotStore";
 import RoboticArmContentUi from "../../ui3d/RoboticArmContentUi";
+import React from "react";
 
 function RoboticArmInstances() {
   const { armBots } = useArmBotStore();
@@ -8,10 +9,10 @@ function RoboticArmInstances() {
   return (
     <>
       {armBots?.map((robot: ArmBotStatus) => (
-        <>
-          <RoboticArmInstance key={robot.modelUuid} armBot={robot} />
-          <RoboticArmContentUi roboticArm={robot}/>
-        </>
+        <React.Fragment key={robot.modelUuid}>
+          <RoboticArmInstance armBot={robot} />
+          <RoboticArmContentUi roboticArm={robot} />
+        </React.Fragment>
       ))}
     </>
   );
diff --git a/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx b/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
index 0ea7227..fa5cc03 100644
--- a/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
+++ b/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
@@ -9,10 +9,10 @@ function VehicleInstances() {
   return (
     <>
       {vehicles.map((vehicle: VehicleStatus) => (
-        <>
-          <VehicleInstance agvDetail={vehicle} key={vehicle.modelUuid} />
-          <VehicleContentUi vehicle={vehicle} key={`${vehicle.modelUuid}-ui`} />
-        </>
+        <React.Fragment key={vehicle.modelUuid}>
+          <VehicleInstance agvDetail={vehicle} />
+          <VehicleContentUi vehicle={vehicle} />
+        </React.Fragment>
       ))}
     </>
   );
diff --git a/app/src/styles/components/simulation/simulation.scss b/app/src/styles/components/simulation/simulation.scss
index c28bb58..b98c23f 100644
--- a/app/src/styles/components/simulation/simulation.scss
+++ b/app/src/styles/components/simulation/simulation.scss
@@ -425,6 +425,8 @@
       animation: borderAnimation 5s linear infinite;
       -webkit-mask: linear-gradient(#fff 0 0) content-box,
         linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
       -webkit-mask-composite: xor;
       mask-composite: exclude;
       z-index: -1;