Refactor user profile components and update styles

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

@@ -48,7 +48,7 @@ const SystemVersionComponent = ({ data }) => {
     return () => {
       mediaQuery.removeListener(handleMatches);
     };
-  }, []);
+  }, [styles.horizontally, styles.vertical]);
 
   const lastReleaseDate = useMemo(() => {
     const format = "DD-MM-YYYY HH:mm:ss";

frontend/src/features/user/profile/card/UserProfileCardContent.js

@@ -2,14 +2,13 @@ import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import UserProfilePicture from "./UserProfilePicture";
 import ContactOptions from "../contact/ContactOptions";
-import { makeStyles } from "@mui/material/styles";
-import styles from "../styles";
-
-const useStyles = makeStyles(styles);
+import { useTheme } from "@mui/material/styles";
+import { getStyles } from "../styles";
 
 const UserProfileCardContent = ({ userData }) => {
   const { profilePictureUrl } = userData;
-  const classes = useStyles();
+  const theme = useTheme();
+  const styles = getStyles(theme);
 
   const userName = useMemo(() => `${userData.firstName} ${userData.lastName}`, [userData.firstName, userData.lastName]);
   const _contactOptions = useMemo(
@@ -28,7 +27,7 @@ const UserProfileCardContent = ({ userData }) => {
   );
 
   return (
-    <div className={classes.panel}>
+    <div style={styles.panel}>
       <UserProfilePicture pictureUrl={userData.profilePictureUrl} />
       <ContactOptions contactOptions={_contactOptions} userName={userName} />
     </div>

frontend/src/features/user/profile/card/UserProfileComponent.js

@@ -5,14 +5,13 @@ import { Card, CardHeader, CardContent } from "@mui/material";
 import PageTitle from "../../../../components/common/PageTitle";
 import UserProfileCardContent from "./UserProfileCardContent";
 import SecurityComponent from "../security/SecurityComponent";
-import styles from "../styles";
-import { makeStyles } from "@mui/material/styles";
-
-const useStyles = makeStyles(styles);
+import { getStyles } from "../styles";
+import { useTheme } from "@mui/material/styles";
 
 const UserProfileComponent = ({ userData }) => {
   const { t } = useTranslation();
-  const classes = useStyles();
+  const theme = useTheme();
+  const styles = getStyles(theme);
 
   const userLoginDate = useMemo(
     () =>
@@ -37,7 +36,7 @@ const UserProfileComponent = ({ userData }) => {
         </CardContent>
       </Card>
 
-      <div className={classes.section}>
+      <div style={styles.section}>
         <SecurityComponent userGroups={userData.userGroups} userRoles={userData.userRoles} />
       </div>
     </>

frontend/src/features/user/profile/card/UserProfilePicture.js

@@ -1,16 +1,15 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { makeStyles } from "@mui/material/styles";
-import style from "../styles";
+import { useTheme } from "@mui/material/styles";
+import { getStyles } from "../styles";
 import Avatar from "@mui/material/Avatar";
 import DefaultUserProfilePicture from "../../../../assets/images/DefaultUserProfilePicture.png";
 
-const useStyles = makeStyles(style);
-
 const UserProfilePicture = ({ pictureUrl }) => {
-  const classes = useStyles();
+  const theme = useTheme();
+  const styles = getStyles(theme);
   const url = pictureUrl ?? DefaultUserProfilePicture;
-  return <Avatar src={url} alt="..." className={classes.profilePicture} />;
+  return <Avatar src={url} alt="..." sx={styles.profilePicture} />;
 };
 
 UserProfilePicture.propTypes = {

frontend/src/features/user/profile/security/SecurityComponent.js

@@ -1,38 +1,37 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Paper, Grid, Chip, Typography } from "@mui/material";
-import styles from "../styles";
-import { makeStyles } from "@mui/material/styles";
+import { getStyles } from "../styles";
+import { useTheme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 
-const useStyles = makeStyles(styles);
-
 const SecurityComponent = ({ userGroups, userRoles }) => {
   const { t } = useTranslation();
-  const classes = useStyles();
+  const theme = useTheme();
+  const styles = getStyles(theme);
   return (
     <Paper>
       <Grid container>
         <Grid item xs={12} md={6}>
-          <div className={classes.paper}>
+          <div style={styles.paper}>
             <Typography gutterBottom variant="body1">
               {t("User.Profile.Security.UserGroups")}
             </Typography>
             <div>
               {userGroups.map(g => (
-                <Chip key={g.code} className={classes.chip} label={g.name} />
+                <Chip key={g.code} style={styles.chip} label={g.name} />
               ))}
             </div>
           </div>
         </Grid>
         <Grid item xs={12} md={6}>
-          <div className={classes.paper}>
+          <div style={styles.paper}>
             <Typography gutterBottom variant="body1">
               {t("User.Profile.Security.UserRoles")}
             </Typography>
             <div>
               {userRoles.map(r => (
-                <Chip key={r.code} className={classes.chip} color="primary" label={r.name} />
+                <Chip key={r.code} style={styles.chip} color="primary" label={r.name} />
               ))}
             </div>
           </div>

frontend/src/features/user/profile/styles.js

@@ -1,4 +1,4 @@
-const style = theme => {
+const getStyles = theme => {
   return {
     section: {
       marginTop: theme.spacing(2)
@@ -25,4 +25,4 @@ const style = theme => {
   };
 };
 
-export default style;
+export { getStyles };