Add colors to floor and workarea in infra panel to identify them easily

public/assets/css/default.css

@@ -171,3 +171,7 @@
   inset-block-start: 1.5rem;
   inset-inline-end: 1.5rem;
 }
+
+.text-darkgreen {
+  color: #16a085;
+}

src/components/Project/Infrastructure/Floor.jsx

@@ -20,8 +20,12 @@ const Floor = ({ floor, workAreas, forBuilding }) => {
                 <div className="row">
                   <div className="col">
                     {" "}
-                    <span className="fw-semibold">Floor:&nbsp;</span>{" "}
+                    <span className="fw-semibold text-primary">
-                    <span class="fw-normal">{floor.floorName}</span>
+                      Floor:&nbsp;
+                    </span>{" "}
+                    <span class="fw-normal text-darkgreen">
+                      {floor.floorName}
+                    </span>
                   </div>
                 </div>
               </div>

src/components/Project/Infrastructure/WorkArea.jsx

@@ -4,11 +4,10 @@ import {useProjectDetails} from "../../../hooks/useProjects";
 import { getCachedData } from "../../../slices/apiDataManager";
 
 const WorkArea = ({ workArea, floor, forBuilding }) => {
-  const [workItems,setWorkItems] =useState([])
+  const [workItems, setWorkItems] = useState([]);
 
-  useEffect( () =>
+  useEffect(() => {
-  { 
+    const project = getCachedData("projectInfo");
-    const project = getCachedData( "projectInfo" )   
     if (!project || !forBuilding?.id || !floor?.id || !workArea?.id) return;
 
     const building = project.buildings?.find((b) => b.id === forBuilding.id);
@@ -27,12 +26,20 @@ const WorkArea = ( {workArea, floor, forBuilding} ) =>{
               <div className="row">
                 <div className="col">
                   {" "}
-                  <span className="fw-semibold">Floor:&nbsp;</span>{" "}
+                  <span className="fw-semibold text-primary">
-                  <span class="fw-normal">{floor.floorName}</span>
+                    Floor:&nbsp;
+                  </span>{" "}
+                  <span class="fw-normal text-darkgreen">
+                    {floor.floorName}
+                  </span>
                 </div>
                 <div className="col">
-                  <span className="ms-10 fw-semibold">Work Area:&nbsp;</span>{" "}
+                  <span className="ms-10 fw-semibold text-primary">
-                  <span class=" fw-normal">{workArea.areaName}</span>
+                    Work Area:&nbsp;
+                  </span>{" "}
+                  <span class=" fw-normal text-darkgreen">
+                    {workArea.areaName}
+                  </span>
                 </div>
               </div>
             </div>
@@ -40,7 +47,7 @@ const WorkArea = ( {workArea, floor, forBuilding} ) =>{
         </td>
       </tr>
 
-      {(workItems && workItems.length > 0) && (
+      {workItems && workItems.length > 0 && (
         <tr className="overflow-auto">
           <td colSpan={4}>
             <table className="table mx-1">