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",