- Modify Font sizes to suit the theme

- Change gay color of grid to match the theme
- realign floor and workarea lebel for visual clearity
- remove background color with the message "No floor added to the building, please add new floor to start working'

public/assets/css/default.css

@@ -128,3 +128,14 @@
   text-align: center;
   margin-top: 1rem;
 }
+.infra-activity-table-header {
+  border-top: 0;
+  text-transform: capitalize !important;
+}
+
+.infra-activity-table-header-first {
+  border-top: 0;
+  text-transform: capitalize !important;
+  text-align: left;
+  padding-left: 60px;
+}

src/components/Project/Infrastructure/Building.jsx

@@ -1,14 +1,21 @@
 import React from "react";
-const Building = ( {building, toggleBuilding, expandedBuildings, getContent} ) =>
+const Building = ({
-{
+  building,
-
+  toggleBuilding,
+  expandedBuildings,
+  getContent,
+}) => {
   return (
     <React.Fragment key={building.id}>
       <tr className="overflow-auto">
         <td
           colSpan="4"
           className="text-start"
-            style={{ background: "#f0f0f0", cursor: "pointer" }}
+          style={{
+            background: "#fafafa",
+            cursor: "pointer",
+            textAlign: "center!important",
+          }}
           onClick={() => toggleBuilding(building.id)}
         >
           <div className="row table-responsive">
@@ -28,4 +35,4 @@ const Building = ( {building, toggleBuilding, expandedBuildings, getContent} ) =
     </React.Fragment>
   );
 };
-  export default Building
+export default Building;

src/components/Project/Infrastructure/Floor.jsx

@@ -1,20 +1,23 @@
 import React from "react";
 import WorkArea from "./WorkArea";
-const Floor = ( {floor, workAreas,forBuilding} ) =>
+const Floor = ({ floor, workAreas, forBuilding }) => {
-{
-
   return (
     <React.Fragment key={floor.id}>
       {workAreas && workAreas.length > 0 ? (
         workAreas.map((workArea) => (
-            <WorkArea forBuilding={forBuilding} key={workArea.id} workArea={workArea} floor={floor} />
+          <WorkArea
+            forBuilding={forBuilding}
+            key={workArea.id}
+            workArea={workArea}
+            floor={floor}
+          />
         ))
       ) : (
         <tr>
           <td colSpan="4" className="text-start">
             <div className="row ps-2">
               <div className="col-6">
-                  <h6>
+                <h6 className="infra-floor-lable">
                   <span>{floor.floorName} &nbsp;</span>
                 </h6>
               </div>
@@ -22,8 +25,7 @@ const Floor = ( {floor, workAreas,forBuilding} ) =>
           </td>
         </tr>
       )}
-        
     </React.Fragment>
   );
 };
-  export default Floor
+export default Floor;

src/components/Project/Infrastructure/InfraTable.jsx

@@ -73,7 +73,6 @@ const InfraTable = ({ buildings }) => {
     }
   };
 
-
   const handleClearComplete = () => {
     setClearTrigger(false);
   };
@@ -91,8 +90,11 @@ const InfraTable = ({ buildings }) => {
     ) : (
       <tr>
         <td colSpan="4">
-          <div className="alert alert-warning text-center mb-0" role="alert">
+          <div className=" mb-0" role="alert">
-            <p>No floors have been added yet. Please add floors to start managing your building.</p>
+            <p className="fw-semibold">
+              No floors have been added yet. Start by adding floors to manage
+              this building.
+            </p>
             <button
               type="button"
               className="btn btn-xs btn-primary"
@@ -138,7 +140,7 @@ const InfraTable = ({ buildings }) => {
         >
           <FloorModel
             project={{
-              buildings: [selectedBuilding]
+              buildings: [selectedBuilding],
             }}
             onClose={() => setShowFloorModal(false)}
             onSubmit={handleFloorSubmit}
@@ -146,7 +148,6 @@ const InfraTable = ({ buildings }) => {
           />
         </div>
       )}
-
     </div>
   );
 };

src/components/Project/Infrastructure/WorkArea.jsx

