Refactor PasswordField component styling

master
Tudor Stanciu 2024-03-25 02:39:35 +02:00
parent 89514653ce
commit ea5e15bf45
1 changed files with 5 additions and 6 deletions

View File

@ -1,17 +1,16 @@
import React, { useState } from "react"; import React, { useState } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { InputAdornment, TextField, makeStyles, IconButton } from "@mui/material"; import { InputAdornment, TextField, IconButton } from "@mui/material";
import { Visibility, VisibilityOff, LockOutlined } from "@mui/icons-material"; import { Visibility, VisibilityOff, LockOutlined } from "@mui/icons-material";
const useStyles = makeStyles(theme => ({ const styles = {
margin: { margin: {
margin: theme.spacing(1) margin: 1
} }
})); };
const PasswordField = ({ label, ...rest }) => { const PasswordField = ({ label, ...rest }) => {
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const classes = useStyles();
const handleClickShowPassword = () => { const handleClickShowPassword = () => {
setShowPassword(!showPassword); setShowPassword(!showPassword);
@ -23,7 +22,7 @@ const PasswordField = ({ label, ...rest }) => {
return ( return (
<TextField <TextField
className={classes.margin} sx={styles.margin}
label={label || "Password"} label={label || "Password"}
{...rest} {...rest}
type={showPassword ? "text" : "password"} type={showPassword ? "text" : "password"}