Highlighted buttons in the top nav on Name screen about highlight HOT 2 CLOSED

HIG-4659 Highlighted buttons in the top nav on Name screen

from highlight.

To resolve the issue where the top Discord/GitHub icons and 'metrics' button remain in the foreground when the modal is open, follow these steps:

1. Locate the Modal CSS: Open the CSS file for the modal component that is being displayed. For example, if it's the Discord integration modal, open /frontend/src/pages/IntegrationsPage/components/DiscordIntegration/DiscordIntegrationConfig.module.css.

2. Add z-index to Modal: Ensure the modal has a higher z-index than the top nav buttons. Add or update the z-index property in the modal's CSS class. For example:

   .modal {
     z-index: 1050; /* Ensure this is higher than the top nav buttons */
   }

3. Locate Top Nav CSS: Open the CSS file for the top nav buttons. This might be in a global CSS file or a specific component CSS file.

4. Adjust z-index of Top Nav Buttons: Ensure the top nav buttons have a lower z-index than the modal. For example:

   .topNavButton {
     z-index: 1000; /* Ensure this is lower than the modal */
   }

5. Apply Changes: Save the changes and ensure the modal now appears above the top nav buttons.

References

/frontend/src/pages/IntegrationsPage/components/DiscordIntegration/DiscordIntegrationConfig.module.css
/frontend/src/pages/IntegrationsPage/components/GitHubIntegration/GitHubIntegrationConfig.module.css
/frontend/src/pages/IntegrationsPage/components/JiraIntegration/JiraIntegrationConfig.module.css
/frontend/src/pages/IntegrationsPage/components/MicrosoftTeamsIntegration/MicrosoftTeamsIntegrationConfig.module.css
/frontend/src/pages/IntegrationsPage/components/SlackIntegration/SlackIntegrationConfig.module.css
/frontend/src/pages/IntegrationsPage/components/LinearIntegration/LinearIntegrationConfig.module.css
/frontend/src/pages/IntegrationsPage/components/ClearbitIntegration/ClearbitIntegrationConfig.module.css
/frontend/src/pages/IntegrationsPage/components/ClickUpIntegration/ClickUpIntegrationConfig.module.css
/frontend/src/pages/ErrorsV2/ErrorIssueButton/ErrorIssueButton.tsx
/frontend/src/pages/ErrorsV2/ErrorIssueButton/style.css.ts

Ask Greptile

from highlight.