From 79bd644f95dc399bc1a9ed272b9088ab3d7d82c1 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Mon, 25 Mar 2024 02:51:56 +0200
Subject: [PATCH] Refactor login component styles

---
 frontend/src/features/login/components/LoginCard.js  |  7 +------
 .../src/features/login/components/LoginComponent.js  | 12 ++++--------
 frontend/src/features/login/styles.js                |  6 +++---
 3 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/frontend/src/features/login/components/LoginCard.js b/frontend/src/features/login/components/LoginCard.js
index 60a2df6..0b411c1 100644
--- a/frontend/src/features/login/components/LoginCard.js
+++ b/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>
diff --git a/frontend/src/features/login/components/LoginComponent.js b/frontend/src/features/login/components/LoginComponent.js
index b432dc9..3c83bbd 100644
--- a/frontend/src/features/login/components/LoginComponent.js
+++ b/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>
diff --git a/frontend/src/features/login/styles.js b/frontend/src/features/login/styles.js
index b295f9e..665e7df 100644
--- a/frontend/src/features/login/styles.js
+++ b/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;