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 {