Refactor PasswordField component styling
parent
89514653ce
commit
ea5e15bf45
|
@ -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"}
|
||||||
|
|
Loading…
Reference in New Issue