Merge pull request #110 from OCA-UFCG/chore/popup-menu

Update popup layout design

Author: RodrigoEC

src/app/globalStyles.tsx

@@ -192,7 +192,7 @@ export const GlobalStyles = createGlobalStyle`
   }
 
   .maplibregl-popup-content {
-    width: 20rem;
+    width: 13rem;
   }
 
   .maplibregl-popup-tip {

src/components/MapPopup/MapPopup.styles.tsx

@@ -44,13 +44,12 @@ export const LineInfo = styled.div`
 export const TotalArea = styled.h3`
   font-size: 0.75rem;
   font-weight: normal;
+  max-width: 70%;
 `;
 
 export const PercentArea = styled.h3`
   font-size: 1rem;
   font-weight: bold;
-  text-align: right;
-  margin-left: auto;
 `;
 
 export const Color = styled.div<{ color: string; $percent: number }>`

src/components/MapPopup/MapPopup.tsx

@@ -46,9 +46,9 @@ const MapPopup: React.FC<MapPopupProps> = ({
       <InfoContent>
         {areas.map((areaInfo: AreaInfo, index) => (
           <LineInfo key={index}>
-            <Color color={areaInfo.color} $percent={areaInfo.percent} />
-            <TotalArea>({areaInfo.area})</TotalArea>
-            <PercentArea>{areaInfo.percent}%</PercentArea>
+            <Color color={areaInfo.color} $percent={areaInfo.percent || 45} />
+            {areaInfo.percent && <PercentArea>{areaInfo.percent}%</PercentArea>}
+            <TotalArea>{areaInfo.area}</TotalArea>
           </LineInfo>
         ))}
       </InfoContent>

src/utils/constants.ts

@@ -31,7 +31,7 @@ export const sections: ISections = {
         path: "/#about",
       },
       maps: {
-        name: "Mapas & Visualizações",
+        name: "Plataforma do OCA",
         path: "/#maps-visu",
       },
       publications: {
@@ -65,7 +65,7 @@ export const sections: ISections = {
       },
     },
   },
-  map: { name: "Mapa", path: "/map" },
+  map: { name: "Plataforma", path: "/map" },
   contact: { name: "Fale conosco", path: "/contact-us" },
 };