Add "isMobileWidth" util function

src/components/navbar/DefaultNavBar.tsx

@@ -12,8 +12,6 @@ import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/material/styles';
 import CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark';
 import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
 import NewReleasesIcon from '@mui/icons-material/NewReleases';
@@ -33,6 +31,7 @@ import { DesktopSideBar } from '@/components/navbar/navigation/DesktopSideBar';
 import { MobileBottomBar } from '@/components/navbar/navigation/MobileBottomBar';
 import { useBackButton } from '@/util/useBackButton.ts';
 import { getOptionForDirection } from '@/theme.ts';
+import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
 
 const navbarItems: Array<NavbarItem> = [
     {
@@ -75,11 +74,10 @@ const navbarItems: Array<NavbarItem> = [
 export function DefaultNavBar() {
     const { title, action, override } = useContext(NavBarContext);
 
-    const theme = useTheme();
     const { pathname } = useLocation();
     const handleBack = useBackButton();
 
-    const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
+    const isMobileWidth = MediaQuery.useIsMobileWidth();
     const isMainRoute = navbarItems.some(({ path }) => path === pathname);
 
     // Allow default navbar to be overrided
@@ -102,7 +100,7 @@ export function DefaultNavBar() {
                         <IconButton
                             component="button"
                             edge="start"
-                            sx={{ marginRight: theme.spacing(2) }}
+                            sx={{ marginRight: 2 }}
                             color="inherit"
                             aria-label="menu"
                             disableRipple

src/components/tracker/TrackerMangaCard.tsx

@@ -21,13 +21,12 @@ import Typography from '@mui/material/Typography';
 import { useLayoutEffect, useRef, useState } from 'react';
 import parseHtml from 'html-react-parser';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import { useTheme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import sanitizeHtml from 'sanitize-html';
 import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
 import { TrackerManga } from '@/lib/data/Trackers.ts';
 import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';
 import { Metadata } from '@/components/atoms/Metadata.tsx';
+import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
 
 const TrackerMangaCardTitle = ({ title, selected }: { title: string; selected: boolean }) => (
     <Stack direction="row" gap="5px" justifyContent="space-between">
@@ -107,8 +106,7 @@ export const TrackerMangaCard = ({
     onSelect: () => void;
 }) => {
     const { t } = useTranslation();
-    const theme = useTheme();
+    const isMobileWidth = MediaQuery.useIsMobileWidth();
-    const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
 
     return (
         <Card
@@ -124,7 +122,7 @@ export const TrackerMangaCard = ({
                             padding: '10px',
                             border: '3px solid',
                             borderRadius: 'inherit',
-                            borderColor: selected ? theme.palette.primary.main : 'transparent',
+                            borderColor: selected ? 'primary.main' : 'transparent',
                         }}
                     >
                         <Stack direction="row" gap="15px" marginBottom="15px">

src/lib/ui/MediaQuery.tsx

@@ -7,9 +7,14 @@
  */
 
 import useMediaQuery from '@mui/material/useMediaQuery';
+import { getCurrentTheme } from '@/theme.ts';
 
 export class MediaQuery {
     static useIsTouchDevice(): boolean {
         return useMediaQuery('not (pointer: fine)');
     }
+
+    static useIsMobileWidth(): boolean {
+        return useMediaQuery(getCurrentTheme().breakpoints.down('sm'));
+    }
 }

src/screens/Extensions.tsx

@@ -15,9 +15,7 @@ import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTranslation } from 'react-i18next';
-import { useTheme } from '@mui/material/styles';
 import { Link } from 'react-router-dom';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { extensionDefaultLangs, DefaultLanguage, langSortCmp } from '@/util/language';
@@ -41,6 +39,7 @@ import { StyledGroupHeader } from '@/components/virtuoso/StyledGroupHeader.tsx';
 import { StyledGroupItemWrapper } from '@/components/virtuoso/StyledGroupItemWrapper.tsx';
 import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
+import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
 
 const LANGUAGE = 0;
 const EXTENSIONS = 1;
@@ -103,8 +102,7 @@ export function Extensions() {
     const { t } = useTranslation();
     const { setAction } = useContext(NavBarContext);
 
-    const theme = useTheme();
+    const isMobileWidth = MediaQuery.useIsMobileWidth();
-    const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
 
     const {
         data: serverSettingsData,