moved home theme into settings, adjusted menu styles

app/(home-pages)/home/Actions/AccountSettings.tsx

···
 "use client";
 
 import { ActionButton } from "components/ActionBar/ActionButton";
-import { Menu, MenuItem } from "components/Layout";
 import { mutate } from "swr";
 import { AccountSmall } from "components/Icons/AccountSmall";
 import { LogoutSmall } from "components/Icons/LogoutSmall";
+import { Popover } from "components/Popover";
+import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";
+import { SpeedyLink } from "components/SpeedyLink";
+import { GoBackSmall } from "components/Icons/GoBackSmall";
+import { useState } from "react";
+import { ThemeSetterContent } from "components/ThemeManager/ThemeSetter";
 
-// it was going have a popover with a log out button
-export const AccountSettings = () => {
+export const AccountSettings = (props: { entityID: string }) => {
+  let [state, setState] = useState<"menu" | "general" | "theme">("menu");
+
   return (
-    <Menu
+    <Popover
       asChild
+      onOpenChange={() => setState("menu")}
+      side="right"
+      align="start"
+      className={`max-w-xs w-[1000px] ${state === "theme" && "bg-white!"}`}
       trigger={<ActionButton icon=<AccountSmall /> label="Settings" />}
     >
-      <MenuItem
-        onSelect={async () => {
+      {state === "general" ? (
+        <GeneralSettings backToMenu={() => setState("menu")} />
+      ) : state === "theme" ? (
+        <AccountThemeSettings
+          entityID={props.entityID}
+          backToMenu={() => setState("menu")}
+        />
+      ) : (
+        <SettingsMenu state={state} setState={setState} />
+      )}
+    </Popover>
+  );
+};
+
+const SettingsMenu = (props: {
+  state: "menu" | "general" | "theme";
+  setState: (s: typeof props.state) => void;
+}) => {
+  let menuItemClassName =
+    "menuItem -mx-[8px] text-left flex items-center justify-between";
+
+  return (
+    <div className="flex flex-col gap-0.5">
+      <AccountSettingsHeader state={"menu"} />
+      <button
+        className={menuItemClassName}
+        type="button"
+        onClick={() => {
+          props.setState("general");
+        }}
+      >
+        Settings
+        <ArrowRightTiny />
+      </button>
+      <button
+        className={menuItemClassName}
+        type="button"
+        onClick={() => props.setState("theme")}
+      >
+        Theme
+        <ArrowRightTiny />
+      </button>
+      <SpeedyLink
+        className={menuItemClassName}
+        href="https://about.leaflet.pub/
+        "
+      >
+        About Leaflet
+        <ArrowRightTiny />
+      </SpeedyLink>
+    </div>
+  );
+};
+
+const GeneralSettings = (props: { backToMenu: () => void }) => {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <AccountSettingsHeader
+        state={"general"}
+        backToMenu={() => props.backToMenu()}
+      />
+
+      <button
+        className="flex gap-2 font-bold"
+        onClick={async () => {
           await fetch("/api/auth/logout");
           mutate("identity", null);
         }}
       >
         <LogoutSmall />
         Logout
-      </MenuItem>
-    </Menu>
+      </button>
+    </div>
+  );
+};
+const AccountThemeSettings = (props: {
+  entityID: string;
+  backToMenu: () => void;
+}) => {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <AccountSettingsHeader
+        state={"theme"}
+        backToMenu={() => props.backToMenu()}
+      />
+      <ThemeSetterContent entityID={props.entityID} home />
+    </div>
+  );
+};
+export const AccountSettingsHeader = (props: {
+  state: "menu" | "general" | "theme";
+  backToMenu?: () => void;
+}) => {
+  return (
+    <div className="flex justify-between font-bold text-secondary bg-border-light -mx-3 -mt-2 px-3 pt-2 pb-1 mb-1">
+      {props.state === "menu"
+        ? "Settings"
+        : props.state === "general"
+          ? "General"
+          : props.state === "theme"
+            ? "Publication Theme"
+            : ""}
+      {props.backToMenu && (
+        <button
+          type="button"
+          onClick={() => {
+            props.backToMenu && props.backToMenu();
+          }}
+        >
+          <GoBackSmall className="text-accent-contrast" />
+        </button>
+      )}
+    </div>
   );
 };

app/(home-pages)/home/Actions/Actions.tsx

···
   return (
     <>
       <CreateNewLeafletButton />
-      {identity ? <AccountSettings /> : <LoginActionButton />}
-      {/*<HelpPopover noShortcuts />*/}
-      <ThemePopover entityID={rootEntity} home />
+      {identity ? (
+        <AccountSettings entityID={rootEntity} />
+      ) : (
+        <LoginActionButton />
+      )}
       <HelpPopover />
     </>
   );

app/globals.css

···
   @apply rounded-md;
 }
 
