fix: Implement GA and fix up calendar

app/App.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 // Todo: Once GA sunsets the UA analytics tracking come July 2023, we can remove the "react-ga"
 // package and all references to it:
 // https://support.google.com/analytics/answer/12938611#zippy=%2Cin-this-article
-import ReactGA_4 from "react-ga4";
+import TagManager from "react-gtm-module";
 import { Helmet } from "react-helmet-async";
 import { useLocation } from "react-router-dom";
 import { UserLocation, getLocation, websiteConfig, AppProvider } from "./utils";
@@ -18,6 +18,8 @@ import { AroundRadius } from "algoliasearch";
 const { siteUrl, title } = websiteConfig;
 export const OUTER_CONTAINER_ID = "outer-container";
 
+TagManager.initialize({ gtmId: config.GOOGLE_ANALYTICS_GA4_ID });
+
 export const App = () => {
   const location = useLocation();
   const [userLocation, setUserLocation] = useState<UserLocation | null>(null);
@@ -31,23 +33,6 @@ export const App = () => {
       setUserLocation(userLocation);
       setAroundLatLng(`${userLocation.coords.lat},${userLocation.coords.lng}`);
     });
-
-    if (config.GOOGLE_ANALYTICS_GA4_ID) {
-      ReactGA_4.initialize(config.GOOGLE_ANALYTICS_GA4_ID);
-    }
-
-    setTimeout(() => {
-      // We call setTimeout here to give our views time to update the document
-      // title beforeGA sends its page view event
-      // TODO: This hack is old. Let's figure out if it is still necessary or
-      // there is a different modern approach
-      // (see: https://stackoverflow.com/questions/2497200/how-to-listen-for-changes-to-the-title-element/29540461#29540461)
-      const page = location.pathname + location.search;
-      ReactGA_4.send({
-        hitType: "pageview",
-        page,
-      });
-    }, 500);
   }, [location, setAroundLatLng]);
 
   if (!userLocation) {

app/components/ui/Calendar/EventCalendar.module.scss

@@ -401,9 +401,7 @@
   justify-content: space-between;
   padding: 1rem 0.5rem;
   margin-bottom: 1rem;
-  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
-  border-radius: 12px;
-  border: 1px solid #dee2e6;
+  border-bottom: 1px solid #dee2e6;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 
   @media (min-width: 769px) {
@@ -415,8 +413,8 @@
   background: white;
   border: 2px solid #007bff;
   border-radius: 50%;
-  width: 44px;
-  height: 44px;
+  width: 36px;
+  height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -786,7 +784,8 @@
   }
 
   &:focus {
-    outline: none;
+    outline: 2px solid rgba(0, 123, 255, 0.3);
+    outline-offset: 4px;
     border-radius: 50%;
   }
   &:active {
@@ -1052,3 +1051,9 @@
     color: white;
   }
 }
+
+.categoryInstructions {
+  margin-top: 8px;
+  margin-bottom: 24px;
+  text-align: center;
+}