From 9db783c44afa24aafe9a596576b4311ed477e94a Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Wed, 1 Apr 2026 21:12:31 -0400
Subject: [PATCH] remove unused code, make the settings page look nice

---
 .../p/[didOrHandle]/ProfileTabs.tsx           |   2 +-
 app/(home-pages)/reader/layout.tsx            |   2 +-
 app/lish/[did]/[publication]/UpgradeModal.tsx |  14 +-
 .../dashboard/settings/GeneralSettings.tsx    |  16 +-
 .../settings/ManageProSubscription.tsx        |   3 -
 .../dashboard/settings/PostOptions.tsx        | 128 --------------
 .../dashboard/settings/PostSettings.tsx       |   6 +-
 ...omainsInline.tsx => PubDomainSettings.tsx} |  14 +-
 .../settings/PublicationSettings.tsx          | 166 ------------------
 .../dashboard/settings/SettingsContent.tsx    |  33 ++--
 .../dashboard/settings/ThemeSettings.tsx      |  10 +-
 app/lish/createPub/UpdatePubForm.tsx          |   9 +-
 components/ActionBar/ProfileButton.tsx        |   4 +-
 components/Domains/PublicationDomains.tsx     |   6 +-
 components/Tab.tsx                            |   2 +-
 components/ThemeManager/PubThemeSetter.tsx    |  57 ++++--
 16 files changed, 105 insertions(+), 367 deletions(-)
 delete mode 100644 app/lish/[did]/[publication]/dashboard/settings/PostOptions.tsx
 rename app/lish/[did]/[publication]/dashboard/settings/{DomainsInline.tsx => PubDomainSettings.tsx} (96%)
 delete mode 100644 app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx

