improvement(ui): updated subscription and team settings modals to emcn

[waleedlatif1]

Summary

• updated subscription and team settings modals to emcn
• aligned spacing and components to all be emcn

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Dec 19, 2025 7:33pm

[greptile-apps]

Greptile Summary

This PR successfully migrates subscription and team settings modals to use EMCN component library patterns. The changes systematically replace custom UI components with standardized EMCN components (Label, Popover, ModalBody) and align spacing, text sizing, and color tokens to match the design system.

Key Changes

• Replaced shadcn Select component with EMCN Popover for workspace billed account selection
• Added EMCN Label component throughout for consistent form field labeling
• Migrated modal structure to use ModalBody for proper content areas
• Updated text colors from --text-muted to --text-secondary and --text-tertiary where appropriate
• Standardized text sizes using design tokens (text-[12px], text-[13px], etc.)
• Improved spacing consistency with standardized gaps (gap-[2px], gap-[8px])
• Removed unnecessary code comments
• Updated background surfaces to use --surface-5 consistently

The migration maintains all existing functionality while improving UI consistency and adherence to the EMCN design system.

Confidence Score: 5/5

• This PR is safe to merge with no identified issues
• All changes are cosmetic UI updates that follow established EMCN patterns. The PR correctly migrates from custom components to standardized EMCN components, maintains existing functionality, and improves consistency. No logic changes, no breaking changes, and all patterns align with the documented style guides.
• No files require special attention

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/subscription.tsx	Updated to use EMCN Label and Popover components, replaced custom Select with Popover, improved spacing and text sizing consistency
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/cancel-subscription/cancel-subscription.tsx	Migrated to EMCN Label and ModalBody, removed code comments, updated text colors and spacing to match design system
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/credit-balance/credit-balance.tsx	Added EMCN Label and ModalBody, improved modal structure and spacing, unified text sizing to design tokens
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/plan-card/plan-card.tsx	Updated text colors from --text-muted to --text-secondary, adjusted spacing and button sizing for consistency
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-members/team-members.tsx	Reorganized layout to move action buttons inline with member info, removed usage column from left section

Sequence Diagram

sequenceDiagram
    participant User
    participant Component
    participant EMCN
    participant UI

    Note over User,UI: UI Migration to EMCN Components

    User->>Component: Interact with settings modal
    Component->>EMCN: Use Label component
    EMCN->>UI: Render with consistent styling
    Component->>EMCN: Use Popover for selects
    EMCN->>UI: Render with design tokens
    Component->>EMCN: Use ModalBody for structure
    EMCN->>UI: Apply spacing and layout
    UI-->>User: Display consistent UI

Loading