refactor(coral): UI update for making links in tables more evident (hashtag990)

[vikramsubramanian]

hashtag Description

Mustafa is working on a design update how to make links in tables more evident for the user.

When done, we have to update that in our tables (e.g. browse-topics and browse-connectores)

[mayil-ai[bot]]

Some past issues to consider:

• feat(coral): Topic overview, subscriptions - Add Subscriptions table component (hashtag1229) | Involves adding table components, similar to updating table links.

• feat(coral): Topic overview, subscriptions - Add filters and search (hashtag1230) | Involves table updates with filters and search, relevant to table link updates.

Here are some code snippets that may help you get started:

• coral/src/app/accessibility.module.css:1-107 | Update CSS in accessibility.module.css to include new link styles for enhanced visibility, ensuring consistency across components.

• coral/src/app/features/requests/topics/components/TopicRequestsTable.tsx:33-138 | Apply enhanced-link CSS class to links in TopicRequestsTable.tsx to improve link visibility as per UI update requirements.

• coral/src/app/features/connectors/browse/components/ConnectorTable.tsx:1-106 | Apply enhanced-link CSS class to links in ConnectorTable.tsx to improve link visibility as per UI update requirements.

• coral/src/app/main.module.css:1-53 | This snippet provides CSS variables for link colors, which are necessary for implementing the new styles as described in the response.

To enhance the visibility of links in the ConnectorTable.tsx and TopicRequestsTable.tsx components, follow these steps:

• Update CSS for Links:

  • Modify accessibility.module.css or create a new CSS class for improved link styling.

  .enhanced-link {
  color: var(--text-link-color);
  font-weight: bold;
  text-decoration: underline;
  }
  
  .enhanced-link:hover,
  .enhanced-link:focus {
  color: var(--text-link-color-hover);
  }

• Apply CSS Class in ConnectorTable.tsx:

  <Link
  to={`/connector/${connectorName}/overview`}
  state={environmentId}
  className="enhanced-link"
  >
  {connectorName} <InlineIcon icon={link} />
  </Link>

• Apply CSS Class in TopicRequestsTable.tsx:

  <Link
  to={`/topic/${topicname}/overview`}
  state={envId}
  className="enhanced-link"
  >
  {topicname} <InlineIcon icon={link} />
  </Link>

• Ensure Consistency:

  • Verify that the new styles are consistent across different components and do not conflict with existing styles.

💡 To rerun Mayil, comment mayil-ai rerun. Mayil will incorporate any new context added to the ticket. Include details in your rerun comment to guide Mayil!