centered svg

Signed-off-by: Duncan Ragsdale <[email protected]>
slacgismo · Aug 19, 2024 · a99620d · a99620d
1 parent adbd522
commit a99620d
Showing 1 changed file with 22 additions and 6 deletions.
diff --git a/src/app/modules/svg/customGraphics.tsx b/src/app/modules/svg/customGraphics.tsx
@@ -17,15 +17,29 @@ const CustomGraphics = {
       <div
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
-        className="relative inline-block"
+        className="
+        relative
+        inline-flex
+        justify-center
+        items-center
+        content-center
+        text-center
+        overflow-visible
+        group"
         style={{overflow: 'visible'}}
         key={key}
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 100 100"
+          viewBox="-50 -50 100 100"
           overflow="visible"
-          className="transition duration-300 ease-in-out m-2 h-4">
+          className="
+          block
+          transition
+          duration-300
+          ease-in-out
+          m-2
+          h-4">
           <circle r="50%" fill={color} />
         </svg>
         {isHovered && (
@@ -34,16 +48,18 @@ const CustomGraphics = {
           left-1/2
           transform
           -translate-x-1/2
-          mt-2
+          mt-10
           px-2
           py-1
           bg-black bg-opacity-75
           text-white
           text-sm
           rounded
           shadow-lg
-          text-center"
-            style={{bottom: '-50%'}}
+          text-center
+          group-hover:opacity-100
+          overflow-visible
+          z-50"
           >
             {name}
           </div>