diff --git a/src/plays/password-generator/PasswordGenerator.jsx b/src/plays/password-generator/PasswordGenerator.jsx index 935f227cf..6151679d3 100644 --- a/src/plays/password-generator/PasswordGenerator.jsx +++ b/src/plays/password-generator/PasswordGenerator.jsx @@ -72,7 +72,11 @@ function PasswordGenerator(props) { const onCopyClick = (e) => { e.preventDefault(); navigator.clipboard.writeText(password.password); - setPassword({ ...password, status: true }); + setPassword((prev) => ({ ...prev, status: true })); + + setTimeout(() => { + setPassword((prev) => ({ ...prev, status: false })); + }, 1500); }; const ErrorBox = () => { @@ -109,8 +113,14 @@ function PasswordGenerator(props) {

Password Generator

{error && }
- -
diff --git a/src/plays/password-generator/password-generator-style.css b/src/plays/password-generator/password-generator-style.css index 4e2ae6e4e..6c3af835f 100644 --- a/src/plays/password-generator/password-generator-style.css +++ b/src/plays/password-generator/password-generator-style.css @@ -48,6 +48,20 @@ padding: 0.6em 1em; border-radius: 0.7em; text-transform: uppercase; + min-width: 100px; + text-align: center; +} + +.password-generator .main .inputfield .text.copied { + background-color: #b3daff; + border-radius: 0.4em; + transition: background-color 0.3s ease; +} + +.password-generator .main .inputfield .copybtn:disabled { + opacity: 0.55; + background-color: #18c0f4; + cursor: not-allowed; } .password-generator .main .block {