style: rename and change mcp header font (#9)

Co-authored-by: Andreas Kienle <[email protected]>

Author: GenosseOtt

public/locales/en.json

@@ -119,6 +119,7 @@
     "addButton": "Add"
   },
   "ControlPlaneListView": {
+    "header": "Your instances of <span>ManagedControlPlane</span>",
     "projectHeader": "Project:"
   },
   "ProjectsListView": {

src/index.css

@@ -116,4 +116,9 @@ ui5-form-item {
 ui5-toast {
   width: 50ch;
   max-width: 100%;
+}
+
+.mono-font {
+  font-family: 'Roboto Mono', monospace;
+  font-weight: bold;
 }

src/views/ControlPlanes/ControlPlaneListView.tsx

@@ -1,10 +1,10 @@
-import { ObjectPage, ObjectPageTitle } from '@ui5/webcomponents-react';
+import { ObjectPage, ObjectPageTitle, Title } from '@ui5/webcomponents-react';
 import ProjectChooser from '../../components/Projects/ProjectChooser.tsx';
 import { useParams } from 'react-router-dom';
 import ControlPlaneListAllWorkspaces from '../../components/ControlPlanes/List/ControlPlaneListAllWorkspaces.tsx';
 import IntelligentBreadcrumbs from '../../components/Core/IntelligentBreadcrumbs.tsx';
 import { ControlPlaneListToolbar } from '../../components/ControlPlanes/List/ControlPlaneListToolbar.tsx';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 export default function ControlPlaneListView() {
   const { projectName } = useParams();
@@ -16,7 +16,14 @@ export default function ControlPlaneListView() {
         preserveHeaderStateOnClick={true}
         titleArea={
           <ObjectPageTitle
-            header="Your MCPs"
+            header={
+              <Title>
+                <Trans
+                  i18nKey="ControlPlaneListView.header"
+                  components={{ span: <span className="mono-font" /> }}
+                />
+              </Title>
+            }
             subHeader={
               <div
                 style={{