Merge pull request #10 from mulesoft/chores/W-21859986-SkillCopyButton

@W-21859986 Polish install modal and copy feedback styles

Author: machaval

scripts/portal_generator/assets/portal.js

@@ -3185,18 +3185,13 @@ function copyInstallFromModal(slug, buttonEl) {
     if (!codeEl) return;
     var command = codeEl.textContent;
     navigator.clipboard.writeText(command).then(function() {
-        if (!buttonEl) return;
-        var label = buttonEl.querySelector('span');
-        if (!label) return;
-        var saved = label.textContent;
-        label.textContent = 'Copied!';
-        buttonEl.style.color = '#04844B';
-        buttonEl.style.borderColor = '#04844B';
-        setTimeout(function() {
-            label.textContent = saved;
-            buttonEl.style.color = '';
-            buttonEl.style.borderColor = '';
-        }, 1500);
+        closeInstallModal(slug);
+        // Show feedback on the main split button
+        var actions = document.getElementById('skill-actions-' + slug);
+        if (!actions) return;
+        var mainBtn = actions.querySelector('.skill-split-main');
+        if (!mainBtn) return;
+        _showSkillCopiedFeedback(mainBtn);
     }).catch(function(err) {
         console.error('Failed to copy install command:', err);
     });
@@ -3224,14 +3219,10 @@ function _showSkillCopiedFeedback(buttonEl) {
     if (!label) return;
     var saved = label.textContent;
     label.textContent = 'Copied!';
-    mainBtn.style.background = '#04844B';
-    mainBtn.style.color = 'white';
-    mainBtn.style.borderColor = '#04844B';
+    mainBtn.style.color = '#04844B';
     setTimeout(function() {
         label.textContent = saved;
-        mainBtn.style.background = '';
         mainBtn.style.color = '';
-        mainBtn.style.borderColor = '';
     }, 1500);
 }
 

scripts/portal_generator/assets/styles.css

@@ -3884,37 +3884,35 @@ details[open] .examples-toggle-icon {
     left: 0;
     right: 0;
     bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
+    background: rgba(0, 0, 0, 0.2);
 }
 
 .install-modal-content {
     position: relative;
     background: white;
-    border: 1px solid var(--border-color);
     border-radius: 16px;
-    max-width: 560px;
+    max-width: 520px;
     width: 90%;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
 }
 
 .install-modal-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1.25rem 1.5rem;
-    border-bottom: 1px solid var(--border-color);
+    padding: 1.25rem 1.5rem 0.75rem;
 }
 
 .install-modal-header h3 {
     margin: 0;
-    font-size: var(--lume-font-size-6);
+    font-size: var(--lume-font-size-5);
     font-family: var(--font-sans);
     font-weight: var(--lume-font-weight-semibold);
     color: #1f2937;
 }
 
 .install-modal-body {
-    padding: 1.5rem;
+    padding: 0.75rem 1.5rem 1.5rem;
 }
 
 .install-command-row {
@@ -3934,15 +3932,19 @@ details[open] .examples-toggle-icon {
 
 .install-command-code {
     flex: 1;
-    padding: 0.625rem 0.75rem;
-    background: #F0F7FF;
+    padding: 0 0.5rem;
+    background: #DDEFFF;
+    line-height: 1.4;
     border: none;
     border-radius: 0;
     font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
     font-size: var(--lume-font-size-2);
     color: #1f2937;
-    word-break: break-all;
     user-select: all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
 }
 
 .btn-install-copy {