From 12f4254d57a2c708cf6faa10a9198646d321b2fd Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Wed, 29 Apr 2026 21:38:35 +0000
Subject: [PATCH] add alpha label and pricing copy to newsletter settings

---
 app/lish/[did]/[publication]/dashboard/settings/ProSettings.tsx | 28 ++++++++++++++++++++++++++--
 app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx | 6 ++++--
 2 file(s) changed, 30 insertion(s)(+), 4 deletion(s)(-)

diff --git a/app/lish/[did]/[publication]/dashboard/settings/ProSettings.tsx b/app/lish/[did]/[publication]/dashboard/settings/ProSettings.tsx
--- a/app/lish/[did]/[publication]/dashboard/settings/ProSettings.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/ProSettings.tsx
@@ -65,9 +65,23 @@
 
   if (!newsletterMode) {
     return (
-      <DashboardContainer section="Newsletter" className="pb-4">
+      <DashboardContainer
+      section={
+        <>
+          Newsletter
+          <span className="bg-accent-1 rounded-md px-1 text-accent-2 font-bold text-sm">
+            alpha
+          </span>
+        </>
+      }
+      className="pb-4"
+    >
         <div className="leading-snug text-secondary">
           Email posts directly to publication subscribers when you publish.
+        </div>
+        <div className="leading-snug text-tertiary text-sm">
+          Your first 1k email subscribers are included with Leaflet Pro. After
+          that, it's $5 for each additional 1k subs. Questions? Reach out!
         </div>
         <ButtonPrimary
           className="self-start"
@@ -98,7 +112,17 @@
     replyToValue.trim().toLowerCase() !== savedReplyTo.toLowerCase();
 
   return (
-    <DashboardContainer section="Newsletter" className="pb-4">
+    <DashboardContainer
+      section={
+        <>
+          Newsletter
+          <span className="bg-accent-1 rounded-md px-1 text-accent-2 font-bold text-sm">
+            alpha
+          </span>
+        </>
+      }
+      className="pb-4"
+    >
       <div className="flex flex-col gap-4">
         <div className="flex items-center justify-between gap-3 flex-wrap">
           <div className="text-secondary leading-snug">
diff --git a/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx b/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
--- a/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
@@ -269,7 +269,7 @@
 export const DashboardContainer = (props: {
   children: React.ReactNode;
   className?: string;
-  section?: string;
+  section?: React.ReactNode;
 }) => {
   let cardBorderHidden = useCardBorderHidden();
   return (
@@ -278,7 +278,9 @@
     >
       {props.section && (
         <>
-          <h3 className="font-bold text-primary">{props.section}</h3>
+          <h3 className="font-bold text-primary flex items-center gap-2">
+            {props.section}
+          </h3>
           <hr className="-mt-1 mb-2 border-border-light" />
         </>
       )}

--
tangled.sh