fix(webapp): light theme polish for query, apikeys, alerts, regions, billing

- white query editor and apikeys accordion surfaces
- white Cancel and Contact us buttons
- drop the doubled hover ring on the regions suggest button
- route the section-header menu through the shared ellipsis primitive

Author: kathiekiwi

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

@@ -1,8 +1,7 @@
 import { useNavigation } from "@remix-run/react";
 import { useEffect, useState } from "react";
 import { motion } from "framer-motion";
-import { Popover, PopoverContent, PopoverCustomTrigger } from "../primitives/Popover";
-import { EllipsisHorizontalIcon } from "@heroicons/react/20/solid";
+import { Popover, PopoverContent, PopoverEllipseTrigger } from "../primitives/Popover";
 
 export function SideMenuHeader({
   title,
@@ -30,7 +29,7 @@ export function SideMenuHeader({
 
   return (
     <motion.div
-      className="group flex h-4 items-center justify-between overflow-hidden pl-1.5"
+      className="group/side-header flex h-4 items-center justify-between overflow-hidden pl-1.5"
       initial={false}
       animate={{
         opacity: hasCollapsedTitle ? 1 : isCollapsed ? 0 : 1,
@@ -53,9 +52,12 @@ export function SideMenuHeader({
       </h2>
       {children !== undefined ? (
         <Popover onOpenChange={(open) => setHeaderMenuOpen(open)} open={isHeaderMenuOpen}>
-          <PopoverCustomTrigger className="p-1">
-            <EllipsisHorizontalIcon className="h-4 w-4 text-text-faint transition group-hover:text-text-bright" />
-          </PopoverCustomTrigger>
+          <PopoverEllipseTrigger
+            isOpen={isHeaderMenuOpen}
+            variant="ghost"
+            orientation="horizontal"
+            className="group-hover/side-header:text-text-bright"
+          />
           <PopoverContent
             className="min-w-max overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
             align="start"

apps/webapp/app/components/primitives/Popover.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { CheckIcon } from "@heroicons/react/20/solid";
-import { EllipsisVerticalIcon } from "@heroicons/react/24/solid";
+import { EllipsisHorizontalIcon, EllipsisVerticalIcon } from "@heroicons/react/24/solid";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Link } from "@remix-run/react";
 import * as React from "react";
@@ -279,20 +279,29 @@ const popoverVerticalEllipseVariants = {
       "size-6 rounded border border-border-bright bg-secondary text-text-bright hover:bg-surface-control hover:border-border-brighter",
     icon: "size-4",
   },
+  // No box/background — the icon inherits the trigger's text color, so callers
+  // can drive brightening from a parent hover (e.g. a section header).
+  ghost: {
+    trigger: "p-1 text-text-faint hover:text-text-bright",
+    icon: "size-4",
+  },
 } as const;
 
 type PopoverVerticalEllipseVariant = keyof typeof popoverVerticalEllipseVariants;
 
-function PopoverVerticalEllipseTrigger({
+function PopoverEllipseTrigger({
   isOpen,
   variant = "minimal",
+  orientation = "vertical",
   className,
   ...props
 }: {
   isOpen?: boolean;
   variant?: PopoverVerticalEllipseVariant;
+  orientation?: "vertical" | "horizontal";
 } & React.ComponentPropsWithoutRef<typeof PopoverTrigger>) {
   const styles = popoverVerticalEllipseVariants[variant];
+  const Icon = orientation === "horizontal" ? EllipsisHorizontalIcon : EllipsisVerticalIcon;
   return (
     <PopoverTrigger
       {...props}
@@ -302,18 +311,22 @@ function PopoverVerticalEllipseTrigger({
         className
       )}
     >
-      <EllipsisVerticalIcon className={cn(styles.icon, "transition")} />
+      <Icon className={cn(styles.icon, "transition")} />
     </PopoverTrigger>
   );
 }
 
+// Back-compat alias: the trigger now supports both orientations.
+const PopoverVerticalEllipseTrigger = PopoverEllipseTrigger;
+
 export {
   Popover,
   PopoverArrowTrigger,
   PopoverContent,
   PopoverCustomTrigger,
   PopoverMenuItem,
   PopoverSectionHeader,
+  PopoverEllipseTrigger,
   PopoverSideMenuTrigger,
   PopoverTrigger,
   PopoverVerticalEllipseTrigger,

apps/webapp/app/components/query/QueryEditor.tsx

@@ -241,7 +241,7 @@ const QueryEditorForm = forwardRef<
   );
 
   return (
-    <div className="flex h-full flex-col gap-2 bg-background-deep pb-2">
+    <div className="flex h-full flex-col gap-2 bg-white pb-2 dark:bg-background-deep">
       <TSQLEditor
         defaultValue={query}
         onChange={setQuery}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.alerts.new/route.tsx

@@ -471,7 +471,7 @@ export default function Page() {
               cancelButton={
                 <LinkButton
                   to={v3ProjectAlertsPath(organization, project, environment)}
-                  variant="tertiary/medium"
+                  variant="secondary/medium"
                 >
                   Cancel
                 </LinkButton>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.apikeys/route.tsx

@@ -190,7 +190,7 @@ export default function Page() {
               )}
 
               <Accordion type="single" collapsible>
-                <AccordionItem value="item-1">
+                <AccordionItem value="item-1" className="bg-white dark:bg-transparent">
                   <AccordionTrigger>How to set these environment variables</AccordionTrigger>
                   <AccordionContent>
                     <div className="flex flex-col gap-2">

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx

@@ -282,6 +282,7 @@ export default function Page() {
                         <Paragraph variant="extra-small">Suggest a new region</Paragraph>
                       </TableCell>
                       <TableCellMenu
+                        className="suggest-region-cell"
                         alignment="right"
                         isSticky
                         visibleButtons={

apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx

@@ -759,7 +759,7 @@ export function TierEnterprise() {
           <Feedback
             defaultValue="enterprise"
             button={
-              <div className="flex h-10 w-full cursor-pointer items-center justify-center rounded border border-border-bright/50 hover:border-border-bright dark:border-border-bright dark:hover:border-border-brighter bg-tertiary px-8 text-base font-medium transition hover:bg-surface-control">
+              <div className="flex h-10 w-full cursor-pointer items-center justify-center rounded border border-border-bright/50 bg-secondary px-8 text-base font-medium shadow-xs transition hover:bg-background-raised dark:border-border-bright dark:hover:border-border-brighter">
                 <span className="text-center text-text-bright">Contact us</span>
               </div>
             }

apps/webapp/app/tailwind.css

@@ -765,3 +765,10 @@
     text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
   }
 }
+
+/* The table row-hover menu wraps the always-visible "Suggest a region" button
+   in a ring container; on light that ring doubles up with the button's own
+   border, so drop it here. */
+[data-theme="light"] .suggest-region-cell > div > div {
+  box-shadow: none;
+}