fixes

src/components/Alert.jsx

@@ -1,4 +1,3 @@
-import { ClockIcon } from "@radix-ui/react-icons";
 import { Box, Flex, Text } from "@radix-ui/themes";
 import useTime from "../hooks/useTime";
 
@@ -20,7 +19,7 @@ export default function Alert({}) {
                         }}
                     >
                         <Flex direction="column" justify="center" align="center" width="auto" gap="5">
-                            <ClockIcon width="125" height="125" />
+                            <alertContent.icon width="125" height="125" />
                             <Text className="text-center text-9xl font-bold">{alertContent.title}</Text>
                         </Flex>
 

src/components/Music.jsx

@@ -204,7 +204,7 @@ export default function Music() {
                     </Box>
                 ) : (
                     <>
-                        <Box className="absolute bottom-0 h-[120px] w-full p-10">
+                        <Box className="absolute bottom-0 h-[130px] w-full p-10">
                             <Flex direction="row" justify="end" align="center" width="auto" height="100%">
                                 <img
                                     src={logo}

src/components/config/GeneralEditor.jsx

@@ -1,15 +1,24 @@
-import { Flex, Switch, Text } from "@radix-ui/themes";
+import { Button, Flex, Switch, Text } from "@radix-ui/themes";
+import { useCallback } from "react";
+import chime3 from "../../assets/audio/chime_3.mp3";
 import useTheme from "../../hooks/useTheme";
 
 export default function GeneralEditor({}) {
     const { colorTheme, toggleColorTheme } = useTheme();
 
+    const testAudio = useCallback(() => {
+        const audio = new Audio(chime3);
+        audio.play();
+    }, []);
+
     return (
-        <Flex direction="column" justify="center" align="center" gap="2" width="100%" p="1">
+        <Flex direction="column" justify="center" align="center" gap="2" width="100%" p="1" gap="4">
             <Flex direction="row" gap="2">
                 <Switch radius="small" checked={colorTheme === "light"} onCheckedChange={toggleColorTheme} />
                 <Text size="2">Light mode</Text>
             </Flex>
+
+            <Button onClick={testAudio}>Test audio</Button>
         </Flex>
     );
 }

src/contexts/TimeContext.jsx

@@ -1,4 +1,4 @@
-import { ClockIcon, IdCardIcon, TrashIcon } from "@radix-ui/react-icons";
+import { ClockIcon, ExitIcon, IdCardIcon, TrashIcon } from "@radix-ui/react-icons";
 import { useLocalStorage } from "@uidotdev/usehooks";
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
@@ -59,15 +59,6 @@ function TimeProvider({ children }) {
         },
     });
 
-    // const [alertSchedule, setAlertSchedule] = useLocalStorage("alert-schedule", {
-    //     "10:05": {
-    //         type: "open-reminder",
-    //     },
-    //     "23:39": {
-    //         type: "open",
-    //     },
-    // });
-
     const openState = useMemo(() => {
         const time = dayjs();
         const day = time.format("dddd").toLowerCase();
@@ -120,12 +111,12 @@ function TimeProvider({ children }) {
         () => ({
             hourly: (time) => {
                 return {
-                    title: `The time is ${time.format("h:mm A")}`,
+                    title: `The time is ${time.format("hA")}`,
                     icon: ClockIcon,
                     bullets: [
                         {
                             icon: TrashIcon,
-                            text: "Remember to keep your work area clean",
+                            text: "Help keep the space clean!",
                         },
                         // {
                         //     icon: PersonIcon,
@@ -153,15 +144,15 @@ function TimeProvider({ children }) {
             closed: (timeRaw) => {
                 return {
                     title: `The HIVE is now closed`,
-                    icon: ClockIcon,
+                    icon: ExitIcon,
                     bullets: [
                         {
                             icon: TrashIcon,
                             text: "Clean your work area",
                         },
                         {
                             icon: IdCardIcon,
-                            text: "Remember to sign out of SUMS when leaving",
+                            text: "Sign out of SUMS when leaving",
                         },
                     ],
                 };
@@ -213,21 +204,24 @@ function TimeProvider({ children }) {
             };
         }
 
-        // special alerts
-        if (currentAlert && !alertBlock.current) {
-            recentAlertType.current = currentAlert.type;
-            console.log("alerting");
-            // make announcement
-            alertBlock.current = true;
-            setAlertActive(true);
+        // play alert
+        if (currentAlert && currentAlert.type !== recentAlertType.current) {
             setAlertContent(alertTemplates[currentAlert.type](timeRaw));
 
-            // play chime sound and wait for it to finish before continuing
-            const audio = new Audio(chime3Sound);
-            audio.play();
-            audio.onended = () => {
-                // play alert audio
-            };
+            if (!alertBlock.current || recentAlertType.current !== currentAlert.type) {
+                recentAlertType.current = currentAlert.type;
+                console.log("alerting");
+                // make announcement
+                alertBlock.current = true;
+                setAlertActive(true);
+
+                // play chime sound and wait for it to finish before continuing
+                const audio = new Audio(chime3Sound);
+                audio.play();
+                audio.onended = () => {
+                    // play alert audio
+                };
+            }
         } else if (alertBlock.current && (!currentAlert || currentAlert.type !== recentAlertType.current)) {
             console.log("alert done");
             setAlertContent(null);