From 45ed95d0725909dbf15530b139b4f77023561275 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Mon, 6 Apr 2026 20:36:37 -0400
Subject: [PATCH] grab bag of little fixes to make things smoother

---
 .../theme-settings/PostPreview.tsx            |  2 +-
 .../theme-settings/ThemeSettingsContent.tsx   | 75 +++++++++++--------
 .../ThemeManager/Pickers/ColorPicker.tsx      |  1 +
 .../ThemeManager/Pickers/HexKeyboard.tsx      |  4 +-
 .../PubPickers/PubBackgroundPickers.tsx       |  3 +-
 components/ThemeManager/PubThemeSetter.tsx    | 27 ++++---
 6 files changed, 67 insertions(+), 45 deletions(-)

diff --git a/app/lish/[did]/[publication]/theme-settings/PostPreview.tsx b/app/lish/[did]/[publication]/theme-settings/PostPreview.tsx
index 6cb2ab35..797ce41d 100644
--- a/app/lish/[did]/[publication]/theme-settings/PostPreview.tsx
+++ b/app/lish/[did]/[publication]/theme-settings/PostPreview.tsx
@@ -136,7 +136,7 @@ export function PostPreview(props: {
           ],
         }}
       >
-        <div className="w-fit pointer-events-none h-full py-2 sm:py-6">
+        <div className="w-fit h-full py-2 sm:py-6">
           <LinearDocumentPage
             document={fakeDocument}
             did={profile.did || FAKE_DID}
diff --git a/app/lish/[did]/[publication]/theme-settings/ThemeSettingsContent.tsx b/app/lish/[did]/[publication]/theme-settings/ThemeSettingsContent.tsx
index 21d6404e..d6ec0cc2 100644
--- a/app/lish/[did]/[publication]/theme-settings/ThemeSettingsContent.tsx
+++ b/app/lish/[did]/[publication]/theme-settings/ThemeSettingsContent.tsx
@@ -71,39 +71,52 @@ export function ThemeSettingsContent() {
               }
               asChild
             >
-              <form
-                className="flex flex-col overflow-y-auto max-h-(--radix-popover-content-available-height)"
-                onSubmit={async (e) => {
-                  e.preventDefault();
-                  let result = await submitTheme(setLoading);
-                  if (result?.success) {
-                    toaster({ content: "Theme updated!", type: "success" });
-                  }
-                }}
+              <BaseThemeProvider
+                local
+                {...localPubTheme}
+                headingFontId={headingFont}
+                bodyFontId={bodyFont}
+                hasBackgroundImage={!!image}
+                pageWidth={pageWidth}
               >
-                {/* Toggle + Save Header */}
-                <div className="flex items-center justify-between px-3 pt-3 pb-2">
-                  <div className="font-bold text-[#272727]">Preview Mode</div>
-                  <ToggleGroup
-                    value={previewMode}
-                    optionClassName="text-base!"
-                    onChange={setPreviewMode}
-                    options={[
-                      { value: "post", label: "Post" },
-                      { value: "pub", label: "Pub" },
-                    ]}
-                  />
-                </div>
+                <div className="flex flex-col overflow-y-auto max-h-(--radix-popover-content-available-height) py-3">
+                  <div className="p-3 pt-0 ">
+                    <ButtonPrimary
+                      fullWidth
+                      type="button"
+                      disabled={loading}
+                      onClick={async () => {
+                        let result = await submitTheme(setLoading);
+                        if (result?.success) {
+                          toaster({
+                            content: "Theme updated!",
+                            type: "success",
+                          });
+                        }
+                      }}
+                    >
+                      {loading ? <DotLoader /> : "Update"}
+                    </ButtonPrimary>
+                  </div>
 
-                <div className="px-3 pb-3 gap-2 flex flex-col">
-                  <PubThemePickerPanel state={state} />
-                </div>
-                <div className="p-3 pt-0!">
-                  <ButtonPrimary fullWidth type="submit" disabled={loading}>
-                    {loading ? <DotLoader /> : "Update"}
-                  </ButtonPrimary>
+                  {/* Toggle + Save Header */}
+                  <div className="flex items-center justify-between px-3">
+                    <div className="font-bold text-[#595959]">Preview Mode</div>
+                    <ToggleGroup
+                      value={previewMode}
+                      optionClassName="text-base!"
+                      onChange={setPreviewMode}
+                      options={[
+                        { value: "post", label: "Post" },
+                        { value: "pub", label: "Pub" },
+                      ]}
+                    />
+                  </div>
+                  <div className="p-3 gap-2 flex flex-col">
+                    <PubThemePickerPanel state={state} />
+                  </div>
                 </div>
-              </form>
+              </BaseThemeProvider>
             </Popover>
           </div>
 
