From 70d2f41cf14c42a25172b8ed8a1c2a9b29de10cc Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Mon, 12 May 2025 20:57:45 -0400
Subject: [PATCH 1/2] simplified spacing and height issues

---
 components/ActionBar/ActionButton.tsx | 8 ++++----
 components/ActionBar/Footer.tsx       | 4 ++--
 components/HomeButton.tsx             | 2 +-
 components/Toolbar/index.tsx          | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/ActionBar/ActionButton.tsx b/components/ActionBar/ActionButton.tsx
index 7f100c50..7195c88d 100644
--- a/components/ActionBar/ActionButton.tsx
+++ b/components/ActionBar/ActionButton.tsx
@@ -37,13 +37,13 @@ export const ActionButton = forwardRef<
       actionButton relative font-bold
       rounded-md border
       flex gap-2 items-center sm:justify-start justify-center
-      p-1 sm:mr-0 last:mr-0 first:mr-2 sm:first:mr-0
+      p-1 sm:mx-0
       ${
         props.primary
-          ? "w-full bg-accent-1 border-accent-1 text-accent-2 transparent-outline sm:hover:outline-accent-contrast focus:outline-accent-1 outline-offset-1 mr-2"
+          ? "w-full bg-accent-1 border-accent-1 text-accent-2 transparent-outline sm:hover:outline-accent-contrast focus:outline-accent-1 outline-offset-1 mx-1 first:ml-0"
           : props.secondary
-            ? "sm:w-full w-max bg-bg-page border-accent-contrast text-accent-contrast transparent-outline focus:outline-accent-contrast sm:hover:outline-accent-contrast outline-offset-1 mr-2"
-            : "sm:w-full w-max border-transparent text-accent-1 sm:hover:border-accent-1 mr-1"
+            ? "sm:w-full w-max bg-bg-page border-accent-contrast text-accent-contrast transparent-outline focus:outline-accent-contrast sm:hover:outline-accent-contrast outline-offset-1 mx-1 first:ml-0"
+            : "sm:w-full w-max border-transparent text-accent-1 sm:hover:border-accent-1"
       }
       `}
     >
diff --git a/components/ActionBar/Footer.tsx b/components/ActionBar/Footer.tsx
index 769ed138..e284c521 100644
--- a/components/ActionBar/Footer.tsx
+++ b/components/ActionBar/Footer.tsx
@@ -8,8 +8,8 @@ export function Footer(props: { children?: React.ReactNode }) {
         actionFooter touch-none
         w-full z-10
         px-2 pt-1 pwa-padding-bottom
-        flex justify-start
-        h-[calc(45px+var(--safe-padding-bottom))]
+        flex justify-start gap-1
+        h-[calc(38px+var(--safe-padding-bottom))]
         bg-[rgba(var(--bg-page),0.5)] border-top border-bg-page`}
     >
       {props.children}
