Don't show confetti on Safari

Author: daveearley

frontend/src/components/layouts/Event/Event.module.scss

@@ -520,9 +520,5 @@
     background-color: #f9fafc;
 
     @include mixins.scrollbar;
-
-    @include mixins.respond-below(md) {
-      height: calc(100vh - 114px);
-    }
   }
 }

frontend/src/components/routes/event/GettingStarted/index.tsx

@@ -14,16 +14,20 @@ import {showError, showSuccess} from "../../../../utilites/notifications.tsx";
 import {getProductsFromEvent} from "../../../../utilites/helpers.ts";
 import {useEffect, useState} from 'react';
 import ConfettiAnimation from "./ConfettiAnimaiton";
+import {Browser, useBrowser} from "../../../../hooks/useGetBrowser.ts";
 
 const GettingStarted = () => {
     const {eventId} = useParams();
     const location = useLocation();
     const navigate = useNavigate();
     const [showConfetti, setShowConfetti] = useState(false);
+    const browser = useBrowser();
 
     useEffect(() => {
         const searchParams = new URLSearchParams(location.search);
-        if (searchParams.get('new_event') === 'true') {
+        const isChromeOrFirefox = browser === Browser.Chrome || browser === Browser.Firefox;
+
+        if (searchParams.get('new_event') === 'true' && isChromeOrFirefox) {
             setShowConfetti(true);
 
             setTimeout(() => {
@@ -73,7 +77,7 @@ const GettingStarted = () => {
 
     return (
         <>
-            {showConfetti && <ConfettiAnimation duration={2000}/>}
+            {showConfetti && <ConfettiAnimation duration={1000}/>}
             <PageBody>
                 <Card className={classes.headerCard}>
                     <div className={classes.headerContent}>

frontend/src/hooks/useGetBrowser.ts

@@ -0,0 +1,42 @@
+import {useMemo} from "react";
+
+export enum Browser {
+    Chrome = "Chrome",
+    Firefox = "Firefox",
+    Edge = "Edge",
+    Brave = "Brave",
+    Opera = "Opera",
+    Chromium = "Chromium",
+    Safari = "Safari",
+    Unknown = "Unknown",
+}
+
+export const useBrowser = (): Browser => {
+    return useMemo(() => {
+        const ua = navigator.userAgent;
+
+        if (/Firefox/.test(ua)) {
+            return Browser.Firefox;
+        }
+        if (/Edg\//.test(ua)) {
+            return Browser.Edge;
+        }
+        if (/OPR\//.test(ua)) {
+            return Browser.Opera;
+        }
+        if (/Brave/.test(ua)) {
+            return Browser.Brave;
+        }
+        if (/Chrome/.test(ua)) {
+            if (navigator.userAgentData?.brands?.some(b => b.brand === "Chromium")) {
+                return Browser.Chromium;
+            }
+            return Browser.Chrome;
+        }
+        if (/Safari/.test(ua)) {
+            return Browser.Safari;
+        }
+
+        return Browser.Unknown;
+    }, []);
+};