+.menuItem {
+  @apply text-secondary;
+  @apply hover:text-secondary;
+  @apply data-highlighted:bg-[var(--accent-light)];
+  @apply data-highlighted:outline-none;
+  @apply hover:bg-[var(--accent-light)];
+  text-align: left;
+  font-weight: 800;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  outline: none !important;
+  cursor: pointer;
+  background-color: transparent;
+
+  :hover {
+    text-decoration: none !important;
+    background-color: rgb(var(--accent-light));
+  }
+}
+
 .pwa-padding {
   padding-top: max(calc(env(safe-area-inset-top) - 8px)) !important;
 }

app/lish/[did]/[publication]/dashboard/Actions.tsx

···
   return (
     <Popover
       asChild
+      onOpenChange={() => setState("menu")}
       side={isMobile ? "top" : "right"}
       align={isMobile ? "center" : "start"}
       className={`max-w-xs w-[1000px] ${state === "theme" && "bg-white!"}`}
···
     >
       {state === "general" ? (
         <EditPubForm
-          goBack={() => setState("menu")}
+          backToMenu={() => setState("menu")}
           loading={loading}
           setLoading={setLoading}
         />
       ) : state === "theme" ? (
         <PubThemeSetter
-          goBack={() => setState("menu")}
+          backToMenu={() => setState("menu")}
           loading={loading}
           setLoading={setLoading}
         />
···
   setLoading: (l: boolean) => void;
 }) => {
   let menuItemClassName =
-    "hover:bg-[var(--accent-light)] text-secondary hover:no-underline! rounded-md px-2 py-0.5 -mx-[8px] font-bold text-left flex items-center justify-between";
+    "menuItem -mx-[8px] text-left flex items-center justify-between";
 
   return (
     <div className="flex flex-col gap-0.5">
···
 
 export const PubSettingsHeader = (props: {
   state: "menu" | "general" | "theme";
-  goBackAction?: () => void;
+  backToMenu?: () => void;
   loading: boolean;
   setLoadingAction: (l: boolean) => void;
 }) => {
···
           <button
             type="button"
             onClick={() => {
-              props.goBackAction && props.goBackAction();
+              props.backToMenu && props.backToMenu();
             }}
           >
             <GoBackSmall className="text-accent-contrast" />

app/lish/createPub/UpdatePubForm.tsx

···
 import { PubSettingsHeader } from "../[did]/[publication]/dashboard/Actions";
 
 export const EditPubForm = (props: {
-  goBack: () => void;
+  backToMenu: () => void;
   loading: boolean;
   setLoading: (l: boolean) => void;
 }) => {
···
       <PubSettingsHeader
         loading={props.loading}
         setLoadingAction={props.setLoading}
-        goBackAction={props.goBack}
+        backToMenu={props.backToMenu}
         state={"theme"}
       />
       <div className="flex flex-col gap-3 w-[1000px] max-w-full pb-2">

components/Layout.tsx

···
               alignOffset={props.alignOffset ? props.alignOffset : undefined}
               sideOffset={4}
               collisionPadding={16}
-              className={`dropdownMenu z-20 bg-bg-page flex flex-col py-1 gap-0.5 border border-border rounded-md shadow-md ${props.className}`}
+              className={`dropdownMenu z-20 bg-bg-page flex flex-col p-1 gap-0.5 border border-border rounded-md shadow-md ${props.className}`}
             >
               {props.children}
               <DropdownMenu.Arrow
···
         props.onSelect(event);
       }}
       className={`
-        MenuItem
-        font-bold z-10 py-1 px-3
-        text-left text-secondary
+        menuItem
+        z-10 py-1! px-2!
         flex gap-2
-        data-highlighted:bg-border-light data-highlighted:text-secondary
-        hover:bg-border-light hover:text-secondary
-        outline-hidden
-        cursor-pointer
         ${props.className}
         `}
     >

components/ThemeManager/PubThemeSetter.tsx

···
   repeat: number | null;
 };
 export const PubThemeSetter = (props: {
-  goBack: () => void;
+  backToMenu: () => void;
   loading: boolean;
   setLoading: (l: boolean) => void;
 }) => {
···
         <PubSettingsHeader
           loading={props.loading}
           setLoadingAction={props.setLoading}
-          goBackAction={props.goBack}
+          backToMenu={props.backToMenu}
           state={"theme"}
         />
       </form>

components/ThemeManager/ThemeSetter.tsx

···
         align={isMobile ? "center" : "start"}
         trigger={<ActionButton icon={<PaintSmall />} label="Theme" />}
       >
-        <div className="themeSetterContent flex flex-col w-full overflow-y-scroll no-scrollbar">
-          <div className="themeBGLeaflet flex">
-            <div
-              className={`bgPicker 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">
-                <LeafletBGPicker
-                  entityID={props.entityID}
-                  thisPicker={"leaflet"}
-                  openPicker={openPicker}
-                  setOpenPicker={setOpenPicker}
-                  closePicker={() => setOpenPicker("null")}
-                  setValue={set("theme/page-background")}
-                />
-                <PageBackgroundPicker
-                  entityID={props.entityID}
-                  setValue={set("theme/card-background")}
-                  openPicker={openPicker}
-                  setOpenPicker={setOpenPicker}
-                  home={props.home}
-                />
-                <hr className=" border-[#CCCCCC]" />
-                <PageBorderHider
-                  entityID={props.entityID}
-                  openPicker={openPicker}
-                  setOpenPicker={setOpenPicker}
-                />
-              </div>
+        <ThemeSetterContent {...props} />
+      </Popover>
+    </>
+  );
+};
+
+export const ThemeSetterContent = (props: {
+  entityID: string;
+  home?: boolean;
+}) => {
+  let { rep } = useReplicache();
+  let { data: pub } = useLeafletPublicationData();
+
+  // I need to get these variables from replicache and then write them to the DB. I also need to parse them into a state that can be used here.
+  let permission = useEntitySetContext().permissions.write;
+  let leafletBGImage = useEntity(props.entityID, "theme/background-image");
+  let leafletBGRepeat = useEntity(
+    props.entityID,
+    "theme/background-image-repeat",
+  );
 
-              <SectionArrow
-                fill="white"
-                stroke="#CCCCCC"
-                className="ml-2 -mt-px"
-              />
-            </div>
-          </div>
+  let [openPicker, setOpenPicker] = useState<pickers>(
+    props.home === true ? "leaflet" : "null",
+  );
+  let set = useMemo(() => {
+    return setColorAttribute(rep, props.entityID);
+  }, [rep, props.entityID]);
 
-          <div
-            onClick={(e) => {
-              e.currentTarget === e.target && setOpenPicker("leaflet");
-            }}
-            style={{
-              backgroundImage: leafletBGImage
-                ? `url(${leafletBGImage.data.src})`
-                : undefined,
-              backgroundRepeat: leafletBGRepeat ? "repeat" : "no-repeat",
-              backgroundPosition: "center",
-              backgroundSize: !leafletBGRepeat
-                ? "cover"
-                : `calc(${leafletBGRepeat.data.value}px / 2 )`,
-            }}
-            className={`bg-bg-leaflet px-3 pt-4  pb-0 mb-2 flex flex-col gap-4 rounded-md  border border-border`}
-          >
-            <PageThemePickers
+  if (!permission) return null;
+  if (pub) return null;
+  return (
+    <div className="themeSetterContent flex flex-col w-full overflow-y-scroll no-scrollbar">
+      <div className="themeBGLeaflet flex">
+        <div className={`bgPicker 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">
+            <LeafletBGPicker
               entityID={props.entityID}
+              thisPicker={"leaflet"}
               openPicker={openPicker}
-              setOpenPicker={(pickers) => setOpenPicker(pickers)}
+              setOpenPicker={setOpenPicker}
+              closePicker={() => setOpenPicker("null")}
+              setValue={set("theme/page-background")}
             />
-            <div className="flex flex-col -gap-[6px]">
-              <div className={`flex flex-col z-10  -mb-[6px] `}>
-                <AccentPickers
-                  entityID={props.entityID}
-                  openPicker={openPicker}
-                  setOpenPicker={(pickers) => setOpenPicker(pickers)}
-                />
-                <SectionArrow
-                  fill={theme.colors["accent-2"]}
-                  stroke={theme.colors["accent-1"]}
-                  className="ml-2"
-                />
-              </div>
+            <PageBackgroundPicker
+              entityID={props.entityID}
+              setValue={set("theme/card-background")}
+              openPicker={openPicker}
+              setOpenPicker={setOpenPicker}
+              home={props.home}
+            />
+            <hr className=" border-[#CCCCCC]" />
+            <PageBorderHider
+              entityID={props.entityID}
+              openPicker={openPicker}
+              setOpenPicker={setOpenPicker}
+            />
+          </div>
 
-              <SampleButton
-                entityID={props.entityID}
-                setOpenPicker={setOpenPicker}
-              />
-            </div>
+          <SectionArrow fill="white" stroke="#CCCCCC" className="ml-2 -mt-px" />
+        </div>
+      </div>
 
-            <SamplePage
-              setOpenPicker={setOpenPicker}
-              home={props.home}
+      <div
+        onClick={(e) => {
+          e.currentTarget === e.target && setOpenPicker("leaflet");
+        }}
+        style={{
+          backgroundImage: leafletBGImage
+            ? `url(${leafletBGImage.data.src})`
+            : undefined,
+          backgroundRepeat: leafletBGRepeat ? "repeat" : "no-repeat",
+          backgroundPosition: "center",
+          backgroundSize: !leafletBGRepeat
+            ? "cover"
+            : `calc(${leafletBGRepeat.data.value}px / 2 )`,
+        }}
+        className={`bg-bg-leaflet px-3 pt-4  pb-0 mb-2 flex flex-col gap-4 rounded-md  border border-border`}
+      >
+        <PageThemePickers
+          entityID={props.entityID}
+          openPicker={openPicker}
+          setOpenPicker={(pickers) => setOpenPicker(pickers)}
+        />
+        <div className="flex flex-col -gap-[6px]">
+          <div className={`flex flex-col z-10  -mb-[6px] `}>
+            <AccentPickers
               entityID={props.entityID}
+              openPicker={openPicker}
+              setOpenPicker={(pickers) => setOpenPicker(pickers)}
+            />
+            <SectionArrow
+              fill={theme.colors["accent-2"]}
+              stroke={theme.colors["accent-1"]}
+              className="ml-2"
             />
           </div>
-          {!props.home && <WatermarkSetter entityID={props.entityID} />}
+
+          <SampleButton
+            entityID={props.entityID}
+            setOpenPicker={setOpenPicker}
+          />
         </div>
-      </Popover>
-    </>
+
+        <SamplePage
+          setOpenPicker={setOpenPicker}
+          home={props.home}
+          entityID={props.entityID}
+        />
+      </div>
+      {!props.home && <WatermarkSetter entityID={props.entityID} />}
+    </div>
   );
 };
-
 function WatermarkSetter(props: { entityID: string }) {
   let { rep } = useReplicache();
   let checked = useEntity(props.entityID, "theme/page-leaflet-watermark");