Adding changes to auto-deploy

package.json

@@ -19,6 +19,7 @@
     "date-fns": "^3.6.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-joyride": "^2.9.2",
     "react-share": "^5.1.0",
     "styled-components": "^6.1.12"
   },

src/App.jsx

@@ -5,10 +5,13 @@ import EICLogo from './components/Logo';
 import {
     MapViewContext,
     ChartDataContext,
-    DataSelectionContext
+    DataSelectionContext,
+    ErrorContext
 } from './contexts/AppContext';
 import { VideoProvider } from './contexts/VideoContext';
 import config from './config.json';
+import RotateOverlay from './components/RotateOverlay';
+import Tour from './components/Tour';
 
 export default function App() {
     const defaultDataset = config.datasets[0];
@@ -19,22 +22,38 @@ export default function App() {
     ]);
     const [mapView, setMapView] = useState(null);
     const [chartData, setChartData] = useState([]);
+    const [hasWebGLError, setHasWebGLError] = useState(false);
 
     return (
-        <MapViewContext.Provider value={{ mapView, setMapView }}>
-            <DataSelectionContext.Provider
-                value={{ dataSelection, setDataSelection }}
-            >
-                <VideoProvider>
-                    <ChartDataContext.Provider
-                        value={{ chartData, setChartData }}
-                    >
-                        <EICLogo />
-                        <Panel />
-                        <Map />
-                    </ChartDataContext.Provider>
-                </VideoProvider>
-            </DataSelectionContext.Provider>
-        </MapViewContext.Provider>
+        <ErrorContext.Provider value={{ hasWebGLError, setHasWebGLError }}>
+            <MapViewContext.Provider value={{ mapView, setMapView }}>
+                <DataSelectionContext.Provider
+                    value={{ dataSelection, setDataSelection }}
+                >
+                    <VideoProvider>
+                        <ChartDataContext.Provider
+                            value={{ chartData, setChartData }}
+                        >
+                            {hasWebGLError ? (
+                                <div>
+                                    Your WebGL implementation doesn't seem to
+                                    support hardware accelerated rendering.
+                                    Check your browser settings or if your GPU
+                                    is in a blocklist.
+                                </div>
+                            ) : (
+                                <>
+                                    <Tour />
+                                    <RotateOverlay />
+                                    <EICLogo />
+                                    <Panel />
+                                    <Map />
+                                </>
+                            )}
+                        </ChartDataContext.Provider>
+                    </VideoProvider>
+                </DataSelectionContext.Provider>
+            </MapViewContext.Provider>
+        </ErrorContext.Provider>
     );
 }

src/components/DataLayerModal.tsx

@@ -27,7 +27,7 @@ export default function DataLayerModal({
 
     return (
         <div
-            className="fixed inset-0 z-[99] w-full h-full bg-black bg-opacity-30 backdrop-blur-lg flex justify-center items-center"
+            className="fixed inset-0 z-[999] w-full h-full bg-black bg-opacity-30 backdrop-blur-lg flex justify-center items-center"
             onClick={handleClickOutside}
         >
             <div id="modal-background" className="relative w-full h-full bg-transparent flex flex-col justify-center items-center p-6 max-w-none">
@@ -53,7 +53,7 @@ export default function DataLayerModal({
                     <div className="flex justify-start mt-8">
                         <button
                             className={`px-4 py-2 border rounded-l-lg text-[14px] font-semibold transition-colors ${
-                                isFahrenheit ? 'bg-blue-600 text-white' : 'bg-gray-800 text-gray-400'
+                                isFahrenheit ? 'bg-[#14367D] text-white' : 'bg-gray-800 text-gray-400'
                             }`}
                             style={{
                                 borderRadius: '4px 0 0 4px',
@@ -66,7 +66,7 @@ export default function DataLayerModal({
                         </button>
                         <button
                             className={`px-4 py-2 border rounded-r-lg text-[14px] font-semibold transition-colors ${
-                                !isFahrenheit ? 'bg-blue-600 text-white' : 'bg-gray-800 text-gray-400'
+                                !isFahrenheit ? 'bg-[#14367D] text-white' : 'bg-gray-800 text-gray-400'
                             }`}
                             style={{
                                 borderRadius: '0 4px 4px 0',