fix(webapp): match Help & Feedback popover Shortcuts and Contact us items to the other entries

The "Shortcuts" and "Contact us…" entries used Button variant="small-menu-item"
(bright, smaller text, misaligned icon) while the other entries use SideMenuItem.
Add a shared SideMenuItemButton that mirrors SideMenuItem's styling and works as
a Radix asChild dialog/sheet trigger, and use it for both entries.

Author: samejr

.server-changes/side-menu-project-and-org-menus.md

@@ -27,6 +27,9 @@ Refresh the side menu and account UI:
 - Align the organization settings and account side menus' horizontal padding
   with the main side menu, and tighten the "Personal Access Tokens" label so it
   no longer truncates.
+- Restyle the "Shortcuts" and "Contact us…" entries in the Help & Feedback
+  popover to match the other menu items (icon size/alignment, dimmed text, text
+  size).
 
 The org loader now exposes whether the RBAC and SSO plugins are installed so the
 side menu can gate the Roles and SSO items the same way the settings side menu

apps/webapp/app/components/Shortcuts.tsx

@@ -1,8 +1,8 @@
 import { KeyboardIcon } from "~/assets/icons/KeyboardIcon";
 import { useState } from "react";
 import { useShortcutKeys } from "~/hooks/useShortcutKeys";
-import { Button } from "./primitives/Buttons";
 import { Header3 } from "./primitives/Headers";
+import { SideMenuItemButton } from "./navigation/SideMenuItem";
 import { Paragraph } from "./primitives/Paragraph";
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "./primitives/SheetV3";
 import { ShortcutKey } from "./primitives/ShortcutKey";
@@ -11,19 +11,7 @@ export function Shortcuts() {
   return (
     <Sheet>
       <SheetTrigger asChild>
-        <Button
-          variant="small-menu-item"
-          LeadingIcon={KeyboardIcon}
-          leadingIconClassName="text-text-dimmed group-hover/button:text-text-bright"
-          data-action="shortcuts"
-          fullWidth
-          textAlignLeft
-          shortcut={{ modifiers: ["shift"], key: "?", enabled: false }}
-          className="gap-x-0 pl-1.5"
-          iconSpacing="gap-x-1.5"
-        >
-          Shortcuts
-        </Button>
+        <SideMenuItemButton icon={KeyboardIcon} name="Shortcuts" data-action="shortcuts" />
       </SheetTrigger>
       <ShortcutContent />
     </Sheet>

apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx

@@ -13,12 +13,11 @@ import { useRecentChangelogs } from "~/routes/resources.platform-changelogs";
 import { cn } from "~/utils/cn";
 import { Feedback } from "../Feedback";
 import { Shortcuts } from "../Shortcuts";
-import { Button } from "../primitives/Buttons";
 import { Paragraph } from "../primitives/Paragraph";
 import { Popover, PopoverContent, PopoverTrigger } from "../primitives/Popover";
 import { ShortcutKey } from "../primitives/ShortcutKey";
 import { SimpleTooltip } from "../primitives/Tooltip";
-import { SideMenuItem } from "./SideMenuItem";
+import { SideMenuItem, SideMenuItemButton } from "./SideMenuItem";
 
 export function HelpAndFeedback({
   disableShortcut = false,
@@ -125,17 +124,11 @@ export function HelpAndFeedback({
               <Shortcuts />
               <Feedback
                 button={
-                  <Button
-                    variant="small-menu-item"
-                    className="pl-2"
-                    LeadingIcon={EnvelopeIcon}
-                    leadingIconClassName="pr-1 text-text-dimmed group-hover/button:text-text-bright"
+                  <SideMenuItemButton
+                    icon={EnvelopeIcon}
+                    name="Contact us…"
                     data-action="contact-us"
-                    fullWidth
-                    textAlignLeft
-                  >
-                    Contact us…
-                  </Button>
+                  />
                 }
               />
             </div>

apps/webapp/app/components/navigation/SideMenuItem.tsx

@@ -1,4 +1,9 @@
-import { type AnchorHTMLAttributes, type ReactNode } from "react";
+import {
+  type AnchorHTMLAttributes,
+  type ButtonHTMLAttributes,
+  forwardRef,
+  type ReactNode,
+} from "react";
 import { Link } from "@remix-run/react";
 import { motion } from "framer-motion";
 import { usePathName } from "~/hooks/usePathName";
@@ -161,3 +166,33 @@ export function SideMenuItem({
     />
   );
 }
+
+/**
+ * A button styled to match {@link SideMenuItem}, for menu entries that open a
+ * dialog/sheet rather than navigate. Forwards its ref and props so it can be
+ * used as a Radix `asChild` trigger.
+ */
+export const SideMenuItemButton = forwardRef<
+  HTMLButtonElement,
+  { icon: RenderIcon; name: string } & ButtonHTMLAttributes<HTMLButtonElement>
+>(function SideMenuItemButton({ icon, name, className, type, ...props }, ref) {
+  return (
+    <button
+      ref={ref}
+      type={type ?? "button"}
+      className={cn(
+        "group/menuitem flex h-8 w-full items-center gap-2 overflow-hidden rounded pl-[0.4375rem] pr-2 text-left text-text-dimmed hover:bg-charcoal-750 hover:text-text-bright focus-custom",
+        className
+      )}
+      {...props}
+    >
+      <Icon
+        icon={icon}
+        className="size-5 shrink-0 text-text-dimmed group-hover/menuitem:text-text-bright"
+      />
+      <span className="min-w-0 select-none truncate text-[0.90625rem] font-medium tracking-[-0.01em]">
+        {name}
+      </span>
+    </button>
+  );
+});