Improved Sidebar styling

src/app/earthquakes/page.tsx

@@ -6,7 +6,7 @@ import Sidebar from "@components/Sidebar";
 import { createPoster } from "@utils/axiosHelpers";
 import { Earthquake } from "@prismaclient";
 import { getRelativeDate } from "@utils/formatters";
-import GeologicalEvent from "@appTypes/Event";
+import GeologicalEvent from "@appTypes/GeologicalEvent";
 import EarthquakeSearchModal from "@components/EarthquakeSearchModal";
 import EarthquakeLogModal from "@components/EarthquakeLogModal"; // If you use a separate log modal
 import { useStoreState } from "@hooks/store";
@@ -17,27 +17,22 @@ function NoAccessModal({ open, onClose }) {
 	return (
 		<div className="fixed z-50 inset-0 bg-black/40 flex items-center justify-center">
 			<div className="bg-white rounded-lg shadow-lg p-8 max-w-xs w-full text-center relative">
-        <button
+				<button onClick={onClose} className="absolute right-4 top-4 text-gray-500 hover:text-black text-lg" aria-label="Close">
-          onClick={onClose}
-          className="absolute right-4 top-4 text-gray-500 hover:text-black text-lg"
-          aria-label="Close"
-        >
 					&times;
 				</button>
 				<h2 className="font-bold text-xl mb-4">Access Denied</h2>
 				<p className="text-gray-600 mb-3">
-          Sorry, you do not have access rights to Log an Earthquake. Please Log in here, or contact an Admin if you believe this is a mistake
+					Sorry, you do not have access rights to Log an Earthquake. Please Log in here, or contact an Admin if you believe this
+					is a mistake
 				</p>
-        <button
+				<button onClick={onClose} className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 mt-2">
-          onClick={onClose}
+					OK
-          className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 mt-2"
+				</button>
-        >OK</button>
 			</div>
 		</div>
 	);
 }
 
-
 export default function Earthquakes() {
 	const [selectedEventId, setSelectedEventId] = useState("");
 	const [hoveredEventId, setHoveredEventId] = useState("");
@@ -51,10 +46,7 @@ export default function Earthquakes() {
 	const canLogEarthquake = role === "SCIENTIST" || role === "ADMIN";
 
 	// Fetch earthquakes (10 days recent)
-  const { data, error, isLoading, mutate } = useSWR(
+	const { data, error, isLoading, mutate } = useSWR("/api/earthquakes", createPoster({ rangeDaysPrev: 10 }));
-    "/api/earthquakes",
-    createPoster({ rangeDaysPrev: 10 })
-  );
 
 	// Shape for Map/Sidebar
 	const earthquakeEvents = useMemo(
@@ -71,12 +63,10 @@ export default function Earthquakes() {
 								text1: "",
 								text2: getRelativeDate(x.date),
 								date: x.date,
+								code: x.code,
 							})
 						)
-            .sort(
+						.sort((a: GeologicalEvent, b: GeologicalEvent) => new Date(b.date).getTime() - new Date(a.date).getTime())
-              (a: GeologicalEvent, b: GeologicalEvent) =>
-                new Date(b.date).getTime() - new Date(a.date).getTime()
-            )
 				: [],
 		[data]
 	);
@@ -124,16 +114,9 @@ export default function Earthquakes() {
 				onSelect={(eq) => setSelectedEventId(eq.code)}
 			/>
 			{/* ---- LOGGING MODAL ---- */}
-      <EarthquakeLogModal
+			<EarthquakeLogModal open={logModalOpen} onClose={() => setLogModalOpen(false)} onSuccess={() => mutate()} />
-        open={logModalOpen}
-        onClose={() => setLogModalOpen(false)}
-        onSuccess={() => mutate()}
-      />
 			{/* ---- NO ACCESS ---- */}
-      <NoAccessModal
+			<NoAccessModal open={noAccessModalOpen} onClose={() => setNoAccessModalOpen(false)} />
-        open={noAccessModalOpen}
-        onClose={() => setNoAccessModalOpen(false)}
-      />
 		</div>
 	);
 }

src/app/globals.css

@@ -38,7 +38,7 @@ body {
 	@apply text-xs text-neutral-600 !important;
 }
 
