Update newsletter form for cleaner display

Author: wkirby

package.json

@@ -73,5 +73,6 @@
     "svgo": "^3.3.2",
     "typescript": "^5.8.3",
     "xmldom": "^0.6.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/components/forms/NewsletterForm.tsx

@@ -3,6 +3,7 @@ import { TextField } from "components/TextField";
 import { EMAIL_REGEX } from "lib/utils";
 import { ChevronRight } from "lucide-react";
 import { useForm } from "react-hook-form";
+import styles from "styles/components/NewsletterCTA.module.scss";
 
 type Inputs = {
   email: string;
@@ -20,7 +21,7 @@ export const NewsletterForm = () => {
     <form
       method="post"
       action="https://listmonk.skylab.apsis.io/subscription/form"
-      className="stack stack-h"
+      className={styles.newsletter_form}
     >
       <input type="hidden" name="nonce" />
       <input
@@ -32,13 +33,14 @@ export const NewsletterForm = () => {
 
       <TextField
         id="email"
-        placeholder="sholmes@baker.example.com"
+        placeholder="sherlock@example.com"
         error={errors.email}
         required
         type="email"
         autoComplete="email"
         data-lpignore="true"
         data-1p-ignore
+        className={styles.newsletter_form__input}
         {...register("email", {
           required: "Please provide an email address",
           pattern: {
@@ -48,7 +50,11 @@ export const NewsletterForm = () => {
         })}
       />
 
-      <Button type="submit" EndIcon={ChevronRight}>
+      <Button
+        type="submit"
+        EndIcon={ChevronRight}
+        className={styles.newsletter_form__button}
+      >
         Subscribe
       </Button>
     </form>

src/styles/components/NewsletterCTA.module.scss

@@ -34,3 +34,39 @@
     opacity: 75%;
   }
 }
+
+.newsletter_form {
+  display: flex;
+  border: 1px solid var(--border);
+  overflow: hidden;
+  transition: border-color var(--easing) var(--timing_sm);
+
+  &:focus-within {
+    border-color: var(--apsis_blue);
+    box-shadow: 0 0 0 var(--space-3xs) var(--apsis_blue_outline);
+  }
+
+  &__input {
+    flex: 1;
+
+    :global(.input) {
+      border: none;
+      box-shadow: none;
+
+      &:focus {
+        outline: none;
+        box-shadow: none;
+      }
+    }
+  }
+
+  &__button {
+    border-left: 1px solid var(--border);
+
+    &:hover,
+    &:focus {
+      box-shadow: none;
+      outline: none;
+    }
+  }
+}