Wire subscribe-to-updates in compliance portal

Visitors can subscribe after sign-in via the Updates
CTA or user menu. Also add trust signOut so Log out
works from the menu.

Signed-off-by: Émile Ré <emile@probo.com>

packages/ui/src/v2/Dropdown/DropdownItem.tsx

@@ -28,14 +28,15 @@ export type DropdownItemProps
   = & Omit<ComponentProps<typeof Menu.Item>, "color" | "className">
     & {
       className?: string;
-      color?: "accent" | "error";
+      color?: "accent" | "error" | "success";
       iconStart?: ReactNode;
       // Trailing keyboard shortcut hint (e.g. "⌘ E").
       shortcut?: ReactNode;
     };
 
 // A single actionable menu item. Inherits size/variant/highContrast from the
-// popup; set `color="error"` for destructive actions.
+// popup; set `color="error"` for destructive actions and `color="success"` for
+// affirmative status rows (e.g. subscribed).
 export function DropdownItem(props: DropdownItemProps) {
   const { className, color = "accent", iconStart, shortcut, children, ...rest } = props;
   const { size, variant, highContrast } = useDropdownContext();

packages/ui/src/v2/Dropdown/variants.ts

@@ -49,6 +49,7 @@ export const dropdownItem = tv({
     color: {
       accent: "text-sand-12",
       error: "text-red-11",
+      success: "text-green-11",
     },
     highContrast: {
       true: "",
@@ -63,6 +64,9 @@ export const dropdownItem = tv({
     // error
     { variant: "solid", color: "error", class: "data-highlighted:bg-red-9 data-highlighted:text-white" },
     { variant: "soft", color: "error", class: "data-highlighted:bg-red-4 data-highlighted:text-red-12" },
+    // success
+    { variant: "solid", color: "success", class: "data-highlighted:bg-green-9 data-highlighted:text-white" },
+    { variant: "soft", color: "success", class: "data-highlighted:bg-green-4 data-highlighted:text-green-12" },
   ],
   defaultVariants: {
     size: 2,