Refactor login component styles

frontend/src/features/login/components/LoginCard.js

@@ -1,17 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Card } from "@mui/material";
-import { makeStyles } from "@mui/material/styles";
 import styles from "../styles";
 import LoginComponent from "./LoginComponent";
 
-const useStyles = makeStyles(styles);
-
 const LoginCard = ({ credentials, onChange, onLogin }) => {
-  const classes = useStyles();
-
   return (
-    <div className={classes.appLogin}>
+    <div style={styles.appLogin}>
       <Card variant="outlined">
         <LoginComponent credentials={credentials} onChange={onChange} onLogin={onLogin} />
       </Card>

frontend/src/features/login/components/LoginComponent.js

@@ -1,23 +1,19 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { makeStyles } from "@mui/material/styles";
 import { TextField, InputAdornment, Button, CardActions, CardContent } from "@mui/material";
 import { AccountCircleOutlined } from "@mui/icons-material";
 import PasswordField from "../../../components/common/inputs/PasswordField";
 import { useTranslation } from "react-i18next";
 import styles from "../styles";
 
-const useStyles = makeStyles(styles);
-
 const LoginComponent = ({ credentials, onChange, onLogin }) => {
-  const classes = useStyles();
   const { t } = useTranslation();
 
   return (
     <>
       <CardContent>
         <TextField
-          className={classes.field}
+          sx={styles.field}
           id="username"
           label={t("Login.Username")}
           onChange={onChange("userName")}
@@ -34,7 +30,7 @@ const LoginComponent = ({ credentials, onChange, onLogin }) => {
         <PasswordField
           id="password"
           label={t("Login.Password")}
-          className={classes.field}
+          sx={styles.field}
           onChange={onChange("password")}
           value={credentials.password}
           onKeyDown={e => {
@@ -42,8 +38,8 @@ const LoginComponent = ({ credentials, onChange, onLogin }) => {
           }}
         />
       </CardContent>
-      <CardActions className={classes.actions}>
-        <Button className={classes.onRight} variant="contained" color="primary" onClick={onLogin}>
+      <CardActions sx={styles.actions}>
+        <Button sx={styles.onRight} variant="contained" color="primary" onClick={onLogin}>
           {t("Login.Label")}
         </Button>
       </CardActions>

frontend/src/features/login/styles.js

@@ -1,4 +1,4 @@
-const styles = theme => ({
+const styles = {
   onRight: {
     marginLeft: "auto"
   },
@@ -9,13 +9,13 @@ const styles = theme => ({
     alignItems: "center"
   },
   field: {
-    margin: theme.spacing(1),
+    margin: 1,
     width: "300px"
   },
   actions: {
     paddingRight: "16px",
     paddingLeft: "16px"
   }
-});
+};
 
 export default styles;