a tool for shared writing and social publishing
update WatermarkSetter to use Toggle
+30
-28
+30
-28
components/ThemeManager/ThemeSetter.tsx
+30
-28
components/ThemeManager/ThemeSetter.tsx
···
23
23
import { AccentPickers } from "./Pickers/AccentPickers";
24
24
import { useLeafletPublicationData } from "components/PageSWRDataProvider";
25
25
import { useIsMobile } from "src/hooks/isMobile";
26
+
import { Toggle } from "components/Toggle";
26
27
27
28
export type pickers =
28
29
| "null"
···
175
176
function WatermarkSetter(props: { entityID: string }) {
176
177
let { rep } = useReplicache();
177
178
let checked = useEntity(props.entityID, "theme/page-leaflet-watermark");
179
+
180
+
function handleToggle() {
181
+
rep?.mutate.assertFact({
182
+
entity: props.entityID,
183
+
attribute: "theme/page-leaflet-watermark",
184
+
data: { type: "boolean", value: !checked?.data.value },
185
+
});
186
+
}
178
187
return (
179
-
<label className="px-3 pb-3 flex gap-2 items-start cursor-pointer">
180
-
<input
181
-
type="checkbox"
182
-
checked={!!checked?.data.value}
183
-
className="hidden"
184
-
onChange={(e) => {
185
-
rep?.mutate.assertFact({
186
-
entity: props.entityID,
187
-
attribute: "theme/page-leaflet-watermark",
188
-
data: { type: "boolean", value: e.currentTarget.checked },
189
-
});
188
+
<div className="flex gap-2 items-start mt-0.5">
189
+
<Toggle
190
+
toggleOn={!!checked?.data.value}
191
+
setToggleOn={() => {
192
+
handleToggle();
190
193
}}
194
+
disabledColor1="#8C8C8C"
195
+
disabledColor2="#DBDBDB"
191
196
/>
192
-
{!checked?.data.value ? (
193
-
<CheckboxEmpty className="shrink-0 mt-1 text-[#595959]" />
194
-
) : (
195
-
<CheckboxChecked className="shrink-0 mt-1 text-[#595959]" />
196
-
)}
197
-
<div className="flex flex-col gap-0">
198
-
<div className="text-sm font-bold text-[#595959]">
199
-
Show Leaflet Watermark
197
+
<button
198
+
className="flex gap-2 items-center -mt-0.5"
199
+
onClick={() => {
200
+
handleToggle();
201
+
}}
202
+
>
203
+
<div className="flex flex-col gap-0 items-start">
204
+
<div className="font-bold">Show Leaflet Watermark</div>
205
+
<div className="text-sm text-[#969696]">Help us spread the word!</div>
200
206
</div>
201
-
<div className="text-sm text-[#969696]">
202
-
If you like using Leaflet, consider helping us spread the word!
203
-
</div>
204
-
</div>
205
-
</label>
207
+
</button>
208
+
</div>
206
209
);
207
210
}
208
211
···
289
292
onClick={() => {
290
293
props.setOpenPicker("text");
291
294
}}
292
-
className=" cursor-pointer font-bold w-fit"
295
+
className="cursor-pointer font-bold w-fit"
293
296
>
294
297
Hello!
295
298
</p>
296
299
<small onClick={() => props.setOpenPicker("text")}>
297
300
Welcome to{" "}
298
-
<span className="font-bold text-accent-contrast">Leaflet</span>.
299
-
It's a super easy and fun way to make, share, and collab on
300
-
little bits of paper
301
+
<span className="font-bold text-accent-contrast">Leaflet</span> — a
302
+
fun and easy way to make, share, and collab on little bits of paper ✨
301
303
</small>
302
304
</div>
303
305
</div>