unfied leaflet and pub theme modals, fixed text color issue in pub setting popover

+5 -5

app/lish/createPub/UpdatePubForm.tsx

··· 43 43 44 44 return ( 45 45 <form 46 - className="flex flex-col gap-3 w-full py-1" 46 + className="flex flex-col gap-3 w-[1000px] max-w-full py-1" 47 47 onSubmit={async (e) => { 48 48 if (!pubData) return; 49 49 e.preventDefault(); ··· 100 100 Publication Name 101 101 </p> 102 102 <Input 103 - className="input-with-border w-full " 103 + className="input-with-border w-full text-primary" 104 104 type="text" 105 105 id="pubName" 106 106 value={nameValue} ··· 115 115 </p> 116 116 <Input 117 117 textarea 118 - className="input-with-border w-full " 118 + className="input-with-border w-full text-primary" 119 119 rows={3} 120 120 id="pubDescription" 121 121 value={descriptionValue} ··· 274 274 console.log(props.domain, data); 275 275 276 276 return ( 277 - <div className="text-sm text-secondary relative"> 278 - {props.domain} 277 + <div className="text-sm text-secondary relative w-full "> 278 + <div className="pr-8 truncate">{props.domain}</div> 279 279 <div className="absolute right-0 top-0 bottom-0 flex justify-end items-center w-4 "> 280 280 {pending ? ( 281 281 <button

+32 -15

components/ThemeManager/PageThemeSetter.tsx

··· 1 1 import { useEntity, useReplicache } from "src/replicache"; 2 2 import { useEntitySetContext } from "components/EntitySetProvider"; 3 - import { pickers, SectionArrow } from "./ThemeSetter"; 3 + import { pickers, SectionArrow, setColorAttribute } from "./ThemeSetter"; 4 4 5 - import { PageThemePickers } from "./Pickers/PageThemePickers"; 6 - import { useState } from "react"; 5 + import { 6 + PageBackgroundPicker, 7 + PageThemePickers, 8 + } from "./Pickers/PageThemePickers"; 9 + import { useMemo, useState } from "react"; 7 10 import { theme } from "tailwind.config"; 8 11 import { ButtonPrimary } from "components/Buttons"; 9 12 import { PaintSmall } from "components/Icons/PaintSmall"; 10 13 import { AccentPickers } from "./Pickers/AccentPickers"; 14 + import Page from "twilio/lib/base/Page"; 11 15 12 16 export const PageThemeSetter = (props: { entityID: string }) => { 13 17 let { rootEntity } = useReplicache(); ··· 19 23 20 24 if (!permission) return null; 21 25 26 + let { rep } = useReplicache(); 27 + let set = useMemo(() => { 28 + return setColorAttribute(rep, props.entityID); 29 + }, [rep, props.entityID]); 30 + 22 31 return ( 23 32 <> 24 33 <div className="pageThemeSetter flex flex-row gap-2 px-3 py-1 z-10"> ··· 27 36 </div> 28 37 <ResetButton entityID={props.entityID} /> 29 38 </div> 39 + 30 40 <div 31 - className="pageThemeSetterContent bg-bg-leaflet w-80 p-3 pb-0 flex flex-col gap-2 rounded-md -mb-1" 41 + className="pageThemeSetterContent bg-bg-leaflet w-80 p-3 pb-0 flex flex-col gap-4 rounded-md -mb-1" 32 42 style={{ 33 43 backgroundImage: leafletBGImage 34 44 ? `url(${leafletBGImage.data.src})` ··· 40 50 : `calc(${leafletBGRepeat.data.value}px / 2 )`, 41 51 }} 42 52 > 43 - <AccentPickers 44 - entityID={props.entityID} 45 - openPicker={openPicker} 46 - setOpenPicker={(pickers) => setOpenPicker(pickers)} 47 - /> 48 - <div className="flex flex-col -mb-[14px] mt-4 z-10"> 53 + <div 54 + className="pageThemeBG flex flex-col gap-2 h-full text-primary bg-bg-leaflet p-2 rounded-md border border-primary shadow-[0_0_0_1px_rgb(var(--bg-page))]" 55 + style={{ backgroundColor: "rgba(var(--bg-page), 0.6)" }} 56 + > 57 + <PageBackgroundPicker 58 + entityID={props.entityID} 59 + openPicker={openPicker} 60 + setOpenPicker={(pickers) => setOpenPicker(pickers)} 61 + setValue={set("theme/page-background")} 62 + /> 63 + </div> 64 + 65 + <div className="flex flex-col z-10"> 49 66 <PageThemePickers 50 67 entityID={props.entityID} 51 68 openPicker={openPicker} 52 69 setOpenPicker={(pickers) => setOpenPicker(pickers)} 53 - /> 54 - <SectionArrow 55 - fill={theme.colors["primary"]} 56 - stroke={theme.colors["bg-page"]} 57 - className="ml-2" 58 70 /> 59 71 </div> 72 + <AccentPickers 73 + entityID={props.entityID} 74 + openPicker={openPicker} 75 + setOpenPicker={(pickers) => setOpenPicker(pickers)} 76 + /> 60 77 <SamplePage entityID={props.entityID} /> 61 78 </div> 62 79 </>

+85 -84

components/ThemeManager/Pickers/ImagePicker.tsx

··· 2 2 import { theme } from "../../../tailwind.config"; 3 3 4 4 import { Color } from "react-aria-components"; 5 + import { Input } from "components/Input"; 6 + import { Radio } from "components/Checkbox"; 5 7 6 8 import { useEntity, useReplicache } from "src/replicache"; 7 9 import { addImage } from "src/utils/addImage"; ··· 27 29 let { rep } = useReplicache(); 28 30 return ( 29 31 <> 30 - <div 31 - style={{ 32 - backgroundImage: image?.data.src 33 - ? `url(${image.data.src})` 34 - : undefined, 35 - backgroundPosition: "center", 36 - backgroundSize: "cover", 37 - }} 38 - className="themeBGImagePreview flex gap-2 place-items-center justify-center w-full h-[128px] bg-cover bg-center bg-no-repeat" 39 - > 40 - <label className="hover:cursor-pointer "> 41 - <div 42 - className="flex gap-2 rounded-md px-2 py-1 text-accent-contrast font-bold" 43 - style={{ backgroundColor: "rgba(var(--bg-page), .8" }} 32 + <div className="themeBGImageControls font-bold flex flex-col gap-1 items-center px-3"> 33 + <label htmlFor="cover" className="w-full"> 34 + <Radio 35 + radioCheckedClassName="!text-[#595959]" 36 + radioEmptyClassName="!text-[#969696]" 37 + type="radio" 38 + id="cover" 39 + name="bg-image-options" 40 + value="cover" 41 + checked={!repeat} 42 + onChange={async (e) => { 43 + if (!e.currentTarget.checked) return; 44 + if (!repeat) return; 45 + if (repeat) await rep?.mutate.retractFact({ factID: repeat.id }); 46 + }} 44 47 > 45 - <BlockImageSmall /> Change Image 46 - </div> 47 - <div className="hidden"> 48 - <ImageInput {...props} /> 49 - </div> 50 - </label> 51 - <button 52 - onClick={() => { 53 - if (image) rep?.mutate.retractFact({ factID: image.id }); 54 - if (repeat) rep?.mutate.retractFact({ factID: repeat.id }); 55 - }} 56 - > 57 - <CloseContrastSmall 58 - fill={theme.colors["accent-1"]} 59 - stroke={theme.colors["accent-2"]} 60 - /> 61 - </button> 62 - </div> 63 - <div className="themeBGImageControls font-bold flex gap-2 items-center"> 64 - {pageType !== "canvas" && ( 65 - <label htmlFor="cover" className="flex shrink-0"> 66 - <input 67 - className="appearance-none" 68 - type="radio" 69 - id="cover" 70 - name="bg-image-options" 71 - value="cover" 72 - checked={!repeat} 73 - onChange={async (e) => { 74 - if (!e.currentTarget.checked) return; 75 - if (!repeat) return; 76 - if (repeat) 77 - await rep?.mutate.retractFact({ factID: repeat.id }); 78 - }} 79 - /> 80 48 <div 81 - className={`shink-0 grow-0 w-fit border border-accent-1 rounded-md px-1 py-0.5 cursor-pointer ${!repeat ? "bg-accent-1 text-accent-2" : "bg-transparent text-accent-1"}`} 49 + className={`w-full cursor-pointer ${!repeat ? "text-[#595959]" : " text-[#969696]"}`} 82 50 > 83 51 cover 84 52 </div> 85 - </label> 86 - )} 87 - <label htmlFor="repeat" className="flex shrink-0"> 88 - <input 89 - className={`appearance-none `} 53 + </Radio> 54 + </label> 55 + <label htmlFor="repeat" className="pb-3 w-full"> 56 + <Radio 90 57 type="radio" 91 58 id="repeat" 92 59 name="bg-image-options" 93 60 value="repeat" 61 + radioCheckedClassName="!text-[#595959]" 62 + radioEmptyClassName="!text-[#969696]" 94 63 checked={!!repeat} 95 64 onChange={async (e) => { 96 65 if (!e.currentTarget.checked) return; ··· 103 72 data: { type: "number", value: 500 }, 104 73 }); 105 74 }} 106 - /> 107 - <div 108 - className={`shink-0 grow-0 w-fit z-10 border border-accent-1 rounded-md px-1 py-0.5 cursor-pointer ${repeat ? "bg-accent-1 text-accent-2" : "bg-transparent text-accent-1"}`} 109 75 > 110 - repeat 111 - </div> 76 + <div className="flex flex-col gap-2 w-full"> 77 + <div className="flex gap-2"> 78 + <div 79 + className={`shink-0 grow-0 w-fit z-10 cursor-pointer ${repeat ? "text-[#595959]" : " text-[#969696]"}`} 80 + > 81 + repeat 82 + </div> 83 + <div 84 + className={`flex font-normal ${repeat ? "text-[#969696]" : " text-[#C3C3C3]"}`} 85 + > 86 + <Input 87 + type="number" 88 + className="w-10 text-right appearance-none bg-transparent" 89 + max={3000} 90 + min={10} 91 + value={repeat ? repeat.data.value : 500} 92 + onChange={(e) => { 93 + rep?.mutate.assertFact({ 94 + entity: props.entityID, 95 + attribute: props.card 96 + ? "theme/card-background-image-repeat" 97 + : "theme/background-image-repeat", 98 + data: { 99 + type: "number", 100 + value: parseInt(e.currentTarget.value), 101 + }, 102 + }); 103 + }} 104 + />{" "} 105 + px 106 + </div> 107 + </div> 108 + <Slider.Root 109 + className={`relative grow flex items-center select-none touch-none w-full h-fit px-1 `} 110 + value={[repeat ? repeat.data.value : 500]} 111 + max={3000} 112 + min={10} 113 + step={10} 114 + onValueChange={(value) => { 115 + rep?.mutate.assertFact({ 116 + entity: props.entityID, 117 + attribute: props.card 118 + ? "theme/card-background-image-repeat" 119 + : "theme/background-image-repeat", 120 + data: { type: "number", value: value[0] }, 121 + }); 122 + }} 123 + > 124 + <Slider.Track 125 + className={`${repeat ? "bg-[#595959]" : " bg-[#C3C3C3]"} relative grow rounded-full h-[3px]`} 126 + ></Slider.Track> 127 + <Slider.Thumb 128 + className={` 129 + flex w-4 h-4 rounded-full border-2 border-white cursor-pointer 130 + ${repeat ? "bg-[#595959]" : " bg-[#C3C3C3] "} 131 + ${repeat && "shadow-[0_0_0_1px_#8C8C8C,_inset_0_0_0_1px_#8C8C8C]"} `} 132 + aria-label="Volume" 133 + /> 134 + </Slider.Root> 135 + </div> 136 + </Radio> 112 137 </label> 113 - {(repeat || pageType === "canvas") && ( 114 - <Slider.Root 115 - className="relative grow flex items-center select-none touch-none w-full h-fit" 116 - value={[repeat?.data.value || 500]} 117 - max={3000} 118 - min={10} 119 - step={10} 120 - onValueChange={(value) => { 121 - rep?.mutate.assertFact({ 122 - entity: props.entityID, 123 - attribute: props.card 124 - ? "theme/card-background-image-repeat" 125 - : "theme/background-image-repeat", 126 - data: { type: "number", value: value[0] }, 127 - }); 128 - }} 129 - > 130 - <Slider.Track className="bg-accent-1 relative grow rounded-full h-[3px]"></Slider.Track> 131 - <Slider.Thumb 132 - className="flex w-4 h-4 rounded-full border-2 border-white bg-accent-1 shadow-[0_0_0_1px_#8C8C8C,_inset_0_0_0_1px_#8C8C8C] cursor-pointer" 133 - aria-label="Volume" 134 - /> 135 - </Slider.Root> 136 - )} 137 138 </div> 138 139 </> 139 140 );

+24 -12

components/ThemeManager/Pickers/LeafletBGPicker.tsx

··· 20 20 import { Separator } from "components/Layout"; 21 21 import { onMouseDown } from "src/utils/iosInputMouseDown"; 22 22 import { BlockImageSmall } from "components/Icons/BlockImageSmall"; 23 + import { DeleteSmall } from "components/Icons/DeleteSmall"; 23 24 24 25 export const LeafletBGPicker = (props: { 25 26 entityID: string; ··· 30 31 setValue: (c: Color) => void; 31 32 }) => { 32 33 let bgImage = useEntity(props.entityID, "theme/background-image"); 34 + let bgRepeat = useEntity(props.entityID, "theme/background-image-repeat"); 33 35 let bgColor = useColorAttribute(props.entityID, "theme/page-background"); 34 36 let open = props.openPicker == props.thisPicker; 35 37 let { rep } = useReplicache(); ··· 93 95 )} 94 96 </div> 95 97 </div> 96 - <label className="hover:cursor-pointer h-fit"> 97 - <div className={"text-[#8C8C8C] hover:text-[#0000FF]"}> 98 - <BlockImageSmall /> 99 - </div> 100 - <div className="hidden"> 101 - <ImageInput 102 - {...props} 103 - onChange={() => { 104 - props.setOpenPicker(props.thisPicker); 98 + <div className="flex gap-1 justify-end grow text-[#969696]"> 99 + {bgImage && ( 100 + <button 101 + onClick={() => { 102 + if (bgImage) rep?.mutate.retractFact({ factID: bgImage.id }); 103 + if (bgRepeat) rep?.mutate.retractFact({ factID: bgRepeat.id }); 105 104 }} 106 - /> 107 - </div> 108 - </label> 105 + > 106 + <DeleteSmall /> 107 + </button> 108 + )} 109 + <label> 110 + <BlockImageSmall /> 111 + <div className="hidden"> 112 + <ImageInput 113 + {...props} 114 + onChange={() => { 115 + props.setOpenPicker(props.thisPicker); 116 + }} 117 + /> 118 + </div> 119 + </label> 120 + </div> 109 121 </div> 110 122 {open && ( 111 123 <div className="bgImageAndColorPicker w-full flex flex-col gap-2 ">

+100 -63

components/ThemeManager/Pickers/PageThemePickers.tsx

··· 24 24 import { BlockImageSmall } from "components/Icons/BlockImageSmall"; 25 25 import { Replicache } from "replicache"; 26 26 import { CanvasBackgroundPattern } from "components/Canvas"; 27 + import { Toggle } from "components/Toggle"; 28 + import { DeleteSmall } from "components/Icons/DeleteSmall"; 27 29 28 30 export const PageThemePickers = (props: { 29 31 entityID: string; ··· 37 39 38 40 let pageType = useEntity(props.entityID, "page/type")?.data.value || "doc"; 39 41 let primaryValue = useColorAttribute(props.entityID, "theme/primary"); 40 - let pageBackgroundValue = useColorAttribute( 41 - props.entityID, 42 - "theme/card-background", 43 - ); 44 - let pageBGImage = useEntity(props.entityID, "theme/card-background-image"); 45 - let pageBorderHidden = useEntity(props.entityID, "theme/card-border-hidden"); 46 42 47 43 return ( 48 44 <div ··· 55 51 <hr className="border-border-light w-full" /> 56 52 </> 57 53 )} 58 - {pageBGImage && pageBGImage !== null && ( 59 - <PageBackgroundPicker 60 - entityID={props.entityID} 61 - setValue={set("theme/card-background")} 62 - openPicker={props.openPicker} 63 - setOpenPicker={props.setOpenPicker} 64 - /> 65 - )} 66 54 <PageTextPicker 67 55 value={primaryValue} 68 56 setValue={set("theme/primary")} 69 57 openPicker={props.openPicker} 70 58 setOpenPicker={props.setOpenPicker} 71 59 /> 72 - <hr className="border-border-light" /> 73 - <PageBorderHider entityID={props.entityID} /> 74 60 </div> 75 61 ); 76 62 }; ··· 100 86 )} 101 87 <div className="relative"> 102 88 <PageBackgroundColorPicker 103 - disabled={pageBorderHidden?.data.value} 89 + disabled={pageBorderHidden?.data.value && !pageBGImage} 104 90 label={pageBGImage && pageBGImage !== null ? "Menus" : "Page"} 105 91 value={pageValue} 106 92 setValue={props.setValue} 107 93 thisPicker={"page"} 108 94 openPicker={props.openPicker} 109 95 setOpenPicker={props.setOpenPicker} 96 + alpha 110 97 /> 111 98 {(pageBGImage === null || !pageBGImage) && ( 112 99 <label 113 100 className={` 114 - text-primary hover:cursor-pointer shrink-0 101 + hover:cursor-pointer text-[#969696] shrink-0 115 102 absolute top-0 right-0 116 103 `} 117 104 > ··· 165 152 setValue: (c: Color) => void; 166 153 }) => { 167 154 let bgImage = useEntity(props.entityID, "theme/card-background-image"); 155 + let bgRepeat = useEntity( 156 + props.entityID, 157 + "theme/card-background-image-repeat", 158 + ); 168 159 let bgColor = useColorAttribute(props.entityID, "theme/card-background"); 169 160 let bgAlpha = 170 161 useEntity(props.entityID, "theme/card-background-image-opacity")?.data ··· 187 178 props.setOpenPicker(props.thisPicker); 188 179 } 189 180 }} 190 - className="flex gap-2 items-center disabled:text-tertiary" 181 + className="flex gap-2 items-center disabled:text-[#969696]" 191 182 > 192 183 <ColorSwatch 193 184 color={bgColor} ··· 201 192 }} 202 193 /> 203 194 <strong 204 - className={`${props.disabled ? "text-tertiary" : "text-primary "}`} 195 + className={`${props.disabled ? "text-[#969696]" : " text-[#272727] "}`} 205 196 > 206 - BG Image 197 + Page 207 198 </strong> 199 + <div className="">Image</div> 208 200 </button> 209 201 210 202 <SpectrumColorPicker ··· 218 210 }); 219 211 }} 220 212 > 221 - <Separator classname="h-5 my-1" /> 213 + <Separator classname="!h-4 my-1 !border-[#C3C3C3]" /> 222 214 <ColorField className="w-fit pl-[6px]" channel="alpha"> 223 215 <Input 224 216 disabled={props.disabled} ··· 234 226 e.currentTarget.blur(); 235 227 } else return; 236 228 }} 237 - className={`w-[48px] bg-transparent outline-none disabled:text-tertiary`} 229 + className={`w-[48px] bg-transparent outline-none disabled:text-[#969696]`} 238 230 /> 239 231 </ColorField> 240 232 </SpectrumColorPicker> 233 + <div className="flex gap-1 justify-end grow text-[#969696]"> 234 + <button 235 + onClick={() => { 236 + if (bgImage) rep?.mutate.retractFact({ factID: bgImage.id }); 237 + if (bgRepeat) rep?.mutate.retractFact({ factID: bgRepeat.id }); 238 + }} 239 + > 240 + <DeleteSmall /> 241 + </button> 242 + <label> 243 + <BlockImageSmall /> 244 + <div className="hidden"> 245 + <ImageInput 246 + entityID={props.entityID} 247 + onChange={() => props.setOpenPicker("page-background-image")} 248 + card 249 + /> 250 + </div> 251 + </label> 252 + </div> 241 253 </div> 242 254 {open && ( 243 255 <div className="pageImagePicker flex flex-col gap-2"> ··· 246 258 card 247 259 setValue={props.setValue} 248 260 /> 249 - 250 - <SpectrumColorPicker 251 - value={alphaColor} 252 - onChange={(c) => { 253 - let alpha = c.getChannelValue("alpha"); 254 - rep?.mutate.assertFact({ 255 - entity: props.entityID, 256 - attribute: "theme/card-background-image-opacity", 257 - data: { type: "number", value: alpha }, 258 - }); 259 - }} 260 - > 261 - <ColorSlider 262 - colorSpace="hsb" 263 - className="w-full mt-1 rounded-full" 264 - style={{ 265 - backgroundImage: `url(/transparent-bg.png)`, 266 - backgroundRepeat: "repeat", 267 - backgroundSize: "8px", 261 + <div className="flex flex-col gap-2 pr-2 pl-8 -mt-2 mb-2"> 262 + <hr className="border-[#DBDBDB]" /> 263 + <SpectrumColorPicker 264 + value={alphaColor} 265 + onChange={(c) => { 266 + let alpha = c.getChannelValue("alpha"); 267 + rep?.mutate.assertFact({ 268 + entity: props.entityID, 269 + attribute: "theme/card-background-image-opacity", 270 + data: { type: "number", value: alpha }, 271 + }); 268 272 }} 269 - channel="alpha" 270 273 > 271 - <SliderTrack className="h-2 w-full rounded-md"> 272 - <ColorThumb className={`${thumbStyle} mt-[4px]`} /> 273 - </SliderTrack> 274 - </ColorSlider> 275 - </SpectrumColorPicker> 274 + <ColorSlider 275 + colorSpace="hsb" 276 + className="w-full mt-1 rounded-full" 277 + style={{ 278 + backgroundImage: `url(/transparent-bg.png)`, 279 + backgroundRepeat: "repeat", 280 + backgroundSize: "8px", 281 + }} 282 + channel="alpha" 283 + > 284 + <SliderTrack className="h-2 w-full rounded-md"> 285 + <ColorThumb className={`${thumbStyle} mt-[4px]`} /> 286 + </SliderTrack> 287 + </ColorSlider> 288 + </SpectrumColorPicker> 289 + </div> 276 290 </div> 277 291 )} 278 292 </> ··· 349 363 ); 350 364 }; 351 365 352 - export const PageBorderHider = (props: { entityID: string }) => { 366 + export const PageBorderHider = (props: { 367 + entityID: string; 368 + setOpenPicker: (p: pickers) => void; 369 + openPicker: pickers; 370 + }) => { 353 371 let { rep, rootEntity } = useReplicache(); 354 372 let rootPageBorderHidden = useEntity(rootEntity, "theme/card-border-hidden"); 355 373 let entityPageBorderHidden = useEntity( ··· 359 377 let pageBorderHidden = 360 378 (entityPageBorderHidden || rootPageBorderHidden)?.data.value || false; 361 379 380 + function handleToggle() { 381 + rep?.mutate.assertFact({ 382 + entity: props.entityID, 383 + attribute: "theme/card-border-hidden", 384 + data: { type: "boolean", value: !pageBorderHidden }, 385 + }); 386 + 387 + (pageBorderHidden && props.openPicker === "page") || 388 + (props.openPicker === "page-background-image" && 389 + props.setOpenPicker("null")); 390 + } 391 + 362 392 return ( 363 393 <> 364 - <Checkbox 365 - small 366 - className="pl-[6px] !gap-3" 367 - checked={pageBorderHidden} 368 - onChange={(e) => { 369 - rep?.mutate.assertFact({ 370 - entity: props.entityID, 371 - attribute: "theme/card-border-hidden", 372 - data: { type: "boolean", value: !pageBorderHidden }, 373 - }); 374 - }} 375 - > 376 - No Page Borders 377 - </Checkbox> 394 + <div className="flex gap-2 items-center"> 395 + <Toggle 396 + toggleOn={!pageBorderHidden} 397 + setToggleOn={() => { 398 + handleToggle(); 399 + }} 400 + disabledColor1="#8C8C8C" 401 + disabledColor2="#DBDBDB" 402 + /> 403 + <button 404 + className="flex gap-2 items-center" 405 + onClick={() => { 406 + handleToggle(); 407 + }} 408 + > 409 + <div className="font-bold">Page Background</div> 410 + <div className="italic text-[#8C8C8C]"> 411 + {pageBorderHidden ? "hidden" : ""} 412 + </div> 413 + </button> 414 + </div> 378 415 </> 379 416 ); 380 417 };

+8 -62

components/ThemeManager/PubPickers/PubBackgroundPickers.tsx

··· 99 99 toggleOn={props.hasPageBackground} 100 100 setToggleOn={() => { 101 101 props.setHasPageBackground(!props.hasPageBackground); 102 - props.hasPageBackground && props.setOpenPicker("null"); 102 + props.hasPageBackground && 103 + props.openPicker === "page" && 104 + props.setOpenPicker("null"); 103 105 }} 104 106 disabledColor1="#8C8C8C" 105 107 disabledColor2="#DBDBDB" ··· 162 164 <strong className={` text-[#595959]`}>Background</strong> 163 165 <div className="italic text-[#8C8C8C]">image</div> 164 166 </button> 165 - <div className="flex gap-1"> 167 + <div className="flex gap-1 text-[#8C8C8C]"> 168 + <button onClick={() => props.setBgImage(null)}> 169 + <DeleteSmall /> 170 + </button> 166 171 <label className="hover:cursor-pointer "> 167 - <div className="flex gap-2 rounded-md text-[#8C8C8C] "> 168 - <BlockImageSmall /> 169 - </div> 172 + <BlockImageSmall /> 170 173 <div className="hidden"> 171 174 <input 172 175 type="file" ··· 190 193 /> 191 194 </div> 192 195 </label> 193 - <button 194 - className="text-[#8C8C8C]" 195 - onClick={() => props.setBgImage(null)} 196 - > 197 - <DeleteSmall /> 198 - </button> 199 196 </div> 200 197 </div> 201 198 {open && ( ··· 216 213 }) => { 217 214 return ( 218 215 <> 219 - {/* <div 220 - style={{ 221 - backgroundImage: props.bgImage 222 - ? `url(${props.bgImage.src})` 223 - : undefined, 224 - backgroundPosition: "center", 225 - backgroundSize: "cover", 226 - }} 227 - className="themeBGImagePreview flex gap-2 place-items-center justify-center w-full h-[128px] bg-cover bg-center bg-no-repeat" 228 - > 229 - <label className="hover:cursor-pointer "> 230 - <div 231 - className="flex gap-2 rounded-md px-2 py-1 text-accent-contrast font-bold" 232 - style={{ backgroundColor: "rgba(var(--bg-page), .8" }} 233 - > 234 - <BlockImageSmall /> Change Image 235 - </div> 236 - <div className="hidden"> 237 - <input 238 - type="file" 239 - accept="image/*" 240 - hidden 241 - onChange={async (e) => { 242 - let file = e.currentTarget.files?.[0]; 243 - if (file) { 244 - const reader = new FileReader(); 245 - reader.onload = (e) => { 246 - if (!props.bgImage) return; 247 - props.setBgImage({ 248 - ...props.bgImage, 249 - src: e.target?.result as string, 250 - file, 251 - }); 252 - }; 253 - reader.readAsDataURL(file); 254 - } 255 - }} 256 - /> 257 - </div> 258 - </label> 259 - <button 260 - onClick={() => { 261 - props.setBgImage(null); 262 - }} 263 - > 264 - <CloseContrastSmall 265 - fill={theme.colors["accent-1"]} 266 - stroke={theme.colors["accent-2"]} 267 - /> 268 - </button> 269 - </div> */} 270 216 <div className="themeBGImageControls font-bold flex flex-col gap-1 items-center px-3"> 271 217 <label htmlFor="cover" className="w-full"> 272 218 <Radio

+36 -26

components/ThemeManager/ThemeSetter.tsx

··· 5 5 import { Color } from "react-aria-components"; 6 6 7 7 import { LeafletBGPicker } from "./Pickers/LeafletBGPicker"; 8 - import { PageThemePickers } from "./Pickers/PageThemePickers"; 8 + import { 9 + PageBackgroundPicker, 10 + PageBorderHider, 11 + PageThemePickers, 12 + } from "./Pickers/PageThemePickers"; 9 13 import { useMemo, useState } from "react"; 10 14 import { ReplicacheMutators, useEntity, useReplicache } from "src/replicache"; 11 15 import { Replicache } from "replicache"; ··· 87 91 closePicker={() => setOpenPicker("null")} 88 92 setValue={set("theme/page-background")} 89 93 /> 94 + <PageBackgroundPicker 95 + entityID={props.entityID} 96 + setValue={set("theme/card-background")} 97 + openPicker={openPicker} 98 + setOpenPicker={setOpenPicker} 99 + /> 100 + <hr className=" border-[#CCCCCC]" /> 101 + <PageBorderHider 102 + entityID={props.entityID} 103 + openPicker={openPicker} 104 + setOpenPicker={setOpenPicker} 105 + /> 90 106 </div> 91 107 92 108 <SectionArrow ··· 111 127 ? "cover" 112 128 : `calc(${leafletBGRepeat.data.value}px / 2 )`, 113 129 }} 114 - className={`bg-bg-leaflet p-3 mb-2 flex flex-col rounded-md border border-border pb-0`} 130 + className={`bg-bg-leaflet px-3 pt-4 pb-0 mb-2 flex flex-col gap-4 rounded-md border border-border`} 115 131 > 116 - <div className={`flex flex-col z-10 mt-4 -mb-[6px] `}> 117 - <AccentPickers 118 - entityID={props.entityID} 119 - openPicker={openPicker} 120 - setOpenPicker={(pickers) => setOpenPicker(pickers)} 121 - /> 122 - <SectionArrow 123 - fill={theme.colors["accent-2"]} 124 - stroke={theme.colors["accent-1"]} 125 - className="ml-2" 126 - /> 127 - </div> 128 - 129 - <SampleButton 132 + <PageThemePickers 130 133 entityID={props.entityID} 131 - setOpenPicker={setOpenPicker} 134 + openPicker={openPicker} 135 + setOpenPicker={(pickers) => setOpenPicker(pickers)} 132 136 /> 137 + <div className="flex flex-col -gap-[6px]"> 138 + <div className={`flex flex-col z-10 -mb-[6px] `}> 139 + <AccentPickers 140 + entityID={props.entityID} 141 + openPicker={openPicker} 142 + setOpenPicker={(pickers) => setOpenPicker(pickers)} 143 + /> 144 + <SectionArrow 145 + fill={theme.colors["accent-2"]} 146 + stroke={theme.colors["accent-1"]} 147 + className="ml-2" 148 + /> 149 + </div> 133 150 134 - <div className="flex flex-col mt-8 -mb-[6px] z-10"> 135 - <PageThemePickers 151 + <SampleButton 136 152 entityID={props.entityID} 137 - openPicker={openPicker} 138 - setOpenPicker={(pickers) => setOpenPicker(pickers)} 139 - /> 140 - <SectionArrow 141 - fill={theme.colors["primary"]} 142 - stroke={theme.colors["bg-page"]} 143 - className=" ml-2" 153 + setOpenPicker={setOpenPicker} 144 154 /> 145 155 </div> 146 156

Configure Feed

Configure Feed