Add copy logic

src/registrar/assets/js/get-gov-admin.js

@@ -149,23 +149,49 @@ function openInNewTab(el, removeAttribute = false){
     function copyToClipboardAndChangeIcon(button) {
         // Assuming the input is the previous sibling of the button
         let input = button.previousElementSibling;
-        
+        let userId = input.getAttribute("user-id")
         // Copy input value to clipboard
         if (input) {
             navigator.clipboard.writeText(input.value).then(function() {
                 // Change the icon to a checkmark on successful copy
                 let buttonIcon = button.querySelector('.usa-button__clipboard use');
-                console.log(`what is the button icon ${buttonIcon}`)
                 if (buttonIcon) {
                     let currentHref = buttonIcon.getAttribute('xlink:href');
                     let baseHref = currentHref.split('#')[0];
 
                     // Append the new icon reference
                     buttonIcon.setAttribute('xlink:href', baseHref + '#check');
+
+                    // Find the nearest .admin-icon-group__success-dialog and update its classes
+                    let brElement = null
+                    let successDialog = document.querySelector(`#email-clipboard__success-dialog-${userId}`);
+                    if (successDialog) {
+                        successDialog.classList.remove('display-none');
+                        // Find the associated BR if it exists
+                        brElement = successDialog.nextElementSibling
+                    }
+                    
+                    // If the element directly below the success dialog is a br, hide it.
+                    // This is for dynamic styling reasons
+                    if (brElement && brElement.tagName === 'BR' && brElement.classList.contains('admin-icon-group__br')) {
+                        brElement.classList.add('display-none');
+                    }
+
                     setTimeout(function() {
                         // Change back to the copy icon
                         buttonIcon.setAttribute('xlink:href', currentHref); 
+
+                        // Hide the success dialog
+                        if (successDialog){
+                            successDialog.classList.add("display-none");
+                        }
+                        
+                        // Show the regular br
+                        if (brElement) {
+                            brElement.classList.remove("display-none");
+                        }
                     }, 1500);
+
                 }
 
             }).catch(function(error) {

src/registrar/assets/sass/_theme/_admin.scss

@@ -578,6 +578,33 @@ address.dja-address-contact-list {
         display: inline-flex;
         padding-top: 4px;
         line-height: 14px;
+        color: var(--link-fg);
+    }
+}
+
+.usa-alert--slim.usa-alert--slim--dja-admin {
+    .usa-alert__body:before {
+        top: 0.4rem;
+        left: 10px
+    }
+    .usa-alert__body {
+        padding-left: 2.5rem;
+    }
+}
+@media (prefers-color-scheme: dark) {
+    .usa-alert--success.usa-alert--slim--dja-admin { 
+        border-left-color: var(--accent);
+        .usa-alert__body {
+            background-color: var(--darkened-bg);
+        }
+
+        .usa-alert__body:before {
+            background-color: var(--body-quiet-color);
+        }
+
+        p {
+            color: var(--body-quiet-color);
+        }
     }
 }
 

src/registrar/templates/django/admin/includes/contact_detail_list.html

@@ -43,7 +43,7 @@
             {% else %}
                 {{ user.email }} | 
                 <div class="admin-icon-group admin-icon-group__clipboard-link">
-                    <input aria-hidden="true" class="display-none" value="{{ user.email }}" />
+                    <input user-id="{{ user.id }}" aria-hidden="true" class="display-none" value="{{ user.email }}" />
                     <button 
                     class="usa-button usa-button--unstyled padding-right-1 usa-button__icon usa-button__clipboard text-no-underline" 
                     type="button"
@@ -56,8 +56,25 @@
                         Copy
                     </button>
                 </div>
+                <div
+                id="email-clipboard__success-dialog-{{ user.id }}" 
+                class="admin-icon-group__success-dialog 
+                display-none 
+                usa-alert 
+                usa-alert--success 
+                usa-alert--slim 
+                usa-alert--slim--dja-admin 
+                margin-top-1 
+                margin-bottom-1"
+                >
+                    <div class="usa-alert__body">
+                        <p class="usa-alert__text">
+                            Email copied to clipboard.
+                        </p>
+                    </div>
+                </div>
             {% endif %}
-            <br>
+            <br class="admin-icon-group__br">
         {% else %}
             None<br>
         {% endif %}