diff --git a/components/HomeButton.tsx b/components/HomeButton.tsx
index 2facf8f3..fb0bc650 100644
--- a/components/HomeButton.tsx
+++ b/components/HomeButton.tsx
@@ -19,7 +19,7 @@ export function HomeButton() {
         <Link
           href="/home"
           prefetch
-          className="hover:no-underline first:mr-2"
+          className="hover:no-underline"
           style={{ textDecorationLine: "none !important" }}
         >
           <ActionButton icon={<HomeSmall />} label="Go Home" />
diff --git a/components/Toolbar/index.tsx b/components/Toolbar/index.tsx
index 18e79d1f..d0a9544f 100644
--- a/components/Toolbar/index.tsx
+++ b/components/Toolbar/index.tsx
@@ -85,7 +85,7 @@ export const Toolbar = (props: { pageID: string; blockID: string }) => {
     <Tooltip.Provider>
       <div
         className={`toolbar flex gap-2 items-center justify-between w-full
-        ${isMobile ? "h-[calc(21px+var(--safe-padding-bottom))]" : "h-[26px]"}`}
+        ${isMobile ? "h-[calc(15px+var(--safe-padding-bottom))]" : "h-[26px]"}`}
       >
         <div className="toolbarOptions flex gap-1 sm:gap-[6px] items-center grow">
           {toolbarState === "default" ? (
-- 
2.51.2


From e28ca260141cad1b26c06dfe0c29d8a634086b66 Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Tue, 13 May 2025 21:53:02 -0400
Subject: [PATCH 2/2] fix share button, home button, and secondary button

---
 components/Buttons.tsx    |  9 +++++----
 components/HomeButton.tsx |  8 ++++----
 components/Layout.tsx     | 11 ++++++++++-
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/components/Buttons.tsx b/components/Buttons.tsx
index d86984b2..9dc29742 100644
--- a/components/Buttons.tsx
+++ b/components/Buttons.tsx
@@ -68,7 +68,7 @@ export const ButtonSecondary = forwardRef<
   } = props;
   return (
     <button
-      {...props}
+      {...buttonProps}
       ref={ref}
       className={`m-0 h-max
         ${fullWidth ? "w-full" : fullWidthOnMobile ? "w-full sm:w-max" : "w-max"}
@@ -96,18 +96,19 @@ export const ButtonTertiary = forwardRef<
     compact?: boolean;
   } & ButtonProps
 >((props, ref) => {
+  let { fullWidth, children, compact, ...buttonProps } = props;
   return (
     <button
-      {...props}
+      {...buttonProps}
       ref={ref}
-      className={`m-0 h-max ${props.fullWidth ? "w-full" : "w-max"}  ${props.compact ? "px-0" : "px-1"}
+      className={`m-0 h-max ${fullWidth ? "w-full" : "w-max"}  ${compact ? "px-0" : "px-1"}
   bg-transparent text-base font-bold text-accent-contrast
   flex gap-2 items-center justify-center shrink-0
   hover:underline disabled:text-border
   ${props.className}
 `}
     >
-      {props.children}
+      {children}
     </button>
   );
 });
diff --git a/components/HomeButton.tsx b/components/HomeButton.tsx
index fb0bc650..a90f433c 100644
--- a/components/HomeButton.tsx
+++ b/components/HomeButton.tsx
@@ -42,7 +42,7 @@ const AddToHomeButton = (props: {}) => {
   )
     return null;
   return (
-    <button
+    <ActionButton
       onClick={async (e) => {
         await addLeafletToHome(permission_token.id);
         mutate((identity) => {
@@ -66,8 +66,8 @@ const AddToHomeButton = (props: {}) => {
           text: "Leaflet added to your home!",
         });
       }}
-    >
-      <ActionButton icon={<AddToHomeSmall />} label="Add to Home" />
-    </button>
+      icon={<AddToHomeSmall />}
+      label="Add to Home"
+    />
   );
 };
diff --git a/components/Layout.tsx b/components/Layout.tsx
index 111a7422..786f556b 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -2,6 +2,8 @@ import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { theme } from "tailwind.config";
 import { NestedCardThemeProvider } from "./ThemeManager/ThemeProvider";
 import { PopoverArrow } from "./Icons/PopoverArrow";
+import { PopoverOpenContext } from "./Popover";
+import { useState } from "react";
 
 export const Separator = (props: { classname?: string }) => {
   return (
@@ -20,8 +22,15 @@ export const Menu = (props: {
   onOpenChange?: (o: boolean) => void;
   asChild?: boolean;
 }) => {
+  let [open, setOpen] = useState(props.open || false);
   return (
-    <DropdownMenu.Root onOpenChange={props.onOpenChange} open={props.open}>
+    <DropdownMenu.Root
+      onOpenChange={(o) => {
+        setOpen(o);
+        props.onOpenChange?.(o);
+      }}
+      open={props.open}
+    >
       <DropdownMenu.Trigger asChild={props.asChild}>
         {props.trigger}
       </DropdownMenu.Trigger>
-- 
2.51.2