fix: MCP header text in dark mode (#320)

Author: andreaskienle

src/spaces/mcp/components/McpHeader.cy.tsx

@@ -22,9 +22,9 @@ describe('McpHeader', () => {
 
     cy.mount(<McpHeader mcp={mcp} />);
 
-    cy.contains('span', 'my-control-plane').should('be.visible');
-    cy.contains('span', 'alice@example.com').should('be.visible');
-    cy.contains('span', `${creationDateAsString} (2 days ago)`).should('be.visible');
+    cy.contains('my-control-plane').should('be.visible');
+    cy.contains('alice@example.com').should('be.visible');
+    cy.contains(`${creationDateAsString} (2 days ago)`).should('be.visible');
   });
 
   it('renders with missing MCP metadata', () => {
@@ -44,7 +44,7 @@ describe('McpHeader', () => {
 
     cy.mount(<McpHeader mcp={mcp} />);
 
-    cy.contains('span', 'my-control-plane').should('be.visible');
-    cy.contains('span', `${creationDateAsString} (2 days ago)`).should('be.visible');
+    cy.contains('my-control-plane').should('be.visible');
+    cy.contains(`${creationDateAsString} (2 days ago)`).should('be.visible');
   });
 });

src/spaces/mcp/components/McpHeader.tsx

@@ -1,4 +1,5 @@
 import { ControlPlaneType } from '../../../lib/api/types/crate/controlPlanes.ts';
+import { Text } from '@ui5/webcomponents-react';
 
 import styles from './McpHeader.module.css';
 import { formatDateAsTimeAgo } from '../../../utils/i18n/timeAgo.ts';
@@ -23,17 +24,17 @@ export function McpHeader({ mcp }: McpHeaderProps) {
     <div className={styles.container}>
       <div className={styles.grid}>
         <span className={styles.label}>{t('McpHeader.nameLabel')}</span>
-        <span>{mcp.metadata.name}</span>
+        <Text>{mcp.metadata.name}</Text>
 
         <span className={styles.label}>{t('McpHeader.createdOnLabel')}</span>
-        <span>
+        <Text>
           {created} ({formatDateAsTimeAgo(mcp.metadata.creationTimestamp)})
-        </span>
+        </Text>
 
         {createdBy ? (
           <>
             <span className={styles.label}>{t('McpHeader.createdByLabel')}</span>
-            <span>{createdBy}</span>
+            <Text>{createdBy}</Text>
           </>
         ) : null}
       </div>