@@ -114,7 +127,7 @@ export function ThemeSettingsContent() {
             localBgImage={pubBGImage}
             localBgImageRepeat={leafletBGRepeat}
           >
-            <div className="mx-auto h-full w-fit">
+            <div className="mx-auto h-full w-fit pointer-events-none">
               {previewMode === "pub" ? (
                 <PubPreview
                   showPageBackground={showPageBackground}
diff --git a/components/ThemeManager/Pickers/ColorPicker.tsx b/components/ThemeManager/Pickers/ColorPicker.tsx
index 2cd22cfb..3aaa415c 100644
--- a/components/ThemeManager/Pickers/ColorPicker.tsx
+++ b/components/ThemeManager/Pickers/ColorPicker.tsx
@@ -43,6 +43,7 @@ export const ColorPicker = (props: {
       <div className="flex flex-col w-full gap-2">
         <div className="colorPickerLabel flex gap-2 items-center ">
           <button
+            type="button"
             disabled={props.disabled}
             className="flex gap-2 items-center disabled:text-tertiary"
             onClick={() => {
diff --git a/components/ThemeManager/Pickers/HexKeyboard.tsx b/components/ThemeManager/Pickers/HexKeyboard.tsx
index 2267c051..46e19594 100644
--- a/components/ThemeManager/Pickers/HexKeyboard.tsx
+++ b/components/ThemeManager/Pickers/HexKeyboard.tsx
@@ -114,9 +114,9 @@ export const HexKeyboard = (props: {
         }
       }}
       trigger={
-        <button className="w-[72px] text-left bg-transparent outline-hidden truncate">
+        <div className="w-[72px] text-left bg-transparent outline-hidden truncate">
           {hexString}
-        </button>
+        </div>
       }
     >
       <div className="flex flex-col gap-2">
diff --git a/components/ThemeManager/PubPickers/PubBackgroundPickers.tsx b/components/ThemeManager/PubPickers/PubBackgroundPickers.tsx
index 9f63a6da..32597332 100644
--- a/components/ThemeManager/PubPickers/PubBackgroundPickers.tsx
+++ b/components/ThemeManager/PubPickers/PubBackgroundPickers.tsx
@@ -145,6 +145,7 @@ const BackgroundImagePicker = (props: {
     <>
       <div className="bgPickerColorLabel flex gap-2 items-center">
         <button
+          type="button"
           disabled={props.disabled}
           onClick={() => {
             if (props.openPicker === props.thisPicker) {
@@ -170,7 +171,7 @@ const BackgroundImagePicker = (props: {
           <div className="italic text-[#8C8C8C]">image</div>
         </button>
         <div className="flex gap-1 text-[#8C8C8C]">
-          <button onClick={() => props.setBgImage(null)}>
+          <button type="button" onClick={() => props.setBgImage(null)}>
             <DeleteSmall />
           </button>
           <label className="hover:cursor-pointer ">
diff --git a/components/ThemeManager/PubThemeSetter.tsx b/components/ThemeManager/PubThemeSetter.tsx
index 9a7ddd60..f97d98b3 100644
--- a/components/ThemeManager/PubThemeSetter.tsx
+++ b/components/ThemeManager/PubThemeSetter.tsx
@@ -173,7 +173,7 @@ export function PubThemePickerPanel(props: { state: PubThemeEditorState }) {
         <div
           className={`themeBgPicker flex flex-col gap-0 -mb-[6px] z-10 w-full `}
         >
-          <div className="bgPickerBody w-full flex flex-col gap-2 p-2 mt-1 border border-[#CCCCCC] rounded-md text-[#595959] bg-white">
+          <div className="bgPickerBody w-full flex flex-col gap-2 p-2  border border-[#CCCCCC] rounded-md text-[#595959] bg-white">
             <PubPageWidthSetter
               pageWidth={pageWidth}
               setPageWidth={setPageWidth}
@@ -291,17 +291,11 @@ export const PubThemeSetter = (props: {
         className="min-h-0!"
       >
         <div className="min-h-0 flex-1 flex flex-col pb-0.5">
-          <form
-            className="flex-shrink-0"
-            onSubmit={async (e) => {
-              e.preventDefault();
-              await submitTheme(props.setLoading);
-            }}
-          >
-            <button onClick={props.backToMenu}>
+          <div className="flex-shrink-0">
+            <button type="button" onClick={props.backToMenu}>
               <GoToArrow />
             </button>
-          </form>
+          </div>
 
           <div className="themeSetterContent flex flex-col w-full overflow-y-scroll min-h-0 -mb-2 pt-2 ">
             <PubThemePickerPanel state={state} />
@@ -310,12 +304,14 @@ export const PubThemeSetter = (props: {
                 <div className="text-sm">Preview</div>
                 <Separator classname="h-4!" />{" "}
                 <button
+                  type="button"
                   className={`${sample === "pub" ? "font-bold  text-[#595959]" : ""}`}
                   onClick={() => setSample("pub")}
                 >
                   Pub
                 </button>
                 <button
+                  type="button"
                   className={`${sample === "post" ? "font-bold  text-[#595959]" : ""}`}
                   onClick={() => setSample("post")}
                 >
@@ -323,6 +319,17 @@ export const PubThemeSetter = (props: {
                 </button>
               </div>
             </div>
+            <div className="pt-2">
+              <ButtonPrimary
+                fullWidth
+                disabled={props.loading}
+                onClick={async () => {
+                  await submitTheme(props.setLoading);
+                }}
+              >
+                {props.loading ? "Saving..." : "Save Theme"}
+              </ButtonPrimary>
+            </div>
           </div>
         </div>
       </BaseThemeProvider>
-- 
2.51.2