Move inline styles to Common CSS

Author: andreaskienle

package-lock.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
     "@hookform/resolvers": "^4.1.3",
+    "@sap-ui/common-css": "^0.39.1",
     "@ui5/webcomponents": "^2.7.2",
     "@ui5/webcomponents-fiori": "^2.7.2",
     "@ui5/webcomponents-icons": "^2.7.2",

package.json

@@ -54,9 +54,9 @@ export function ControlPlaneCard({
     <>
       <Card
         key={`${name}--${namespace}`}
-        style={{ margin: '12px 12px 12px 0' }}
+        className="sap-margin-begin-small sap-margin-end-small sap-margin-top-small"
       >
-        <div style={{ padding: '20px' }}>
+        <div className="sap-padding">
           <FlexBox direction="Column">
             <FlexBox direction="Row" justifyContent="SpaceBetween">
               <FlexBox direction="Column">
@@ -80,7 +80,7 @@ export function ControlPlaneCard({
               direction="Row"
               justifyContent="SpaceBetween"
               alignItems="Center"
-              style={{ paddingTop: '20px' }}
+              className="sap-margin-top-small"
             >
               <MCPHealthPopoverButton mcpStatus={controlPlane.status} />
               <ConnectButton

src/components/ControlPlanes/ControlPlaneCard.tsx

@@ -17,6 +17,7 @@ import { DarkModeSystemSwitcher } from './components/Core/DarkModeSystemSwitcher
 import '.././i18n.ts';
 import './utils/i18n/timeAgo';
 import { useTranslation } from 'react-i18next';
+import '@sap-ui/common-css/dist/common-css.css';
 
 (async () => {
   try {