Refactor FrameButton component to update close button styling and add…

… dismiss button functionality
withstudiocms · Dec 22, 2024 · 13c850d · 13c850d
1 parent c015715
commit 13c850d
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/packages/studiocms_dashboard/src/components/FrameButton.astro b/packages/studiocms_dashboard/src/components/FrameButton.astro
@@ -17,8 +17,6 @@ const { link } = Astro.props;
         class FrameButton extends HTMLElement {
             constructor() {
                 super();
-                const text = this.getAttribute('data-text') || 'Click me';
-
                 // Get the slot element
                 const slot = document.createElement('slot');
 
@@ -40,7 +38,7 @@ const { link } = Astro.props;
                 frameButton.style.position = 'absolute';
                 frameButton.style.top = '1rem';
                 frameButton.style.right = '1rem';
-                frameButton.style.backgroundColor = 'hsl(var(--background-step-3))';
+                frameButton.style.backgroundColor = 'transparent';
                 frameButton.style.color = 'white';
                 frameButton.style.padding = '0.5rem';
                 frameButton.style.border = 'none';
@@ -51,6 +49,15 @@ const { link } = Astro.props;
                 frameButton.style.display = 'flex';
                 frameButton.style.justifyContent = 'center';
                 frameButton.style.alignItems = 'center';
+                frameButton.classList.add('dismiss-button');
+
+                frameButton.addEventListener('mouseenter', () => {
+                    frameButton.style.backgroundColor = 'hsl(var(--background-step-2));';
+                });
+
+                frameButton.addEventListener('mouseleave', () => {
+                    frameButton.style.backgroundColor = 'transparent';
+                });
 
                 frameButton.addEventListener('click', () => {
                     frameContainer.style.display = 'none';
@@ -74,7 +81,7 @@ const { link } = Astro.props;
 
                     console.log('clicked');
 
-                    const link = this.getAttribute('data-link');
+                    const link = this.getAttribute('data-link')!;
                     const linkResponse = await fetch(link);
 
                     const jsonRes = await linkResponse.json();