fix: Remove autofocus on dialog text input, reduce category image size (

#395) * fix: Remove autofocus on dialog text input. Make category icons horizontal to save vertical space * Update icon size based on breakpoints instead of js media queries
orcasound · Apr 18, 2024 · 97afb72 · 97afb72
1 parent 9a85e7d
commit 97afb72
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
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"