From 1059319a65deb5488f0d77df2f3441bb548b99a8 Mon Sep 17 00:00:00 2001
From: Brendan Schlagel <brendan.schlagel@gmail.com>
Date: Thu, 7 Aug 2025 11:39:26 -0400
Subject: [PATCH] update WatermarkSetter to use Toggle

---
 components/ThemeManager/ThemeSetter.tsx | 58 +++++++++++++------------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/components/ThemeManager/ThemeSetter.tsx b/components/ThemeManager/ThemeSetter.tsx
index 6a9aae27..9dde2461 100644
--- a/components/ThemeManager/ThemeSetter.tsx
+++ b/components/ThemeManager/ThemeSetter.tsx
@@ -23,6 +23,7 @@ import { PaintSmall } from "components/Icons/PaintSmall";
 import { AccentPickers } from "./Pickers/AccentPickers";
 import { useLeafletPublicationData } from "components/PageSWRDataProvider";
 import { useIsMobile } from "src/hooks/isMobile";
+import { Toggle } from "components/Toggle";
 
 export type pickers =
   | "null"
@@ -175,34 +176,36 @@ export const ThemePopover = (props: { entityID: string; home?: boolean }) => {
 function WatermarkSetter(props: { entityID: string }) {
   let { rep } = useReplicache();
   let checked = useEntity(props.entityID, "theme/page-leaflet-watermark");
+
+  function handleToggle() {
+    rep?.mutate.assertFact({
+      entity: props.entityID,
+      attribute: "theme/page-leaflet-watermark",
+      data: { type: "boolean", value: !checked?.data.value },
+    });
+  }
   return (
-    <label className="px-3 pb-3 flex gap-2 items-start cursor-pointer">
-      <input
-        type="checkbox"
-        checked={!!checked?.data.value}
-        className="hidden"
-        onChange={(e) => {
-          rep?.mutate.assertFact({
-            entity: props.entityID,
-            attribute: "theme/page-leaflet-watermark",
-            data: { type: "boolean", value: e.currentTarget.checked },
-          });
+    <div className="flex gap-2 items-start mt-0.5">
+      <Toggle
+        toggleOn={!!checked?.data.value}
+        setToggleOn={() => {
+          handleToggle();
         }}
+        disabledColor1="#8C8C8C"
+        disabledColor2="#DBDBDB"
       />
-      {!checked?.data.value ? (
-        <CheckboxEmpty className="shrink-0 mt-1 text-[#595959]" />
-      ) : (
-        <CheckboxChecked className="shrink-0 mt-1 text-[#595959]" />
-      )}
-      <div className="flex flex-col gap-0">
-        <div className="text-sm font-bold text-[#595959]">
-          Show Leaflet Watermark
-        </div>
-        <div className="text-sm text-[#969696]">
-          If you like using Leaflet, consider helping us spread the word!
+      <button
+        className="flex gap-2 items-center -mt-0.5"
+        onClick={() => {
+          handleToggle();
+        }}
+      >
+        <div className="flex flex-col gap-0 items-start">
+          <div className="font-bold">Show Leaflet Watermark</div>
+          <div className="text-sm text-[#969696]">Help us spread the word!</div>
         </div>
-      </div>
-    </label>
+      </button>
+    </div>
   );
 }
 
@@ -289,15 +292,14 @@ const SamplePage = (props: {
           onClick={() => {
             props.setOpenPicker("text");
           }}
-          className=" cursor-pointer font-bold w-fit"
+          className="cursor-pointer font-bold w-fit"
         >
           Hello!
         </p>
         <small onClick={() => props.setOpenPicker("text")}>
           Welcome to{" "}
-          <span className="font-bold text-accent-contrast">Leaflet</span>.
-          It&apos;s a super easy and fun way to make, share, and collab on
-          little bits of paper
+          <span className="font-bold text-accent-contrast">Leaflet</span> — a
+          fun and easy way to make, share, and collab on little bits of paper ✨
         </small>
       </div>
     </div>
-- 
2.54.0