Update icon size based on breakpoints instead of js media queries

orcasound · Apr 17, 2024 · d8719ac · d8719ac
1 parent cf52398
commit d8719ac
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/ui/src/components/Player/DetectionCategoryButton.tsx b/ui/src/components/Player/DetectionCategoryButton.tsx
@@ -1,4 +1,4 @@
-import { Box, useMediaQuery, useTheme } from "@mui/material";
+import { Box } from "@mui/material";
 import type { StaticImageData } from "next/legacy/image";
 import Image from "next/legacy/image";
 
@@ -9,8 +9,6 @@ export default function DetectionCategoryButton({
   icon: StaticImageData;
   title: string;
 }) {
-  const theme = useTheme();
-  const isDesktop = useMediaQuery(theme.breakpoints.up("sm"));
   return (
     <Box
       sx={{
@@ -19,12 +17,12 @@ export default function DetectionCategoryButton({
         alignItems: "center",
       }}
     >
-      <Image
-        src={icon.src}
-        alt={`${title} icon`}
-        width={isDesktop ? 100 : 20}
-        height={isDesktop ? 100 : 20}
-      />
+      <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
@@ -184,7 +184,7 @@ export default function DetectionDialog({
                   component={Paper}
                   sx={{
                     "&&&": {
-                      marginX: [1, 5],
+                      marginX: [1, 2],
                       marginY: [1, 0],
                       borderRadius: 1,
                       overflow: "visible",