diff --git a/app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx b/app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx
index 5155bde4..e43e6286 100644
--- a/app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx
+++ b/app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx
@@ -112,7 +112,7 @@ const TabLink = (props: { href: string; name: string; selected: boolean }) => {
       className={`pubTabs px-1 py-0 flex gap-1 items-center rounded-md hover:cursor-pointer hover:no-underline! ${
         props.selected
           ? "text-accent-2 bg-accent-1 font-bold -mb-px"
-          : "text-tertiary"
+          : "text-secondary"
       }`}
     >
       {props.name}
diff --git a/app/(home-pages)/reader/layout.tsx b/app/(home-pages)/reader/layout.tsx
index 36b65237..58d41c1c 100644
--- a/app/(home-pages)/reader/layout.tsx
+++ b/app/(home-pages)/reader/layout.tsx
@@ -57,7 +57,7 @@ export default function ReaderLayout({
                     className={`pubTabs px-1 py-0 flex gap-1 items-center rounded-md hover:cursor-pointer ${
                       isActive(tab.href)
                         ? "text-accent-2 bg-accent-1 font-bold -mb-px"
-                        : "text-tertiary"
+                        : "text-secondary"
                     }`}
                   >
                     {tab.name}
diff --git a/app/lish/[did]/[publication]/UpgradeModal.tsx b/app/lish/[did]/[publication]/UpgradeModal.tsx
index be28a42c..f28f0576 100644
--- a/app/lish/[did]/[publication]/UpgradeModal.tsx
+++ b/app/lish/[did]/[publication]/UpgradeModal.tsx
@@ -90,18 +90,24 @@ export const UpgradeModal = (props: {
   );
 };
 
-export const InlineUpgrade = () => {
+export const InlineUpgrade = (props: { compact?: boolean }) => {
   return (
-    <div className="text-center p-2 accent-container text-secondary">
+    <div className="text-center  text-secondary">
       <UpgradeModal
         asChild
         trigger={
-          <ButtonPrimary compact fullWidth className="text-sm">
+          <ButtonPrimary
+            compact={props.compact}
+            fullWidth
+            className={props.compact ? `text-sm` : "text-base"}
+          >
             Upgrade to Leaflet Pro!
           </ButtonPrimary>
         }
       />
-      <div className="text-sm leading-snug text-tertiary pt-1">
+      <div
+        className={`${props.compact ? `text-sm` : "text-base"} leading-snug text-tertiary pt-2`}
+      >
         Analytics for all your pubs! <br /> Emails and membership coming soon.
       </div>
     </div>
diff --git a/app/lish/[did]/[publication]/dashboard/settings/GeneralSettings.tsx b/app/lish/[did]/[publication]/dashboard/settings/GeneralSettings.tsx
index 8f1c9721..cd28e40c 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/GeneralSettings.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/GeneralSettings.tsx
@@ -18,12 +18,12 @@ export function GeneralSettings(props: {
     <DashboardContainer>
       <h3 className="font-bold text-primary">General Settings</h3>
 
-      <div className="flex items-center justify-between gap-2">
-        <p className="pl-0.5 pb-0.5 text-tertiary italic text-sm font-bold">
+      <div className="flex flex-col gap-2 pb-2">
+        <p className=" text-secondary  font-bold">
           Logo <span className="font-normal">(optional)</span>
         </p>
         <div
-          className={`w-8 h-8 rounded-full flex items-center justify-center cursor-pointer  ${props.iconPreview ? "border border-border-light hover:outline-border" : "border border-dotted border-accent-contrast hover:outline-accent-contrast"} selected-outline`}
+          className={`w-16 h-16 rounded-full flex items-center justify-center cursor-pointer  ${props.iconPreview ? "border border-border-light hover:outline-border" : "border border-dotted border-accent-contrast hover:outline-accent-contrast"} selected-outline`}
           onClick={() => fileInputRef.current?.click()}
         >
           {props.iconPreview ? (
@@ -56,11 +56,9 @@ export function GeneralSettings(props: {
       </div>
 
       <label>
-        <p className="pl-0.5 pb-0.5 text-tertiary italic text-sm font-bold">
-          Publication Name
-        </p>
+        <p className="text-secondary pt-3 font-bold">Publication Name</p>
         <Input
-          className="input-with-border w-full text-primary"
+          className="input-with-border w-full text-primary max-w-prose"
           type="text"
           id="pubName"
           value={props.nameValue}
@@ -69,12 +67,12 @@ export function GeneralSettings(props: {
       </label>
 
       <label>
-        <p className="text-tertiary italic text-sm font-bold pl-0.5 pb-0.5">
+        <p className="text-secondary pt-3 font-bold">
           Description <span className="font-normal">(optional)</span>
         </p>
         <Input
           textarea
-          className="input-with-border w-full text-primary"
+          className="input-with-border w-full text-primary max-w-prose"
           rows={3}
           id="pubDescription"
           value={props.descriptionValue}
diff --git a/app/lish/[did]/[publication]/dashboard/settings/ManageProSubscription.tsx b/app/lish/[did]/[publication]/dashboard/settings/ManageProSubscription.tsx
index 52615c45..80978d28 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/ManageProSubscription.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/ManageProSubscription.tsx
@@ -32,9 +32,6 @@ export const ManageProSubscription = (props: {}) => {
 
   return (
     <div>
-      <div className="flex justify-between font-bold text-secondary bg-border-light -mx-3 -mt-2 px-3 py-2 mb-1 flex-shrink-0">
-        Manage Subscription
-      </div>
       <div className="text-secondary text-center flex flex-col justify-center gap-2 py-2">
         <div>
           You have a <br />
diff --git a/app/lish/[did]/[publication]/dashboard/settings/PostOptions.tsx b/app/lish/[did]/[publication]/dashboard/settings/PostOptions.tsx
deleted file mode 100644
index 0a8b49d5..00000000
--- a/app/lish/[did]/[publication]/dashboard/settings/PostOptions.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import {
-  usePublicationData,
-  useNormalizedPublicationRecord,
-} from "../PublicationSWRProvider";
-import { PubSettingsHeader } from "./PublicationSettings";
-import { useState } from "react";
-import { Toggle } from "components/Toggle";
-import { updatePublication } from "app/lish/createPub/updatePublication";
-import { useToaster } from "components/Toast";
-import { mutate } from "swr";
-
-export const PostOptions = (props: {
-  backToMenu: () => void;
-  loading: boolean;
-  setLoading: (l: boolean) => void;
-}) => {
-  let { data } = usePublicationData();
-
-  let { publication: pubData } = data || {};
-  const record = useNormalizedPublicationRecord();
-
-  let [showComments, setShowComments] = useState(
-    record?.preferences?.showComments === undefined
-      ? true
-      : record.preferences.showComments,
-  );
-  let [showMentions, setShowMentions] = useState(
-    record?.preferences?.showMentions === undefined
-      ? true
-      : record.preferences.showMentions,
-  );
-  let [showRecommends, setShowRecommends] = useState(
-    record?.preferences?.showRecommends === undefined
-      ? true
-      : record.preferences.showRecommends,
-  );
-  let [showPrevNext, setShowPrevNext] = useState(
-    record?.preferences?.showPrevNext === undefined
-      ? true
-      : record.preferences.showPrevNext,
-  );
-
-  let toast = useToaster();
-  return (
-    <form
-      onSubmit={async (e) => {
-        if (!pubData || !record) return;
-        e.preventDefault();
-        props.setLoading(true);
-        let data = await updatePublication({
-          name: record.name,
-          uri: pubData.uri,
-          preferences: {
-            showInDiscover:
-              record?.preferences?.showInDiscover === undefined
-                ? true
-                : record.preferences.showInDiscover,
-            showComments: showComments,
-            showMentions: showMentions,
-            showPrevNext: showPrevNext,
-            showRecommends: showRecommends,
-          },
-        });
-        toast({ type: "success", content: <strong>Posts Updated!</strong> });
-        props.setLoading(false);
-        mutate("publication-data");
-      }}
-      className="text-primary flex flex-col"
-    >
-      <PubSettingsHeader
-        loading={props.loading}
-        setLoadingAction={props.setLoading}
-        backToMenuAction={props.backToMenu}
-      >
-        Post Options
-      </PubSettingsHeader>
-      <h4 className="mb-1">Layout</h4>
-      <Toggle
-        toggle={showPrevNext}
-        onToggle={() => {
-          setShowPrevNext(!showPrevNext);
-        }}
-      >
-        <div className="font-bold">Show Prev/Next Buttons</div>
-      </Toggle>
-      <hr className="my-2 border-border-light" />
-      <h4 className="mb-1">Interactions</h4>
-      <div className="flex flex-col gap-2">
-        <Toggle
-          toggle={showComments}
-          onToggle={() => {
-            setShowComments(!showComments);
-          }}
-        >
-          <div className="font-bold">Show Comments</div>
-        </Toggle>
-
-        <Toggle
-          toggle={showMentions}
-          onToggle={() => {
-            setShowMentions(!showMentions);
-          }}
-        >
-          <div className="flex flex-col justify-start">
-            <div className="font-bold">Show Mentions</div>
-            <div className="text-tertiary text-sm leading-tight">
-              Display a list of Bluesky mentions about your post
-            </div>
-          </div>
-        </Toggle>
-
-        <Toggle
-          toggle={showRecommends}
-          onToggle={() => {
-            setShowRecommends(!showRecommends);
-          }}
-        >
-          <div className="flex flex-col justify-start">
-            <div className="font-bold">Show Recommends</div>
-            <div className="text-tertiary text-sm leading-tight">
-              Allow readers to recommend/like your post
-            </div>
-          </div>
-        </Toggle>
-      </div>
-    </form>
-  );
-};
diff --git a/app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx b/app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx
index f1f314bd..8dd7cd09 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx
@@ -18,7 +18,7 @@ export function PostSettings(props: {
   return (
     <>
       <DashboardContainer>
-        <h3 className="mb-3">Discovery</h3>
+        <h3>Discovery</h3>
         <Toggle
           toggle={props.showInDiscover}
           onToggle={() => props.setShowInDiscover(!props.showInDiscover)}
@@ -38,7 +38,7 @@ export function PostSettings(props: {
       {cardBorderHidden && <hr className="border-border-light" />}
 
       <DashboardContainer>
-        <h3 className="mb-3">Post Layout</h3>
+        <h3>Post Layout</h3>
         <Toggle
           toggle={props.showPrevNext}
           onToggle={() => props.setShowPrevNext(!props.showPrevNext)}
@@ -48,7 +48,7 @@ export function PostSettings(props: {
       </DashboardContainer>
       {cardBorderHidden && <hr className="border-border-light" />}
       <DashboardContainer>
-        <h3 className="mb-3">Post Interactions</h3>
+        <h3>Post Interactions</h3>
         <div className="flex flex-col gap-2">
           <Toggle
             toggle={props.showComments}
diff --git a/app/lish/[did]/[publication]/dashboard/settings/DomainsInline.tsx b/app/lish/[did]/[publication]/dashboard/settings/PubDomainSettings.tsx
similarity index 96%
rename from app/lish/[did]/[publication]/dashboard/settings/DomainsInline.tsx
rename to app/lish/[did]/[publication]/dashboard/settings/PubDomainSettings.tsx
index 7e7a03f9..96939aaf 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/DomainsInline.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/PubDomainSettings.tsx
@@ -28,7 +28,7 @@ import { DotLoader } from "components/utils/DotLoader";
 import { useToaster } from "components/Toast";
 import type { CustomDomain } from "components/Domains/DomainList";
 
-export const DomainsInline = () => {
+export const PubDomainSettings = () => {
   let { data, mutate: mutatePubData } = usePublicationData();
   let { publication: pubData } = data || {};
   let record = useNormalizedPublicationRecord();
@@ -42,7 +42,7 @@ export const DomainsInline = () => {
   if (!pubData) return null;
 
   return (
-    <section className="flex flex-col gap-3">
+    <>
       <h3 className="font-bold text-primary">Domains</h3>
       <div className="flex flex-col gap-1">
         <h4>This Publication&apos;s Domains</h4>
@@ -116,7 +116,7 @@ export const DomainsInline = () => {
           );
         })()}
       </div>
-    </section>
+    </>
   );
 };
 
@@ -134,12 +134,12 @@ function PubDomainRow(props: {
   let toaster = props.toaster;
 
   return (
-    <div className="text-sm text-secondary relative w-full flex items-center justify-between px-[6px] py-1 border rounded-md border-border-light">
+    <div className=" opaque-container text-secondary relative w-full flex items-center justify-between px-[6px] py-1 border rounded-md border-border-light">
       <span className="pr-8 truncate text-left">{props.domain}</span>
       <div className="flex justify-end items-center">
         {pending ? (
           <div className="px-1 py-0.5 flex gap-1 items-center">
-            <p className="w-max pl-1 font-bold text-xs text-tertiary">
+            <p className="w-max pl-1 font-bold text-sm text-tertiary">
               pending
             </p>
             <LoadingTiny className="animate-spin text-accent-contrast" />
@@ -323,11 +323,11 @@ function UnassignedDomainRow(props: {
   }
 
   return (
-    <div className="text-sm text-tertiary w-full flex flex-col gap-1 px-[6px] py-1 border rounded-md border-border-light border-dashed">
+    <div className="opaque-container text-tertiary w-full flex flex-col gap-1 px-[6px] py-1 border rounded-md border-border-light border-dashed">
       <div className="flex items-center justify-between">
         <span className="truncate text-left">{props.domainData.domain}</span>
         {pending ? (
-          <div className="text-tertiary animate-pulse text-xs">unverified</div>
+          <div className="text-tertiary animate-pulse text-sm">unverified</div>
         ) : confirming ? null : (
           <button
             className="text-accent-contrast text-xs font-bold"
diff --git a/app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx b/app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx
deleted file mode 100644
index 4d58d068..00000000
--- a/app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-"use client";
-
-import { ActionButton } from "components/ActionBar/ActionButton";
-import { Popover } from "components/Popover";
-import { SettingsSmall } from "components/Icons/SettingsSmall";
-import { EditPubForm } from "app/lish/createPub/UpdatePubForm";
-import { PubThemeSetter } from "components/ThemeManager/PubThemeSetter";
-import { useIsMobile } from "src/hooks/isMobile";
-import { useState } from "react";
-import { GoBackSmall } from "components/Icons/GoBackSmall";
-import { theme } from "tailwind.config";
-import { ButtonPrimary } from "components/Buttons";
-import { DotLoader } from "components/utils/DotLoader";
-import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";
-import { PostOptions } from "./PostOptions";
-import { PublicationDomains } from "components/Domains/PublicationDomains";
-import { usePublicationData } from "../PublicationSWRProvider";
-
-type menuState = "menu" | "pub-settings" | "theme" | "post-settings" | "domains";
-
-export function PublicationSettingsButton(props: { publication: string }) {
-  let isMobile = useIsMobile();
-  let [state, setState] = useState<menuState>("menu");
-  let [loading, setLoading] = useState(false);
-
-  return (
-    <Popover
-      asChild
-      onOpenChange={() => setState("menu")}
-      side={isMobile ? "top" : "right"}
-      align={isMobile ? "center" : "start"}
-      className={`flex flex-col max-w-xs w-[1000px] ${state === "theme" && "bg-white!"} pb-0!`}
-      arrowFill={theme.colors["border-light"]}
-      trigger={
-        <ActionButton
-          id="pub-settings-button"
-          icon=<SettingsSmall />
-          label="Settings"
-          smallOnMobile
-        />
-      }
-    >
-      {state === "pub-settings" ? (
-        <EditPubForm
-          backToMenuAction={() => setState("menu")}
-          loading={loading}
-          setLoadingAction={setLoading}
-        />
-      ) : state === "theme" ? (
-        <PubThemeSetter
-          backToMenu={() => setState("menu")}
-          loading={loading}
-          setLoading={setLoading}
-        />
-      ) : state === "post-settings" ? (
-        <PostOptions
-          backToMenu={() => setState("menu")}
-          loading={loading}
-          setLoading={setLoading}
-        />
-      ) : state === "domains" ? (
-        <PublicationDomainsView backToMenu={() => setState("menu")} />
-      ) : (
-        <PubSettingsMenu
-          state={state}
-          setState={setState}
-          loading={loading}
-          setLoading={setLoading}
-        />
-      )}
-      <div className="spacer h-2 w-full" aria-hidden />
-    </Popover>
-  );
-}
-
-const PubSettingsMenu = (props: {
-  state: menuState;
-  setState: (s: menuState) => void;
-  loading: boolean;
-  setLoading: (l: boolean) => void;
-}) => {
-  let menuItemClassName =
-    "menuItem -mx-[8px] text-left flex items-center justify-between hover:no-underline!";
-
-  return (
-    <div className="flex flex-col gap-0.5">
-      <PubSettingsHeader>Settings</PubSettingsHeader>
-      <button
-        className={menuItemClassName}
-        type="button"
-        onClick={() => {
-          props.setState("pub-settings");
-        }}
-      >
-        Publication Settings
-        <ArrowRightTiny />
-      </button>
-      <button
-        className={menuItemClassName}
-        type="button"
-        onClick={() => props.setState("post-settings")}
-      >
-        Post Settings
-        <ArrowRightTiny />
-      </button>
-      <button
-        className={menuItemClassName}
-        type="button"
-        onClick={() => props.setState("theme")}
-      >
-        Theme and Layout
-        <ArrowRightTiny />
-      </button>
-      <button
-        className={menuItemClassName}
-        type="button"
-        onClick={() => props.setState("domains")}
-      >
-        Domains
-        <ArrowRightTiny />
-      </button>
-    </div>
-  );
-};
-
-function PublicationDomainsView(props: { backToMenu: () => void }) {
-  let { data } = usePublicationData();
-  let { publication: pubData } = data || {};
-  if (!pubData) return null;
-  return (
-    <PublicationDomains
-      backToMenu={props.backToMenu}
-      publication_uri={pubData.uri}
-    />
-  );
-}
-
-export const PubSettingsHeader = (props: {
-  backToMenuAction?: () => void;
-  loading?: boolean;
-  setLoadingAction?: (l: boolean) => void;
-  children: React.ReactNode;
-}) => {
-  return (
-    <div className="flex justify-between font-bold text-secondary bg-border-light -mx-3 -mt-2 px-3 py-2 mb-1 flex-shrink-0">
-      {props.children}
-      {props.backToMenuAction && (
-        <div className="flex gap-2">
-          <button
-            type="button"
-            onClick={() => {
-              props.backToMenuAction && props.backToMenuAction();
-            }}
-          >
-            <GoBackSmall className="text-accent-contrast" />
-          </button>
-          {props.setLoadingAction && (
-            <ButtonPrimary compact type="submit">
-              {props.loading ? <DotLoader /> : "Update"}
-            </ButtonPrimary>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx b/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
index 00ba73d0..e692816c 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { ButtonPrimary } from "components/Buttons";
+import { ButtonPrimary, ButtonSecondary } from "components/Buttons";
 import { DotLoader } from "components/utils/DotLoader";
 import { useToaster } from "components/Toast";
 import { mutate } from "swr";
@@ -10,12 +10,15 @@ import {
   useNormalizedPublicationRecord,
 } from "../PublicationSWRProvider";
 import { updatePublication } from "app/lish/createPub/updatePublication";
-import { DomainsInline } from "./DomainsInline";
+import { PubDomainSettings } from "./PubDomainSettings";
 import { PubThemeSetter } from "components/ThemeManager/PubThemeSetter";
 import { GeneralSettings } from "./GeneralSettings";
 import { PostSettings } from "./PostSettings";
 import { ThemeSettings } from "./ThemeSettings";
 import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
+import { ManageProSubscription } from "./ManageProSubscription";
+import { useIsPro, useCanSeePro } from "src/hooks/useEntitlement";
+import { InlineUpgrade } from "../../UpgradeModal";
 
 type SettingsView = "all" | "theme";
 
@@ -41,6 +44,8 @@ export function SettingsContent(props: { showPageBackground: boolean }) {
 function SettingsForm(props: { onOpenTheme: () => void }) {
   let { data } = usePublicationData();
   let { publication: pubData } = data || {};
+  let isPro = useIsPro();
+  let canSeePro = useCanSeePro();
   let cardBorderHidden = useCardBorderHidden();
   let record = useNormalizedPublicationRecord();
   let [loading, setLoading] = useState(false);
@@ -94,7 +99,7 @@ function SettingsForm(props: { onOpenTheme: () => void }) {
 
   return (
     <form
-      className="flex flex-col w-full max-w-xl pb-20 "
+      className="flex flex-col w-full pb-8"
       onSubmit={async (e) => {
         e.preventDefault();
         if (!pubData) return;
@@ -117,7 +122,7 @@ function SettingsForm(props: { onOpenTheme: () => void }) {
         mutate("publication-data");
       }}
     >
-      <div className="flex flex-col gap-6 mx-auto">
+      <div className="flex flex-col gap-6 relative ">
         {/* ── General Settings ── */}
         <GeneralSettings
           nameValue={nameValue}
@@ -154,15 +159,17 @@ function SettingsForm(props: { onOpenTheme: () => void }) {
         {cardBorderHidden && <hr className="border-border-light" />}
 
         <DashboardContainer>
-          <DomainsInline />
+          <PubDomainSettings />
         </DashboardContainer>
-      </div>
-
-      {/* ── Sticky Save Footer ── */}
-      <div className="opaque-container sticky bottom-4 left-0 right-0 bg-bg-page border-t border-border-light p-2   px-2 flex justify-end">
-        <ButtonPrimary type="submit" disabled={loading}>
-          {loading ? <DotLoader /> : "Save Changes"}
-        </ButtonPrimary>
+        <DashboardContainer className="bg-[rgb(var(--accent-light))]">
+          {canSeePro && !isPro ? <InlineUpgrade /> : <ManageProSubscription />}
+        </DashboardContainer>
+        <div className="bg-[rgb(var(--accent-1))] text-accent-2 text-sm rounded-md sticky bottom-2 mx-2 border-border-light pr-1 pl-2 flex justify-between items-center py-1 ">
+          You have unsaved updates!
+          <ButtonSecondary type="submit" disabled={loading}>
+            {loading ? <DotLoader /> : "Update Pub"}
+          </ButtonSecondary>
+        </div>
       </div>
     </form>
   );
@@ -175,7 +182,7 @@ export const DashboardContainer = (props: {
   let cardBorderHidden = useCardBorderHidden();
   return (
     <div
-      className={`flex flex-col ${!cardBorderHidden ? "container p-3 sm:px-4" : "bg-transparent"}`}
+      className={`flex flex-col rounded-lg! gap-2 ${!cardBorderHidden ? "container p-3 sm:px-4" : "bg-transparent"}`}
     >
       {props.children}
     </div>
diff --git a/app/lish/[did]/[publication]/dashboard/settings/ThemeSettings.tsx b/app/lish/[did]/[publication]/dashboard/settings/ThemeSettings.tsx
index aa971823..6b07eff5 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/ThemeSettings.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/ThemeSettings.tsx
@@ -1,14 +1,16 @@
+import { GoToArrow } from "components/Icons/GoToArrow";
+
 export function ThemeSettings(props: { onOpenTheme: () => void }) {
   return (
-    <section className="flex flex-col gap-3">
+    <>
       <h3 className="font-bold text-primary">Theme and Layout</h3>
       <button
         type="button"
-        className="text-left text-sm text-accent-contrast font-bold hover:underline w-fit"
+        className="text-left flex gap-2 items-center text-accent-contrast font-bold  w-fit"
         onClick={props.onOpenTheme}
       >
-        Customize Theme &rarr;
+        Customize Theme <GoToArrow />
       </button>
-    </section>
+    </>
   );
 }
diff --git a/app/lish/createPub/UpdatePubForm.tsx b/app/lish/createPub/UpdatePubForm.tsx
index 33251b87..32bdc331 100644
--- a/app/lish/createPub/UpdatePubForm.tsx
+++ b/app/lish/createPub/UpdatePubForm.tsx
@@ -10,7 +10,6 @@ import {
 import { mutate } from "swr";
 import { AddTiny } from "components/Icons/AddTiny";
 import { useToaster } from "components/Toast";
-import { PubSettingsHeader } from "../[did]/[publication]/dashboard/settings/PublicationSettings";
 import { Toggle } from "components/Toggle";
 
 export const EditPubForm = (props: {
@@ -85,13 +84,7 @@ export const EditPubForm = (props: {
         mutate("publication-data");
       }}
     >
-      <PubSettingsHeader
-        loading={props.loading}
-        setLoadingAction={props.setLoadingAction}
-        backToMenuAction={props.backToMenuAction}
-      >
-        General Settings
-      </PubSettingsHeader>
+
       <div className="flex flex-col gap-3 w-[1000px] max-w-full pb-2 overflow-y-auto min-h-0">
         <div className="flex items-center justify-between gap-2 mt-2 ">
           <p className="pl-0.5 pb-0.5 text-tertiary italic text-sm font-bold">
diff --git a/components/ActionBar/ProfileButton.tsx b/components/ActionBar/ProfileButton.tsx
index dbfaede9..c5adf2eb 100644
--- a/components/ActionBar/ProfileButton.tsx
+++ b/components/ActionBar/ProfileButton.tsx
@@ -98,7 +98,9 @@ export const ProfileButton = () => {
             {" "}
             <hr className="border-border-light border-dashed" />
             <div className="py-2">
-              <InlineUpgrade />
+              <div className="p-2 accent-container">
+                <InlineUpgrade compact />
+              </div>
             </div>
           </>
         )}
diff --git a/components/Domains/PublicationDomains.tsx b/components/Domains/PublicationDomains.tsx
index 802d45d5..c04dccb7 100644
--- a/components/Domains/PublicationDomains.tsx
+++ b/components/Domains/PublicationDomains.tsx
@@ -17,7 +17,7 @@ import {
   assignDomainToPublication,
   removeDomainAssignment,
 } from "actions/domains";
-import { PubSettingsHeader } from "app/lish/[did]/[publication]/dashboard/settings/PublicationSettings";
+
 import { AddDomainForm } from "./AddDomainForm";
 import { DomainSettingsView } from "./DomainSettingsView";
 import { PinTiny } from "components/Icons/PinTiny";
@@ -44,9 +44,7 @@ export function PublicationDomains(props: {
 
   return (
     <div>
-      <PubSettingsHeader backToMenuAction={props.backToMenu}>
-        Domains
-      </PubSettingsHeader>
+      Domains
       <div className="flex flex-col gap-1 py-1">
         <h4 className="">This Publication's Domains</h4>
         <div className="text-xs text-tertiary -mb-1 ">DEFAULT</div>
diff --git a/components/Tab.tsx b/components/Tab.tsx
index 9df04fa6..d970b659 100644
--- a/components/Tab.tsx
+++ b/components/Tab.tsx
@@ -11,7 +11,7 @@ export const Tab = (props: {
 }) => {
   return (
     <div
-      className={`pubTabs px-1 py-0 flex gap-1 items-center rounded-md hover:cursor-pointer ${props.selected ? "text-accent-2 bg-accent-1 font-bold -mb-px" : "text-tertiary"}`}
+      className={`pubTabs px-1 py-0 flex gap-1 items-center rounded-md hover:cursor-pointer ${props.selected ? "text-accent-2 bg-accent-1 font-bold -mb-px" : "text-secondary"}`}
       onClick={() => props.onSelect()}
       onMouseEnter={props.onMouseEnter}
       onPointerDown={props.onPointerDown}
diff --git a/components/ThemeManager/PubThemeSetter.tsx b/components/ThemeManager/PubThemeSetter.tsx
index 328f4a74..72150cef 100644
--- a/components/ThemeManager/PubThemeSetter.tsx
+++ b/components/ThemeManager/PubThemeSetter.tsx
@@ -15,12 +15,14 @@ import { PagePickers } from "./PubPickers/PubTextPickers";
 import { BackgroundPicker } from "./PubPickers/PubBackgroundPickers";
 import { PubAccentPickers } from "./PubPickers/PubAcccentPickers";
 import { Separator } from "components/Layout";
-import { PubSettingsHeader } from "app/lish/[did]/[publication]/dashboard/settings/PublicationSettings";
+
 import { ColorToRGB, ColorToRGBA } from "./colorToLexicons";
 import { useToaster } from "components/Toast";
 import { OAuthErrorMessage, isOAuthSessionError } from "components/OAuthError";
 import { PubPageWidthSetter } from "./PubPickers/PubPageWidthSetter";
 import { FontPicker } from "./Pickers/TextPickers";
+import { GoToArrow } from "components/Icons/GoToArrow";
+import { ButtonPrimary } from "components/Buttons";
 
 export type ImageState = {
   src: string;
@@ -61,8 +63,12 @@ export const PubThemeSetter = (props: {
   let [pageWidth, setPageWidth] = useState<number>(
     record?.theme?.pageWidth || 624,
   );
-  let [headingFont, setHeadingFont] = useState<string | undefined>(record?.theme?.headingFont);
-  let [bodyFont, setBodyFont] = useState<string | undefined>(record?.theme?.bodyFont);
+  let [headingFont, setHeadingFont] = useState<string | undefined>(
+    record?.theme?.headingFont,
+  );
+  let [bodyFont, setBodyFont] = useState<string | undefined>(
+    record?.theme?.bodyFont,
+  );
   let pubBGImage = image?.src || null;
   let leafletBGRepeat = image?.repeat || null;
   let toaster = useToaster();
@@ -129,13 +135,10 @@ export const PubThemeSetter = (props: {
             props.setLoading(false);
           }}
         >
-          <PubSettingsHeader
-            loading={props.loading}
-            setLoadingAction={props.setLoading}
-            backToMenuAction={props.backToMenu}
-          >
-            Theme and Layout
-          </PubSettingsHeader>
+          <button onClick={props.backToMenu}>
+            <GoToArrow />
+          </button>
+          <ButtonPrimary onClick={props.setLoading}>update</ButtonPrimary>
         </form>
 
         <div className="themeSetterContent flex flex-col w-full overflow-y-scroll min-h-0 -mb-2 pt-2 ">
@@ -309,7 +312,13 @@ const SamplePub = (props: {
             />
           )}
 
-          <div className="text-[11px] font-bold pt-[5px] text-accent-contrast" style={{ fontFamily: "var(--theme-heading-font, var(--theme-font, var(--font-quattro)))" }}>
+          <div
+            className="text-[11px] font-bold pt-[5px] text-accent-contrast"
+            style={{
+              fontFamily:
+                "var(--theme-heading-font, var(--theme-font, var(--font-quattro)))",
+            }}
+          >
             {record?.name}
           </div>
           <div className="text-[7px] font-normal text-tertiary">
@@ -322,7 +331,15 @@ const SamplePub = (props: {
         </div>
 
         <div className="flex flex-col text-[8px]  rounded-md ">
-          <div className="font-bold" style={{ fontFamily: "var(--theme-heading-font, var(--theme-font, var(--font-quattro)))" }}>A Sample Post</div>
+          <div
+            className="font-bold"
+            style={{
+              fontFamily:
+                "var(--theme-heading-font, var(--theme-font, var(--font-quattro)))",
+            }}
+          >
+            A Sample Post
+          </div>
           <div className="text-secondary italic text-[6px]">
             This is a sample description about the sample post
           </div>
@@ -364,10 +381,22 @@ const SamplePost = (props: {
         }}
       >
         <div className="flex flex-col ">
-          <div className="text-[6px] font-bold pt-[6px] text-accent-contrast" style={{ fontFamily: "var(--theme-heading-font, var(--theme-font, var(--font-quattro)))" }}>
+          <div
+            className="text-[6px] font-bold pt-[6px] text-accent-contrast"
+            style={{
+              fontFamily:
+                "var(--theme-heading-font, var(--theme-font, var(--font-quattro)))",
+            }}
+          >
             {record?.name}
           </div>
-          <div className="text-[11px] font-bold text-primary" style={{ fontFamily: "var(--theme-heading-font, var(--theme-font, var(--font-quattro)))" }}>
+          <div
+            className="text-[11px] font-bold text-primary"
+            style={{
+              fontFamily:
+                "var(--theme-heading-font, var(--theme-font, var(--font-quattro)))",
+            }}
+          >
             A Sample Post
           </div>
           <div className="text-[7px] font-normal text-secondary italic">
-- 
2.51.2