update css

front/src/assets/map/MarkerAgent.jsx

@@ -75,34 +75,19 @@ function MarkerAgent(props){
       </AdvancedMarker>
 
       {isPopupOpen && (
-        <div
-        style={{
-          position: "absolute",
-          top: props.position.lat + 10,
-          right: props.position.lng + 10,
-          backgroundColor: "yellow",
-          padding: "15px",
-          border: "1px solid #ccc",
-          zIndex: 9999,
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "flex-end",
-        }}
-        > 
+        <div className="bg-dark-opacity text-white rounded p-4 col-3 position-absolute"
+        style={{ 
+          top: '100PX', 
+          right: '100PX',
+          zIndex: 9999 
+      }}
+      > 
         <button
             onClick={() => {
               closePopup();
             }}
-            style={{
-              position: "absolute",
-              top: "5px",
-              right: "5px",
-              backgroundColor: "transparent",
-              border: "none",
-              cursor: "pointer",
-            }}
+            className="btn-close btn-close-white position-absolute top-0 end-0"
           >
-            X
           </button>
           <ul>
             <li>Energy: {props.state?.energy*100}%</li>

front/src/assets/map/MarkerBuilding.jsx

@@ -2,7 +2,16 @@ import { AdvancedMarker } from "@vis.gl/react-google-maps";
 
 function MarkerBuilding(props){
 
-    return  (<AdvancedMarker position={props.position} onClick={() => setOpen(true)}>
+  let label = "";
+  if (props.color === "blue") {
+      label = "House";
+  } else if (props.color === "green") {
+      label = "Office";
+  } else if (props.color === "red") {
+      label = "Restaurant";
+  }
+
+  return  (<AdvancedMarker position={props.position} onClick={() => setOpen(true)}>
     <div 
     style={{ 
       //position: "fixed",
@@ -29,6 +38,20 @@ function MarkerBuilding(props){
         stroke={props.color}
         strokeWidth="10"
       />
+      <text 
+        x="50%" 
+        y="50%" 
+        alignmentBaseline="middle" 
+        textAnchor="middle" 
+        fill={props.color}
+        fontSize="10"
+        fontWeight="bold"
+        style={{
+            pointerEvents: "none",
+        }}
+    >
+        {label}
+    </text>
     </svg>
   </div>
 

front/src/assets/panel/CreationPanel.jsx

@@ -104,7 +104,7 @@ const CreationPanel = (props) => {
 
             <div className='mb-2'>
                 <button className='btn btn-danger w-50' onClick={ () => switchCursor(BuildingType.FOOD)}
-                >New cantine</button>
+                >New Restaurant</button>
             </div>
 
             <div className='mb-5'>