fix: notify for upcoming page (#3887)

* chore: upcoming login

* fix: subscribed button

src/components/AuthenticationFlow/LoginPopup.astro

@@ -27,6 +27,6 @@ import { GoogleButton } from './GoogleButton';
 
   <div class='mt-6 text-center text-sm text-slate-600'>
     Don't have an account?{' '}
-    <a href='/signup' class='font-medium text-[#4285f4]'> Sign up</a>
+    <a href='/signup' class='font-medium text-[#4285f4]'>Sign up</a>
   </div>
 </Popup>

src/components/BestPracticeHeader.astro

@@ -1,9 +1,7 @@
 ---
 import BestPracticeHint from './BestPracticeHint.astro';
-import DownloadPopup from './DownloadPopup.astro';
 import Icon from './AstroIcon.astro';
 import LoginPopup from './AuthenticationFlow/LoginPopup.astro';
-import SubscribePopup from './SubscribePopup.astro';
 
 export interface Props {
   title: string;

src/components/UpcomingForm.astro

@@ -1,37 +1,49 @@
 ---
-import CaptchaFields from './Captcha/CaptchaFields.astro';
 import Icon from './AstroIcon.astro';
 ---
 
-<div class='my-0 px-5 rounded-lg text-left sm:text-center sm:pb-10 pb-8'>
+<div
-  <div class='sm:max-w-[400px] mx-auto'>
+  class='my-0 rounded-lg px-5 pb-12 pt-5 text-left sm:pb-16 sm:pt-0 sm:text-center'
+>
+  <div class='mx-auto sm:max-w-[420px]'>
     <div class='hidden sm:block'><Icon icon='bell' /></div>
-    <h2 class='text-3xl mb-1 font-medium hidden sm:block'>Upcoming</h2>
+    <h2 class='text-3xl font-semibold sm:mb-1 sm:font-medium'>Upcoming</h2>
-    <p class='text-gray-600 mb-0 sm:mb-5'>Please check back later or subscribe below.</p>
+    <p class='mb-0 inline-flex hidden text-gray-600 sm:mb-5' data-auth-required>
+      You will be notified by email when the roadmap is ready.
+    </p>
+    <p
+      class='mb-0 inline-flex hidden text-gray-600 sm:mb-5'
+      data-guest-required
+    >
+      Please check back later or subscribe below.
+    </p>
 
-    <form action='https://news.roadmap.sh/subscribe' method='post' accept-charset='utf-8' captcha-form>
+    <button
-      <input
+      data-guest-required
-        type='email'
+      data-popup='login-popup'
-        required
+      type='button'
-        name='email'
+      name='submit'
-        id='email'
+      class='font-regular text-md mt-5 hidden w-full rounded-md bg-gradient-to-r from-amber-700 to-blue-800 px-5 py-2.5 text-center text-white hover:from-amber-800 hover:to-blue-900 sm:mt-0'
-        autofocus
+      aria-label='Get Notified'
-        class='mt-1 block w-full mb-2 border-2 rounded-md py-2 sm:py-3 px-3 sm:px-3.5 text-md'
+      ga-category='notification'
-        placeholder='Enter your email'
+      ga-action='Clicked Popup Opener'
-      />
+      ga-label='Get Notified Popup'
-
+    >
-      <CaptchaFields />
+      Get Notified
-
+    </button>
-      <input type='hidden' name='list' value='tTqz1w7nexY3cWDpLnI88Q' />
+    <button
-      <input type='hidden' name='subform' value='yes' />
+      data-auth-required
-
+      type='button'
-      <button
+      disabled
-        type='submit'
+      name='submit'
-        name='submit'
+      class='font-regular text-md mt-5 flex hidden w-full items-center justify-center gap-2 rounded-md bg-gray-300 px-5 py-2.5 text-center text-gray-800'
-        class='text-white bg-gradient-to-r from-amber-700 to-blue-800 hover:from-amber-800 hover:to-blue-900 font-regular rounded-md text-md px-5 py-2.5 w-full text-center'
+      aria-label='Get Notified'
-      >
+      ga-category='notification'
-        Get Notified
+      ga-action='Clicked Popup Opener'
-      </button>
+      ga-label='Get Notified Popup'
-    </form>
+    >
+      <Icon icon='check' />
+      Subscribed
+    </button>
   </div>
 </div>

src/icons/check.svg

@@ -1,3 +1,3 @@
 <svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M5.5 9.99933L14 1.49933L12.5 0L5.5 6.99933L1.5 2.99687L0 4.49933L5.5 9.99933Z" fill="white"/>
+  <path d="M5.5 9.99933L14 1.49933L12.5 0L5.5 6.99933L1.5 2.99687L0 4.49933L5.5 9.99933Z" fill="currentColor"/>
 </svg>