diff --git a/packages/studiocms_dashboard/src/components/FrameButton.astro b/packages/studiocms_dashboard/src/components/FrameButton.astro index 20f2c9a3f..1bd97d575 100644 --- 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();