Merge pull request #827 from CodeForAfrica/bugfix/map_tooltip

Fix tooltip style
CodeForAfrica · Aug 9, 2024 · ecaef69 · ecaef69
2 parents a07f44c + df5f38e
commit ecaef69
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 7 deletions.
diff --git a/packages/hurumap-core/src/Location/Location.snap.js b/packages/hurumap-core/src/Location/Location.snap.js
@@ -20,11 +20,11 @@ exports[`Location renders unchanged 1`] = `
           >
             Country
           </h6>
-          <span
+          <div
             class="css-k6p9om"
           >
             Kenya
-          </span>
+          </div>
         </div>
       </div>
       <div
@@ -39,11 +39,11 @@ exports[`Location renders unchanged 1`] = `
           >
             County
           </h6>
-          <span
+          <div
             class="css-k6p9om"
           >
             Isiolo
-          </span>
+          </div>
         </div>
       </div>
     </div>

diff --git a/packages/hurumap-core/src/LocationTag/LocationTag.js b/packages/hurumap-core/src/LocationTag/LocationTag.js
@@ -61,7 +61,7 @@ const LevelTypography = styled("h6", {
   };
 });
 
-const NameTypography = styled("span")(({ theme }) => {
+const NameTypography = styled("div")(({ theme }) => {
   return {
     fontSize: theme.typography.pxToRem(9),
     fontWeight: "bold",

diff --git a/packages/hurumap-core/src/LocationTag/LocationTag.snap.js b/packages/hurumap-core/src/LocationTag/LocationTag.snap.js
@@ -10,11 +10,11 @@ exports[`LocationTag renders unchanged 1`] = `
     >
       region
     </h6>
-    <span
+    <div
       class="css-k6p9om"
     >
       Region
-    </span>
+    </div>
   </div>
 </div>
 `;
diff --git a/packages/hurumap-next/src/Map/Layers.js b/packages/hurumap-next/src/Map/Layers.js
@@ -88,6 +88,19 @@ function Layers({
                     top: 0,
                     ...PopUpLocationTagProps?.sx,
                   }}
+                  NameTypographyProps={{
+                    style: {
+                      minWidth: 60,
+                      textAlign: "center",
+                    },
+                  }}
+                  LevelTypographyProps={{
+                    style: {
+                      top: -12,
+                      left: "50%",
+                      transform: "translateX(-50%)",
+                    },
+                  }}
                 />
               </ThemeProvider>
             </StyledEngineProvider>,