Refactor SystemVersionComponent styles

frontend/src/features/about/system/SystemVersionComponent.js

@@ -1,6 +1,5 @@
 import React, { useMemo, useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import { makeStyles } from "@mui/material/styles";
 import { List, ListItem, ListItemText, ListItemAvatar } from "@mui/material";
 import Avatar from "@mui/material/Avatar";
 import WebAssetIcon from "@mui/icons-material/WebAsset";
@@ -9,9 +8,9 @@ import SettingsInputSvideoIcon from "@mui/icons-material/SettingsInputSvideo";
 import { useTranslation } from "react-i18next";
 import packageData from "../../../../package.json";
 import Paper from "@mui/material/Paper";
+import { useTheme } from "@mui/material/styles";
 
-const useStyles = makeStyles(theme => {
+const getStyles = theme => ({
-  return {
   horizontally: {
     display: "flex",
     flexDirection: "row",
@@ -27,19 +26,19 @@ const useStyles = makeStyles(theme => {
   versionAvatar: {
     backgroundColor: theme.palette.secondary.main
   }
-  };
 });
 
 const SystemVersionComponent = ({ data }) => {
-  const classes = useStyles();
+  const [listClass, setListClass] = useState(styles.horizontally);
-  const [listClass, setListClass] = useState(classes.horizontally);
   const { t } = useTranslation();
+  const theme = useTheme();
+  const styles = getStyles(theme);
 
   useEffect(() => {
     const mediaQuery = window.matchMedia("(max-width: 800px)");
 
     function handleMatches(event) {
-      const cssClass = event.matches ? classes.vertical : classes.horizontally;
+      const cssClass = event.matches ? styles.vertical : styles.horizontally;
       setListClass(cssClass);
     }
 
@@ -49,7 +48,7 @@ const SystemVersionComponent = ({ data }) => {
     return () => {
       mediaQuery.removeListener(handleMatches);
     };
-  }, [classes.horizontally, classes.vertical]);
+  }, []);
 
   const lastReleaseDate = useMemo(() => {
     const format = "DD-MM-YYYY HH:mm:ss";
@@ -79,16 +78,16 @@ const SystemVersionComponent = ({ data }) => {
 
   return (
     <Paper variant="outlined">
-      <List className={listClass}>
+      <List sx={listClass}>
         <ListItem>
           <ListItemAvatar>
-            <Avatar className={classes.versionAvatar}>
+            <Avatar sx={styles.versionAvatar}>
               <DeveloperBoardIcon />
             </Avatar>
           </ListItemAvatar>
           <ListItemText
             primary={
-              <span className={classes.value}>
+              <span style={styles.value}>
                 {t("About.System.Version.Server", {
                   version: data.server.version
                 })}
@@ -101,13 +100,13 @@ const SystemVersionComponent = ({ data }) => {
         </ListItem>
         <ListItem>
           <ListItemAvatar>
-            <Avatar className={classes.versionAvatar}>
+            <Avatar sx={styles.versionAvatar}>
               <SettingsInputSvideoIcon />
             </Avatar>
           </ListItemAvatar>
           <ListItemText
             primary={
-              <span className={classes.value}>
+              <span style={styles.value}>
                 {t("About.System.Version.Api", {
                   version: data.api.version
                 })}
@@ -120,13 +119,13 @@ const SystemVersionComponent = ({ data }) => {
         </ListItem>
         <ListItem>
           <ListItemAvatar>
-            <Avatar className={classes.versionAvatar}>
+            <Avatar sx={styles.versionAvatar}>
               <WebAssetIcon />
             </Avatar>
           </ListItemAvatar>
           <ListItemText
             primary={
-              <span className={classes.value}>
+              <span style={styles.value}>
                 {t("About.System.Version.Frontend", {
                   version: process.env.APP_VERSION ?? packageData.version
                 })}