Merge branch 'main' into dependabot/hex/server/ash_graphql-0.28.0

orcasound · Apr 19, 2024 · bae5e45 · bae5e45
2 parents 07e91ab + 3659416
commit bae5e45
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 67 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -26,8 +26,7 @@ updates:
   - package-ecosystem: npm
     directory: /ui
     schedule:
-      interval: weekly
-      day: monday
+      interval: daily
       time: "05:00"
       timezone: America/Los_Angeles
     open-pull-requests-limit: 3
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -23,7 +23,7 @@
     "@fontsource/montserrat": "^5.0.17",
     "@fontsource/mukta": "^5.0.19",
     "@mui/icons-material": "^5.15.14",
-    "@mui/material": "^5.15.14",
+    "@mui/material": "^5.15.15",
     "@mui/material-nextjs": "^5.15.11",
     "@tanstack/react-query": "^5.28.8",
     "clsx": "^2.1.0",
@@ -32,7 +32,7 @@
     "leaflet": "^1.9.4",
     "leaflet-defaulticon-compatibility": "^0.1.2",
     "next": "14.1.4",
-    "phoenix": "^1.7.11",
+    "phoenix": "^1.7.12",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-fast-marquee": "^1.6.4",
@@ -48,17 +48,17 @@
     "@graphql-codegen/typescript": "^4.0.6",
     "@graphql-codegen/typescript-operations": "^4.2.0",
     "@graphql-codegen/typescript-react-query": "^6.1.0",
-    "@next/bundle-analyzer": "^14.1.4",
+    "@next/bundle-analyzer": "^14.2.2",
     "@tanstack/react-query-devtools": "^5.28.8",
-    "@types/leaflet": "^1.9.8",
+    "@types/leaflet": "^1.9.9",
     "@types/node": "20.11.30",
     "@types/phoenix": "^1.6.4",
-    "@types/react": "18.2.73",
-    "@types/react-dom": "18.2.23",
+    "@types/react": "18.2.78",
+    "@types/react-dom": "18.2.25",
     "@types/video.js": "^7.3.57",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "eslint": "8.57.0",
-    "eslint-config-next": "14.1.4",
+    "eslint-config-next": "14.2.2",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-simple-import-sort": "12.0.0",
     "eslint-plugin-unused-imports": "^3.1.0",

diff --git a/ui/src/components/Player/DetectionCategoryButton.tsx b/ui/src/components/Player/DetectionCategoryButton.tsx
@@ -17,7 +17,12 @@ export default function DetectionCategoryButton({
         alignItems: "center",
       }}
     >
-      <Image src={icon.src} alt={`${title} icon`} width={100} height={100} />
+      <Box sx={{ display: { xs: "block", sm: "none" } }}>
+        <Image src={icon.src} alt={`${title} icon`} width={20} height={20} />
+      </Box>
+      <Box sx={{ display: { xs: "none", sm: "block" } }}>
+        <Image src={icon.src} alt={`${title} icon`} width={100} height={100} />
+      </Box>
       {title}
     </Box>
   );

diff --git a/ui/src/components/Player/DetectionDialog.tsx b/ui/src/components/Player/DetectionDialog.tsx
@@ -12,9 +12,7 @@ import {
   ToggleButton,
   ToggleButtonGroup,
   Typography,
-  useMediaQuery,
 } from "@mui/material";
-import { useTheme } from "@mui/material/styles";
 import type { StaticImageData } from "next/legacy/image";
 import { useState } from "react";
 
@@ -48,8 +46,6 @@ export default function DetectionDialog({
   const [description, setDescription] = useState("");
   const [playerOffset, setPlayerOffset] = useState<number>();
   const [playlistTimestamp, setPlaylistTimestamp] = useState<number>();
-  const theme = useTheme();
-  const isDesktop = useMediaQuery(theme.breakpoints.up("sm"));
 
   const submitDetection = useSubmitDetectionMutation({
     onSuccess: () => {
@@ -175,9 +171,9 @@ export default function DetectionDialog({
               size="large"
               aria-label="Report sound"
               fullWidth
-              orientation={isDesktop ? "horizontal" : "vertical"}
+              orientation="horizontal"
               sx={{
-                marginY: isDesktop ? 4 : 1,
+                marginY: [1, 4],
               }}
             >
               {categoryButtons.map(({ id, iconImage }) => (
@@ -188,8 +184,8 @@ export default function DetectionDialog({
                   component={Paper}
                   sx={{
                     "&&&": {
-                      marginX: isDesktop ? 5 : 0,
-                      marginY: isDesktop ? 0 : 1,
+                      marginX: [1, 2],
+                      marginY: [1, 0],
                       borderRadius: 1,
                       overflow: "visible",
                       border: "solid 2px",
@@ -209,7 +205,6 @@ export default function DetectionDialog({
               ))}
             </ToggleButtonGroup>
             <TextField
-              autoFocus
               margin="dense"
               placeholder="Describe what you heard (optional)"
               type="text"