@@ -1,22 +1,25 @@
 import React, { useEffect } from "react";
 import WorkItem from "./WorkItem";
 
-const WorkArea = ( {workArea, floor, forBuilding} ) =>
+const WorkArea = ({ workArea, floor, forBuilding }) => {
-{
+  useEffect(() => {}, [workArea]);
-  useEffect(() => {
-
-  }, [workArea]); 
   return (
     <React.Fragment key={workArea.id}>
       <tr>
         <td colSpan="4" className="text-start table-cell">
           <div className="row ps-2">
             <div className="col-6">
-              <h6>
+              <div className="row">
-                <span>
+                <div className="col">
-                  {floor.floorName} - {workArea.areaName} &nbsp;
+                  {" "}
-                </span>
+                  <span className="fw-semibold">Floor:&nbsp;</span>{" "}
-              </h6>
+                  <span class="fw-normal">{floor.floorName}</span>
+                </div>
+                <div className="col">
+                  <span className="ms-10 fw-semibold">Work Area:&nbsp;</span>{" "}
+                  <span class=" fw-normal">{workArea.areaName}</span>
+                </div>
+              </div>
             </div>
           </div>
         </td>
@@ -28,21 +31,35 @@ const WorkArea = ( {workArea, floor, forBuilding} ) =>
             <table className="table mx-1">
               <thead>
                 <tr>
-                  <th>Activity</th>
+                  <th className="infra-activity-table-header-first">
+                    Activity
+                  </th>
                   {/* for mobile view */}
-                  <th className="d-sm-none d-sm-table-cell">Status</th>
+                  <th className="infra-activity-table-header d-sm-none d-sm-table-cell">
+                    Status
+                  </th>
                   {/* for greather than mobile view ************* */}
-                  <th className="d-none d-md-table-cell">Planned</th>
+                  <th className="infra-activity-table-header d-none d-md-table-cell">
-                  <th className="d-none d-md-table-cell">Completed</th>
+                    Planned
+                  </th>
+                  <th className="infra-activity-table-header d-none d-md-table-cell">
+                    Completed
+                  </th>
                   {/* ************************** */}
-                  <th>Progress</th>
+                  <th className="infra-activity-table-header">Progress</th>
-                  <th>Actions</th>
+                  <th className="infra-activity-table-header">Actions</th>
                 </tr>
               </thead>
               <tbody className="table-border-bottom-0">
                 {workArea?.workItems && workArea.workItems.length > 0 ? (
                   workArea.workItems.map((workItem) => (
-                    <WorkItem key={workItem.workItemId} workItem={workItem} forBuilding={forBuilding} forFloor={floor} forWorkArea={workArea} />
+                    <WorkItem
+                      key={workItem.workItemId}
+                      workItem={workItem}
+                      forBuilding={forBuilding}
+                      forFloor={floor}
+                      forWorkArea={workArea}
+                    />
                   ))
                 ) : (
                   <tr>

src/components/Project/Infrastructure/WorkItem.jsx

@@ -20,8 +20,6 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
     setItemName("");
   };
 
-
-
   useEffect(() => {
     setNewWorkItem(workItem);
   }, [workItem]); // This hook will run whenever the workItem prop changes
@@ -33,8 +31,6 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
     workItem,
   };
 
-  
-
   const hasWorkItem = NewWorkItem && NewWorkItem;
 
   return (
@@ -51,7 +47,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
       <tr>
         <td className="text-start table-cell-small">
           <i className="bx bx-right-arrow-alt"></i>
-          <span className="fw-medium">
+          <span className="fw-light">
             {hasWorkItem
               ? NewWorkItem?.workItem?.activityMaster?.activityName ||
                 workItem.activityMaster?.activityName
@@ -120,7 +116,9 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
                 data-bs-target="#project-modal"
                 onClick={openModal}
               >
-                <span className="badge  badge-md bg-label-primary me-1">Assign</span>
+                <span className="badge  badge-md bg-label-primary me-1">
+                  Assign
+                </span>
               </button>
             )}
             <button