Improve newsletter

* Now it works in a local form

components/bands-in-town.js

@@ -5,7 +5,6 @@ customElements.define(
       super();
       this.attachShadow({ mode: "open" });
       this.shadowRoot.innerHTML = `
-        
         <slot></slot>
       `;
     }

index.css

@@ -150,6 +150,11 @@ button,
   color: inherit;
   background-color: inherit;
   cursor: pointer;
+
+  &[disabled] {
+    opacity: 0.5;
+    cursor: default;
+  }
 }
 
 .button:hover,
@@ -166,6 +171,7 @@ dialog {
   font-family: system-ui;
   letter-spacing: 0.1px;
   max-width: 60ch;
+  padding: 2rem;
 }
 
 dialog::backdrop {
@@ -174,7 +180,8 @@ dialog::backdrop {
   -webkit-backdrop-filter: blur(1rem);
 }
 
-dialog form {
+dialog form[method="dialog"] {
+  margin-top: 2rem;
   text-align: end;
 }
 

index.html

@@ -37,7 +37,8 @@
   />
   <link rel="stylesheet" type="text/css" href="index.css" />
 
-  <script src="/components/bands-in-town.js" type="module" defer></script>
+  <script src="/components/bands-in-town.js" type="module"></script>
+  <script src="/components/newsletter-signup.js" type="module"></script>
 
   <header>
     <select id="lang-switcher" class="button">
@@ -97,7 +98,7 @@ <h1 class="item">Cisco Pema</h1>
     </div>
     <nav>
       <div class="info-donate">
-        <button onclick="pressInfo.showModal()">+ Info</button>
+        <button onclick="pressInfoDialog.showModal()">+ Info</button>
         <a
           class="button"
           id="donate-button"
@@ -107,12 +108,12 @@ <h1 class="item">Cisco Pema</h1>
         >
       </div>
 
-      <a
-        class="button"
-        target="_blank"
-        href="https://docs.google.com/forms/d/e/1FAIpQLSeu9B_4PI27c9EMMMHm9gw4C9c1D1cSNELvUPCf00uL8IGjOQ/viewform?usp=sf_link"
-        >Subscribe to Newsletter</a
+      <button
+        onclick="newsletterDialog.showModal()"
+        data-l10n-key="subscribe-to-newsletter"
       >
+        Subscribe to Newsletter
+      </button>
 
       <section id="tour-dates">
         <details>
@@ -216,7 +217,7 @@ <h1 class="item">Cisco Pema</h1>
     </nav>
   </main>
 
-  <dialog id="pressInfo">
+  <dialog id="pressInfoDialog">
     <h2 data-l10n-key="press-info-title">Press Information</h2>
     <p data-l10n-key="press-info-text">
       A charming blend of South American songwriting with jazz elements is the
@@ -237,6 +238,13 @@ <h2 data-l10n-key="press-info-title">Press Information</h2>
     </form>
   </dialog>
 
+  <dialog id="newsletterDialog">
+    <newsletter-signup></newsletter-signup>
+    <form method="dialog">
+      <button value="close" data-l10n-key="close">Close</button>
+    </form>
+  </dialog>
+
   <script type="module">
     async function localize() {
       const { useL10n } = await import("./lib/i18n/use-l10n.js");