fix: linhas SPPO arrumadas e centralizando o mapa

src/assets/styles/globals.scss

@@ -110,4 +110,23 @@ background-image: url(../imgs/movingMarker.svg);
     padding: 8px;
     border-radius: 50em;
 
+}
+.centerButton {
+    background-color: #FFFFFF;
+    z-index: 1002;
+    position: absolute;
+    top: 85px;
+    left: 10px;
+    padding: 8px;
+    border-radius: 50em;
+
+    svg {
+        width: 22.5px;
+        height: 22.5px;
+    }
+
+}
+.leaflet-popup-content{
+    margin: 0 !important;
+    padding: 10px 22px;
 }

src/components/CenterButton.jsx

@@ -0,0 +1,31 @@
+import { useContext, useEffect, useState } from "react";
+import { Popup, useMap } from "react-leaflet";
+import { CodeContext } from "../hooks/getCode";
+import { MovingMarkerContext } from "../hooks/getMovingMarkers";
+import { MdMyLocation } from 'react-icons/md'
+
+
+
+export default function CenterButton({ location }) {
+    const { center } = useContext(MovingMarkerContext)
+    const { stopId } = useContext(CodeContext)
+    const map = useMap()
+    function fixCenter() {
+        console.log(location)
+        map.setView(location);
+
+    }
+    useEffect(() => {
+        fixCenter()
+    }, [center, stopId])
+
+
+    return (
+        <>
+            <button className='centerButton inputShadow' onClick={() => fixCenter()}>
+                <MdMyLocation />
+            </button>
+
+        </>
+    );
+}

src/components/Header/Header.jsx

@@ -118,6 +118,9 @@ export function Header(props) {
                 </div>
 
             </header>
+            {/* <div className='warning absolute z-[402] bg-white px-5 py-2 right-0 rounded-md border-2 border-slate-200'>
+                <p className='text-red-600'>Versão Beta para testes</p>
+            </div> */}
         </>
     )
 }