-.mapboxgl-popup-content p+p {
+.mapboxgl-popup-content p + p {
 	@apply text-neutral-500 !important;
 }
 
@@ -79,12 +79,12 @@ body {
 	display: flex;
 	justify-content: center;
 	align-items: flex-start;
-    transition: top 0.9s cubic-bezier(.6, 0, .2, 1);
+	transition: top 0.9s cubic-bezier(0.6, 0, 0.2, 1);
 }
 
 .lava-flood-overlay.lava-active {
 	top: 0;
-    transition: top 0.33s cubic-bezier(.6, 0, .2, 1);
+	transition: top 0.33s cubic-bezier(0.6, 0, 0.2, 1);
 }
 
 .lava-flood-overlay img,
@@ -185,7 +185,7 @@ body {
 }
 
 .shake-screen {
-    animation: supershake 1s cubic-bezier(.36, .07, .19, .97) both;
+	animation: supershake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 }
 
 /* ---- CRACK + COLLAPSE OVERLAY (X icon) ---- */
@@ -196,7 +196,7 @@ body {
 	width: 100vw;
 	height: 100vh;
 	z-index: 9999;
-    transition: transform 1.1s cubic-bezier(.65, .05, .45, 1), opacity 0.5s;
+	transition: transform 1.1s cubic-bezier(0.65, 0.05, 0.45, 1), opacity 0.5s;
 	will-change: transform, opacity;
 }
 
@@ -226,5 +226,5 @@ body {
 .crack-collapse {
 	transform: perspective(900px) rotateX(75deg) translateY(80vh) scale(0.9);
 	opacity: 0;
-    transition: transform 1.1s cubic-bezier(.65, .05, .45, 1), opacity 0.6s;
+	transition: transform 1.1s cubic-bezier(0.65, 0.05, 0.45, 1), opacity 0.6s;
 }

src/app/observatories/page.tsx

@@ -7,7 +7,7 @@ import LogObservatoryModal from "@/components/LogObservatoryModal"; // Adjust if
 import { fetcher } from "@utils/axiosHelpers";
 import { Observatory } from "@prismaclient";
 import { getRelativeDate } from "@utils/formatters";
-import GeologicalEvent from "@appTypes/Event";
+import GeologicalEvent from "@appTypes/GeologicalEvent";
 import { useStoreState } from "@hooks/store";
 
 function NoAccessModal({ open, onClose }) {
@@ -15,17 +15,14 @@ function NoAccessModal({ open, onClose }) {
 	return (
 		<div className="fixed z-50 inset-0 bg-black/40 flex items-center justify-center">
 			<div className="bg-white rounded-lg shadow-lg p-8 max-w-xs w-full text-center relative">
-                <button 
+				<button onClick={onClose} className="absolute right-4 top-4 text-gray-500 hover:text-black text-lg" aria-label="Close">
-                    onClick={onClose} 
+					&times;
-                    className="absolute right-4 top-4 text-gray-500 hover:text-black text-lg"
+				</button>
-                    aria-label="Close"
-                >&times;</button>
 				<h2 className="font-bold text-xl mb-4">No Access</h2>
 				<p className="text-gray-600 mb-3">Sorry, You do not have access rights, please log in or contact an Admin.</p>
-                <button 
+				<button onClick={onClose} className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 mt-2">
-                    onClick={onClose} 
+					OK
-                    className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 mt-2"
+				</button>
-                >OK</button>
 			</div>
 		</div>
 	);
@@ -41,10 +38,7 @@ export default function Observatories() {
 	const role: "GUEST" | "SCIENTIST" | "ADMIN" = user?.role ?? "GUEST";
 	const canLogObservatory = role === "SCIENTIST" || role === "ADMIN";
 
-  const { data, error, isLoading, mutate } = useSWR(
+	const { data, error, isLoading, mutate } = useSWR("/api/observatories", fetcher);
-    "/api/observatories",
-    fetcher
-  );
 
 	const observatoryEvents = useMemo(
 		() =>
@@ -60,10 +54,7 @@ export default function Observatories() {
 							text2: getRelativeDate(x.dateEstablished),
 							date: x.dateEstablished,
 						}))
-            .sort(
+						.sort((a: GeologicalEvent, b: GeologicalEvent) => new Date(b.date).getTime() - new Date(a.date).getTime())
-              (a: GeologicalEvent, b: GeologicalEvent) =>
-                new Date(b.date).getTime() - new Date(a.date).getTime()
-            )
 				: [],
 		[data]
 	);
@@ -102,15 +93,8 @@ export default function Observatories() {
 				onButton1Click={handleLogClick}
 				button1Disabled={!canLogObservatory}
 			/>
-      <LogObservatoryModal
+			<LogObservatoryModal open={logModalOpen} onClose={() => setLogModalOpen(false)} onSuccess={() => mutate()} />
-        open={logModalOpen}
+			<NoAccessModal open={noAccessModalOpen} onClose={() => setNoAccessModalOpen(false)} />
-        onClose={() => setLogModalOpen(false)}
-        onSuccess={() => mutate()}
-      />
-      <NoAccessModal
-        open={noAccessModalOpen}
-        onClose={() => setNoAccessModalOpen(false)}
-      />
 		</div>
 	);
 }

src/components/LoggingModal.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import React, { Dispatch, SetStateAction, useState } from "react";
 import { TbHexagon } from "react-icons/tb";
 
-import Event from "@appTypes/Event";
+import Event from "@appTypes/GeologicalEvent";
 import getMagnitudeColor from "@utils/getMagnitudeColour";
 
 function setButton1(button1Name) {

src/components/Map.tsx

@@ -5,7 +5,7 @@ import React, { Dispatch, SetStateAction, useCallback, useEffect, useRef, useSta
 import { createRoot } from "react-dom/client";
 import { GiObservatory } from "react-icons/gi";
 
-import GeologicalEvent from "@appTypes/Event";
+import GeologicalEvent from "@appTypes/GeologicalEvent";
 import getMagnitudeColor from "@utils/getMagnitudeColour";
 
 interface MapComponentProps {
@@ -128,6 +128,7 @@ function MapComponent({
 				const popup = new mapboxgl.Popup({ offset: 25, closeButton: false, anchor: "bottom" }).setHTML(`
           <div>
             <h3>${event.title}</h3>
+            ${mapType !== "observatories" ? `<p style="margin-bottom:3px;">${event.code}` : null}
             ${mapType === "observatories" ? `<p>${event.text1}</p>` : `<p>Magnitude: ${event.magnitude}</p>`}
             <p>${event.text2}</p>
           </div>

src/components/Sidebar.tsx

@@ -1,6 +1,6 @@
 import React, { Dispatch, SetStateAction, useEffect, useRef } from "react";
 import { TbHexagon } from "react-icons/tb";
-import GeologicalEvent from "@appTypes/Event";
+import GeologicalEvent from "@appTypes/GeologicalEvent";
 import getMagnitudeColor from "@utils/getMagnitudeColour";
 interface SidebarProps {
 	logTitle: string;
@@ -71,13 +71,13 @@ export default function Sidebar({
 					<p className="text-sm text-neutral-600 leading-relaxed">{logSubtitle}</p>
 					<button
 						className={`mt-4 w-full py-2 px-4 rounded-lg transition-colors duration-200 font-medium
-                            ${button1Disabled
+                            ${
+															button1Disabled
 																? "bg-gray-300 text-gray-500 cursor-not-allowed"
 																: "bg-blue-600 hover:bg-blue-700 text-white"
 														}`}
 						onClick={onButton1Click}
 						type="button"
-                        
 						tabIndex={button1Disabled ? -1 : 0}
 						aria-disabled={button1Disabled ? "true" : "false"}
 					>
@@ -100,9 +100,13 @@ export default function Sidebar({
 							<button
 								key={event.id}
 								data-event-id={event.id}
-                                className={`w-full border ${hoveredEventId === event.id ? "bg-neutral-100" : "bg-white"} ${
+								className={`w-full border ${
-                                    selectedEventId === event.id ? "border-neutral-800" : "border-neutral-200"
+									selectedEventId === event.id
-                                } rounded-lg p-4 flex items-center gap-4 hover:bg-neutral-100 transition-colors duration-150 shadow-sm text-left`}
+										? "border-neutral-500 border-2 shadow-md"
+										: hoveredEventId === event.id
+										? "bg-neutral-100 shadow-sm"
+										: "bg-white border-neutral-200 shadow-sm"
+								} rounded-lg p-4 flex items-center gap-4 hover:bg-neutral-100 transition-colors duration-150  text-left`}
 								onClick={() => {
 									setSelectedEventId((prevEventId) => (prevEventId !== event.id ? event.id : ""));
 								}}

src/types/GeologicalEvent.ts

@@ -3,8 +3,10 @@ interface GeologicalEvent {
 	date: Date;
 	title: string;
 	magnitude?: number;
+	code?: string;
 	longitude: number;
 	latitude: number;
+	isFunctional?: boolean;
 	text1: string;
 	text2: string;
 }