Product
Secret Manager
Describe the bug
Buttons in Project Settings (and some Secret Manager Settings pages) are visually inconsistent. Some primary action buttons (Save, Create, Add) are colored/tinted at rest with a clear hover state, while others are flat gray and only show color on hover — and a few show almost no visible hover feedback at all.
This isn't a CSS/hover bug on individual buttons — it's caused by two different Button components being used side-by-side across settings pages:
v3/Button (frontend/src/components/v3/generic/Button/Button.tsx) — scope-colored variants (project, org, sub-org) are tinted at rest and deepen slightly on hover. This is the documented pattern in DESIGN.md: primary CTAs should always carry scope color.v2/Button (frontend/src/components/v2/Button/Button.tsx, legacy) — base state is flat gray; color only appears via hover classes, and some variant/colorSchema combinations barely change on hover at all.
Same action (e.g. "Save"), different pages, different look — purely because of which Button component that page happens to use. Root cause is an incomplete migration from v2 to v3 Button across Project/Secret Manager Settings.
To Reproduce
- Go to a Project → Settings → General tab
- Observe the "Save" button under Project Overview and under Audit Logs Retention — both flat gray, only a faint hover
- Go to Settings → Encryption tab, observe the Key Management "Save" button — also flat gray
- Go to Settings → Environments, observe "Create Environment" — yellow-tinted at rest
- Go to Settings → Policies (Secret Validation Rules), observe "Create Rule" — yellow-tinted at rest
- Go to Project Integrations → Native Integrations, observe "Add Integration" — flat gray
- Compare: same kind of primary action (Save/Create/Add), inconsistent styling across these pages
Expected behavior
All primary action buttons (Save, Create X, Add X) within a settings section should consistently use the scope-colored v3 Button variant (tinted at rest, e.g. project on project-scoped pages), matching what's already implemented correctly in Version Retention, Secret Validation Rules, Environments, Secret Tags, and Webhooks sections. Secondary/utility actions (Copy, Cancel) should consistently use the v3 outline variant. Destructive actions should use danger.
Screenshots
Deployment Type
Infisical Cloud
Additional context
Known affected files (Project Settings / Secret Manager Settings):
- frontend/src/components/project/ProjectOverviewChangeSection.tsx — Save, Copy Project Slug, Copy Project ID
- frontend/src/pages/project/SettingsPage/components/AuditLogsRetentionSection/AuditLogsRetentionSection.tsx — Save
- frontend/src/pages/secret-manager/SettingsPage/components/EncryptionTab/EncryptionTab.tsx — Key Management Save
- frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/SlackIntegrationForm.tsx — Save
- frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsIntegrationForm.tsx — Save
- frontend/src/pages/secret-manager/IntegrationsListPage/components/NativeIntegrationsTab/NativeIntegrationsTab.tsx — Add Integration
- frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/WorkflowIntegrationTab.tsx — Add (workflow integration trigger)
- frontend/src/pages/project/SettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx — v2 danger/outline_bg (lower priority, destructive action)
Already consistent (v3, correct, no change needed): Version Retention, Secret Validation Rules, Environments, Secret Tags, Secret Detection Ignore Values, Webhooks.
Proposed fix: migrate the affected files from v2 Button to v3 Button, applying variant="project" for primary actions and variant="outline" for secondary actions, per the existing DESIGN.md convention.
Product
Secret Manager
Describe the bug
Buttons in Project Settings (and some Secret Manager Settings pages) are visually inconsistent. Some primary action buttons (Save, Create, Add) are colored/tinted at rest with a clear hover state, while others are flat gray and only show color on hover — and a few show almost no visible hover feedback at all.
This isn't a CSS/hover bug on individual buttons — it's caused by two different Button components being used side-by-side across settings pages:
v3/Button(frontend/src/components/v3/generic/Button/Button.tsx) — scope-colored variants (project,org,sub-org) are tinted at rest and deepen slightly on hover. This is the documented pattern in DESIGN.md: primary CTAs should always carry scope color.v2/Button(frontend/src/components/v2/Button/Button.tsx, legacy) — base state is flat gray; color only appears via hover classes, and some variant/colorSchema combinations barely change on hover at all.Same action (e.g. "Save"), different pages, different look — purely because of which Button component that page happens to use. Root cause is an incomplete migration from v2 to v3 Button across Project/Secret Manager Settings.
To Reproduce
Expected behavior
All primary action buttons (Save, Create X, Add X) within a settings section should consistently use the scope-colored v3 Button variant (tinted at rest, e.g.
projecton project-scoped pages), matching what's already implemented correctly in Version Retention, Secret Validation Rules, Environments, Secret Tags, and Webhooks sections. Secondary/utility actions (Copy, Cancel) should consistently use the v3outlinevariant. Destructive actions should usedanger.Screenshots
Deployment Type
Infisical Cloud
Additional context
Known affected files (Project Settings / Secret Manager Settings):
Already consistent (v3, correct, no change needed): Version Retention, Secret Validation Rules, Environments, Secret Tags, Secret Detection Ignore Values, Webhooks.
Proposed fix: migrate the affected files from v2 Button to v3 Button, applying variant="project" for primary actions and variant="outline" for secondary actions, per the existing DESIGN.md convention.