From 968fd2e78582a3be337d4cab90fc048d0c4f45e3 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Mon, 25 Mar 2024 02:49:18 +0200
Subject: [PATCH] Refactor AboutSystemComponent styles

---
 .../about/system/AboutSystemComponent.js      | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/frontend/src/features/about/system/AboutSystemComponent.js b/frontend/src/features/about/system/AboutSystemComponent.js
index c22168a..5e6ebe0 100644
--- a/frontend/src/features/about/system/AboutSystemComponent.js
+++ b/frontend/src/features/about/system/AboutSystemComponent.js
@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { makeStyles } from "@mui/material/styles";
 import Card from "@mui/material/Card";
 import CardActions from "@mui/material/CardActions";
 import CardContent from "@mui/material/CardContent";
@@ -9,16 +8,16 @@ import Typography from "@mui/material/Typography";
 import { useTranslation } from "react-i18next";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 
-const useStyles = makeStyles(theme => ({
+const styles = {
   bullet: {
     display: "inline-block",
     margin: "0 4px",
     transform: "scale(1.5)"
   },
   service: {
-    marginTop: theme.spacing(1)
+    marginTop: 1
   }
-}));
+};
 
 const buttons = [
   {
@@ -40,10 +39,9 @@ const buttons = [
 ];
 
 const AboutSystemComponent = ({ handleOpenInNewTab }) => {
-  const classes = useStyles();
   const { t } = useTranslation();
 
-  const bullet = <span className={classes.bullet}>•</span>;
+  const bullet = <span style={styles.bullet}>•</span>;
 
   return (
     <Card variant="outlined">
@@ -54,23 +52,23 @@ const AboutSystemComponent = ({ handleOpenInNewTab }) => {
         <Typography color="textSecondary">{t("About.System.Description.FirstPhrase")}</Typography>
         <Typography color="textSecondary">{t("About.System.Description.SecondPhrase")}</Typography>
 
-        <Typography className={classes.service} color="textSecondary">
+        <Typography sx={styles.service} color="textSecondary">
           {bullet}
           {t("About.System.Description.Frontend")}
         </Typography>
-        <Typography className={classes.service} color="textSecondary">
+        <Typography sx={styles.service} color="textSecondary">
           {bullet}
           {t("About.System.Description.Api")}
         </Typography>
-        <Typography className={classes.service} color="textSecondary">
+        <Typography sx={styles.service} color="textSecondary">
           {bullet}
           {t("About.System.Description.Server")}
         </Typography>
-        <Typography className={classes.service} color="textSecondary">
+        <Typography sx={styles.service} color="textSecondary">
           {bullet}
           {t("About.System.Description.Agent")}
         </Typography>
-        <Typography className={classes.service} color="textSecondary">
+        <Typography sx={styles.service} color="textSecondary">
           {bullet}
           {t("About.System.Description.Tuitio")}
         </Typography>