From 9f5cc43f3b35d6aba772b6de21eb65dc55cc7983 Mon Sep 17 00:00:00 2001
From: Emily Neighbour <emily.neighbour@dyson.com>
Date: Mon, 7 Apr 2025 13:13:19 +0100
Subject: [PATCH] observatories icons fixed

---
 src/app/observatories/page.tsx |  3 --
 src/components/Sidebar.tsx     |  4 ++-
 src/components/map.tsx         | 65 +++++++++++++++++-----------------
 src/types/Event.ts             |  3 +-
 4 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/src/app/observatories/page.tsx b/src/app/observatories/page.tsx
index cc93d56..950ee4c 100644
--- a/src/app/observatories/page.tsx
+++ b/src/app/observatories/page.tsx
@@ -15,7 +15,6 @@ export default function Observatories() {
         title: "Earthquake - Berlin Observatory",
         text1: "Logged by ",
         text2: "30 minutes ago",
-        magnitude: 8.5,
         longitude: 10.4515, // Near Berlin, Germany
         latitude: 52.52,
       },
@@ -24,7 +23,6 @@ export default function Observatories() {
         title: "New Observatory - Phuket, Thailand",
         text1: "Dr. Neil Armstrong",
         text2: "2 weeks ago",
-        magnitude: 0.0,
         longitude: -122.4194,
         latitude: 37.7749,
       },
@@ -33,7 +31,6 @@ export default function Observatories() {
         title: "Observatory Scientist Change",
         text1: "Dr. Samantha Green new lead scientist",
         text2: "1 month ago",
-        magnitude: 0.0,
         longitude: 139.6917,
         latitude: 35.6762,
       },
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index e35d4f2..75b0438 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -88,7 +88,9 @@ export default function Sidebar({
                 {/* <p className="text-xs text-neutral-600">{event.text1}</p> */}
                 <p className="text-xs text-neutral-500 mt-1">{event.text2}</p>
               </div>
-              <MagnitudeNumber magnitude={event.magnitude} />
+              {
+              (event.magnitude) ? <MagnitudeNumber magnitude={event.magnitude} /> : <></>
+              }
             </button>
           ))}
         </div>
diff --git a/src/components/map.tsx b/src/components/map.tsx
index 523a006..9d2f7e8 100644
--- a/src/components/map.tsx
+++ b/src/components/map.tsx
@@ -78,56 +78,57 @@ function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEven
 
       // Add markers with location pulse
       events.forEach((event) => {
-        const color = getMagnitudeColor(event.magnitude);
 
-        //<GiObservatory />
-
-        // Create marker container
         const quakeElement = document.createElement("div");
-        quakeElement.style.width = "50px"; // Increased size to accommodate pulse
-        quakeElement.style.height = "50px";
-        quakeElement.style.position = "absolute";
-        quakeElement.style.display = "flex";
-        quakeElement.style.alignItems = "center";
-        quakeElement.style.justifyContent = "center";
-
-        // Central dot
         const dotElement = document.createElement("div");
-        dotElement.style.width = "10px";
-        dotElement.style.height = "10px";
-        dotElement.style.backgroundColor = color;
-        dotElement.style.borderRadius = "50%";
-        dotElement.style.position = "absolute";
-        dotElement.style.zIndex = "2"; // Ensure dot is above pulse
-
-        // Pulsing ring
         const pulseElement = document.createElement("div");
-        pulseElement.className = "location-pulse";
-        pulseElement.style.width = "20px"; // Initial size
-        pulseElement.style.height = "20px";
-        pulseElement.style.backgroundColor = `${color}80`; // Color with 50% opacity (hex alpha)
-        pulseElement.style.borderRadius = "50%";
-        pulseElement.style.position = "absolute";
-        pulseElement.style.zIndex = "1";
+
+        if (event.magnitude) {
+          const color = getMagnitudeColor(event.magnitude);
+
+          // Create marker container
+          quakeElement.style.width = "50px"; // Increased size to accommodate pulse
+          quakeElement.style.height = "50px";
+          quakeElement.style.position = "absolute";
+          quakeElement.style.display = "flex";
+          quakeElement.style.alignItems = "center";
+          quakeElement.style.justifyContent = "center";
+
+          // Central dot
+          dotElement.style.width = "10px";
+          dotElement.style.height = "10px";
+          dotElement.style.backgroundColor = color;
+          dotElement.style.borderRadius = "50%";
+          dotElement.style.position = "absolute";
+          dotElement.style.zIndex = "2"; // Ensure dot is above pulse
+
+          // Pulsing ring
+          pulseElement.className = "location-pulse";
+          pulseElement.style.width = "20px"; // Initial size
+          pulseElement.style.height = "20px";
+          pulseElement.style.backgroundColor = `${color}80`; // Color with 50% opacity (hex alpha)
+          pulseElement.style.borderRadius = "50%";
+          pulseElement.style.position = "absolute";
+          pulseElement.style.zIndex = "1";
+        }
 
         // Observatory marker
+        //<GiObservatory />
         const observatoryElement = document.createElement("div");
-        observatoryElement.style.fontSize = "24px"; // Adjust icon size
-        observatoryElement.style.color = "#FF5722"; // Set color
         const root = createRoot(observatoryElement); // `createRoot` is now the standard API
         root.render(
-          <GiObservatory style={{ fontSize: "24px", color: "#FF5722" }} />
+          <GiObservatory className="text-blue-600 text-2xl drop-shadow-lg" />
         );
 
         quakeElement.appendChild(pulseElement);
         quakeElement.appendChild(dotElement);
 
-        const marker = new mapboxgl.Marker({ element: mapType === "observatories"? observatoryElement : quakeElement }).setLngLat([event.longitude, event.latitude]).addTo(map.current!);
+        const marker = new mapboxgl.Marker({ element: mapType === "observatories" ? observatoryElement : quakeElement }).setLngLat([event.longitude, event.latitude]).addTo(map.current!);
 
         const popup = new mapboxgl.Popup({ offset: 25, closeButton: false, anchor: "bottom" }).setHTML(`
           <div>
             <h3>${event.title}</h3>
-            <p>Magnitude: ${event.magnitude}</p>
+            ${ mapType === "observatories" ? `<p>${event.text1}</p>` : `<p>Magnitude: ${event.magnitude}</p>`}
             <p>${event.text2}</p>
           </div>
         `);
diff --git a/src/types/Event.ts b/src/types/Event.ts
index 02a501f..677b163 100644
--- a/src/types/Event.ts
+++ b/src/types/Event.ts
@@ -1,9 +1,10 @@
 interface Event {
   id: string;
   title: string;
-  magnitude: number;
+  magnitude?: number;
   longitude: number;
   latitude: number;
+  text1: string;
   text2: string;
 }