Bug 1550093 - Style the Copied state to match the Lockwise addon. r=MattN,Pike

Differential Revision: https://phabricator.services.mozilla.com/D31521

--HG--
extra : moz-landing-system : lando

browser/components/aboutlogins/content/aboutLogins.ftl

@@ -29,8 +29,8 @@ login-item =
   .hostname-label = Website Address
   .modal-input-reveal-checkbox-hide = Hide password
   .modal-input-reveal-checkbox-show = Show password
-  .copied-password-button = Copied!
-  .copied-username-button = Copied!
+  .copied-password-button = ✓ Copied!
+  .copied-username-button = ✓ Copied!
   .copy-password-button = Copy
   .copy-username-button = Copy
   .open-site-button = Launch

browser/components/aboutlogins/content/components/copy-to-clipboard-button.css

@@ -2,7 +2,28 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+:host {
+  --success-color: #00c100;
+}
+
+@supports -moz-bool-pref("browser.in-content.dark-mode") {
+@media (prefers-color-scheme: dark) {
+  :host {
+    --success-color: #86DE74;
+  }
+}
+}
+
 :host(:not([copied])) .copied-button-text,
 :host([copied]) .copy-button-text {
   display: none;
 }
+
+:host([copied]) {
+  color: var(--success-color);
+}
+
+:host([copied]) button {
+  background-color: transparent;
+  opacity: 1; /* override common.css fading out disabled buttons */
+}