fix: use info color for anonymous signup icon

packages/web/src/auth/google/hooks/useConnectGoogle/useConnectGoogle.types.ts

@@ -4,8 +4,6 @@ export type GoogleUiState = "checking" | "repairing" | GoogleConnectionState;
 
 export type CommandActionIcon = "CloudArrowUpIcon";
 
-export type IconColor = "muted" | "warning" | "error";
-
 export type GoogleUiConfig = {
   commandAction: {
     label: string;
@@ -16,7 +14,7 @@ export type GoogleUiConfig = {
   sidebarStatus: {
     tooltip: string;
     isDisabled: boolean;
-    iconColor?: IconColor;
+    iconColor?: string;
     dialog?: {
       title: string;
       description: string;

packages/web/src/auth/google/hooks/useConnectGoogle/useConnectGoogle.util.ts

@@ -1,3 +1,4 @@
+import { theme } from "@web/common/styles/theme";
 import {
   type CommandActionIcon,
   type GoogleUiConfig,
@@ -41,7 +42,7 @@ export const getGoogleConnectionConfig = (
           isDisabled: true,
         },
         sidebarStatus: {
-          iconColor: "warning",
+          iconColor: theme.color.status.warning,
           tooltip: "Repairing Google Calendar in the background.",
           isDisabled: true,
           dialog: buildRepairDialog(onRepairGoogle),
@@ -56,7 +57,6 @@ export const getGoogleConnectionConfig = (
           onSelect: onConnectGoogle,
         },
         sidebarStatus: {
-          iconColor: "muted",
           tooltip: "Google Calendar not connected. Click to connect.",
           isDisabled: false,
           onSelect: onConnectGoogle,
@@ -71,7 +71,7 @@ export const getGoogleConnectionConfig = (
           onSelect: onConnectGoogle,
         },
         sidebarStatus: {
-          iconColor: "error",
+          iconColor: theme.color.status.error,
           tooltip: "Google Calendar needs reconnecting. Click to reconnect.",
           isDisabled: false,
           onSelect: onConnectGoogle,
@@ -98,7 +98,7 @@ export const getGoogleConnectionConfig = (
           onSelect: onRepairGoogle,
         },
         sidebarStatus: {
-          iconColor: "warning",
+          iconColor: theme.color.status.warning,
           tooltip: "Google Calendar needs repair. Click to repair.",
           isDisabled: false,
           dialog: buildRepairDialog(onRepairGoogle),
@@ -112,7 +112,6 @@ export const getGoogleConnectionConfig = (
           isDisabled: true,
         },
         sidebarStatus: {
-          iconColor: "muted",
           tooltip: "Google Calendar connected.",
           isDisabled: true,
         },

packages/web/src/components/HeaderInfoIcon/HeaderInfoIcon.test.tsx

@@ -7,6 +7,7 @@ import {
   type GoogleUiConfig,
   type GoogleUiState,
 } from "@web/auth/google/hooks/useConnectGoogle/useConnectGoogle.types";
+import { theme } from "@web/common/styles/theme";
 import { type AuthView } from "@web/components/AuthModal/hooks/useAuthModal";
 import { afterAll, beforeEach, describe, expect, it, mock } from "bun:test";
 
@@ -37,7 +38,7 @@ const mockUseConnectGoogle = mock(
     isAvailable: true,
     isRepairing: false,
     sidebarStatus: {
-      iconColor: "error",
+      iconColor: theme.color.status.error,
       isDisabled: false,
       onSelect: mockGoogleOnSelect,
       tooltip: "Google Calendar needs reconnecting. Click to reconnect.",
@@ -161,7 +162,7 @@ describe("HeaderInfoIcon", () => {
       isAvailable: true,
       isRepairing: false,
       sidebarStatus: {
-        iconColor: "error",
+        iconColor: theme.color.status.error,
         isDisabled: false,
         onSelect: mockGoogleOnSelect,
         tooltip: "Google Calendar needs reconnecting. Click to reconnect.",
@@ -234,7 +235,7 @@ describe("HeaderInfoIcon", () => {
       isAvailable: false,
       isRepairing: false,
       sidebarStatus: {
-        iconColor: "error",
+        iconColor: theme.color.status.error,
         isDisabled: false,
         onSelect: mockGoogleOnSelect,
         tooltip: "Google Calendar needs reconnecting. Click to reconnect.",
@@ -289,7 +290,7 @@ describe("HeaderInfoIcon", () => {
       isAvailable: true,
       isRepairing: true,
       sidebarStatus: {
-        iconColor: "warning",
+        iconColor: theme.color.status.warning,
         isDisabled: true,
         tooltip: "Repairing Google Calendar in the background.",
       },

packages/web/src/components/HeaderInfoIcon/HeaderInfoIcon.tsx

@@ -1,17 +1,9 @@
 import { InfoIcon } from "@phosphor-icons/react";
-import { type IconColor } from "@web/auth/google/hooks/useConnectGoogle/useConnectGoogle.types";
-import { theme } from "@web/common/styles/theme";
 import { SpinnerIcon } from "@web/components/Icons/Spinner";
 import { TooltipWrapper } from "@web/components/Tooltip/TooltipWrapper";
 import { StatusDotPopover } from "./HeaderInfoIconPopover";
 import { useHeaderInfo } from "./useHeaderInfo";
 
-const ICON_COLOR_MAP: Record<IconColor, string> = {
-  muted: theme.color.text.darkPlaceholder,
-  warning: theme.color.status.warning,
-  error: theme.color.status.error,
-};
-
 const ANONYMOUS_PROMPT_ICON_CLASSNAME =
   "origin-center transition-all duration-200 ease-out motion-safe:animate-sync-dot-pulse motion-safe:group-hover:animate-none";
 const DOT_BUTTON_CLASSNAME = "inline-flex h-6 w-6 items-center justify-center";
@@ -33,23 +25,19 @@ export const HeaderInfoIcon = () => {
     );
   }
 
-  // Only render when user attention is needed (warning or error states)
-  if (
-    sidebarStatus.iconColor !== "warning" &&
-    sidebarStatus.iconColor !== "error"
-  ) {
+  // Only render when user attention is needed
+  if (!sidebarStatus.iconColor) {
     return null;
   }
 
-  const iconColor = ICON_COLOR_MAP[sidebarStatus.iconColor];
   const iconClassName = isAnonymousSignUpPrompt
     ? ANONYMOUS_PROMPT_ICON_CLASSNAME
     : undefined;
   const icon = (
     <InfoIcon
       aria-hidden="true"
       className={iconClassName}
-      style={{ color: iconColor }}
+      style={{ color: sidebarStatus.iconColor }}
       size={15}
     />
   );

packages/web/src/components/HeaderInfoIcon/useHeaderInfo.ts

@@ -9,6 +9,7 @@ import {
   type GoogleUiConfig,
   type UseConnectGoogleResult,
 } from "@web/auth/google/hooks/useConnectGoogle/useConnectGoogle.types";
+import { theme } from "@web/common/styles/theme";
 import { useAuthModal } from "@web/components/AuthModal/hooks/useAuthModal";
 
 const ANONYMOUS_SIGN_UP_TOOLTIP = "Sign up to save your changes.";
@@ -39,7 +40,7 @@ export const useHeaderInfo = (): HeaderInfo => {
       isAnonymousSignUpPrompt: true,
       isRepairing: false,
       sidebarStatus: {
-        iconColor: "warning" as const,
+        iconColor: theme.color.status.info,
         isDisabled: false,
         onSelect: handleOpenSignUp,
         tooltip: ANONYMOUS_SIGN_UP_TOOLTIP,
@@ -53,7 +54,6 @@ export const useHeaderInfo = (): HeaderInfo => {
       isAnonymousSignUpPrompt: false,
       isRepairing: false,
       sidebarStatus: {
-        iconColor: "muted" as const,
         isDisabled: true,
         tooltip: "",
       },