From 3940f9861181dde350fb1313be68f1adefb7565e Mon Sep 17 00:00:00 2001
From: Andreas Kienle <andreas.kienle@sap.com>
Date: Tue, 25 Mar 2025 17:08:10 +0100
Subject: [PATCH 1/3] Move inline styles to CSS module

---
 .../ControlPlanes/ControlPlaneCard.module.css         | 11 +++++++++++
 src/components/ControlPlanes/ControlPlaneCard.tsx     | 10 ++++------
 2 files changed, 15 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ControlPlanes/ControlPlaneCard.module.css

diff --git a/src/components/ControlPlanes/ControlPlaneCard.module.css b/src/components/ControlPlanes/ControlPlaneCard.module.css
new file mode 100644
index 00000000..2ec4c8a2
--- /dev/null
+++ b/src/components/ControlPlanes/ControlPlaneCard.module.css
@@ -0,0 +1,11 @@
+.card {
+  margin: 12px 12px 12px 0;
+}
+
+.container {
+  padding: 20px;
+}
+
+.row {
+  paddingTop: 20px;
+}
diff --git a/src/components/ControlPlanes/ControlPlaneCard.tsx b/src/components/ControlPlanes/ControlPlaneCard.tsx
index 3b80eeb8..9ee7b275 100644
--- a/src/components/ControlPlanes/ControlPlaneCard.tsx
+++ b/src/components/ControlPlanes/ControlPlaneCard.tsx
@@ -20,6 +20,7 @@ import {
 } from '../../lib/api/types/crate/deleteMCP.ts';
 import { DeleteConfirmationDialog } from '../Dialogs/DeleteConfirmationDialog.tsx';
 import MCPHealthPopoverButton from '../ControlPlane/MCPHealthPopoverButton.tsx';
+import classes from './ControlPlaneCard.module.css';
 
 interface Props {
   controlPlane: ListControlPlanesType;
@@ -52,11 +53,8 @@ export function ControlPlaneCard({
 
   return (
     <>
-      <Card
-        key={`${name}--${namespace}`}
-        style={{ margin: '12px 12px 12px 0' }}
-      >
-        <div style={{ padding: '20px' }}>
+      <Card key={`${name}--${namespace}`} className={classes.card}>
+        <div className={classes.container}>
           <FlexBox direction="Column">
             <FlexBox direction="Row" justifyContent="SpaceBetween">
               <FlexBox direction="Column">
@@ -80,7 +78,7 @@ export function ControlPlaneCard({
               direction="Row"
               justifyContent="SpaceBetween"
               alignItems="Center"
-              style={{ paddingTop: '20px' }}
+              className={classes.row}
             >
               <MCPHealthPopoverButton mcpStatus={controlPlane.status} />
               <ConnectButton

From de0415d61c16507a3d27377f05090bb1f7efc8a7 Mon Sep 17 00:00:00 2001
From: Andreas Kienle <andreas.kienle@sap.com>
Date: Thu, 3 Apr 2025 08:39:06 +0200
Subject: [PATCH 2/3] Refactor

---
 .../ControlPlaneCard.module.css               |  0
 .../ControlPlaneCard.tsx                      | 22 +++++++++----------
 .../ControlPlaneListWorkspaceGridTile.tsx     |  2 +-
 3 files changed, 12 insertions(+), 12 deletions(-)
 rename src/components/ControlPlanes/{ => ControlPlaneCard}/ControlPlaneCard.module.css (100%)
 rename src/components/ControlPlanes/{ => ControlPlaneCard}/ControlPlaneCard.tsx (82%)

diff --git a/src/components/ControlPlanes/ControlPlaneCard.module.css b/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.module.css
similarity index 100%
rename from src/components/ControlPlanes/ControlPlaneCard.module.css
rename to src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.module.css
diff --git a/src/components/ControlPlanes/ControlPlaneCard.tsx b/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.tsx
similarity index 82%
rename from src/components/ControlPlanes/ControlPlaneCard.tsx
rename to src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.tsx
index 9ee7b275..78f57674 100644
--- a/src/components/ControlPlanes/ControlPlaneCard.tsx
+++ b/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.tsx
@@ -2,25 +2,25 @@ import { Button, Card, FlexBox, Label, Title } from '@ui5/webcomponents-react';
 import '@ui5/webcomponents-fiori/dist/illustrations/NoData.js';
 import '@ui5/webcomponents-fiori/dist/illustrations/EmptyList.js';
 import '@ui5/webcomponents-icons/dist/delete';
-import ConnectButton from './ConnectButton.tsx';
-import { ListWorkspacesType } from '../../lib/api/types/crate/listWorkspaces.ts';
+import ConnectButton from '../ConnectButton.tsx';
+import { ListWorkspacesType } from '../../../lib/api/types/crate/listWorkspaces.ts';
 import {
   ListControlPlanesType,
   ReadyStatus,
-} from '../../lib/api/types/crate/controlPlanes.ts';
+} from '../../../lib/api/types/crate/controlPlanes.ts';
 import TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import { useState } from 'react';
-import { useApiResourceMutation } from '../../lib/api/useApiResource.ts';
+import { useApiResourceMutation } from '../../../lib/api/useApiResource.ts';
 import {
   DeleteMCPResource,
   DeleteMCPType,
   PatchMCPResourceForDeletion,
   PatchMCPResourceForDeletionBody,
-} from '../../lib/api/types/crate/deleteMCP.ts';
-import { DeleteConfirmationDialog } from '../Dialogs/DeleteConfirmationDialog.tsx';
-import MCPHealthPopoverButton from '../ControlPlane/MCPHealthPopoverButton.tsx';
-import classes from './ControlPlaneCard.module.css';
+} from '../../../lib/api/types/crate/deleteMCP.ts';
+import { DeleteConfirmationDialog } from '../../Dialogs/DeleteConfirmationDialog.tsx';
+import MCPHealthPopoverButton from '../../ControlPlane/MCPHealthPopoverButton.tsx';
+import styles from './ControlPlaneCard.module.css';
 
 interface Props {
   controlPlane: ListControlPlanesType;
@@ -53,8 +53,8 @@ export function ControlPlaneCard({
 
   return (
     <>
-      <Card key={`${name}--${namespace}`} className={classes.card}>
-        <div className={classes.container}>
+      <Card key={`${name}--${namespace}`} className={styles.card}>
+        <div className={styles.container}>
           <FlexBox direction="Column">
             <FlexBox direction="Row" justifyContent="SpaceBetween">
               <FlexBox direction="Column">
@@ -78,7 +78,7 @@ export function ControlPlaneCard({
               direction="Row"
               justifyContent="SpaceBetween"
               alignItems="Center"
-              className={classes.row}
+              className={styles.row}
             >
               <MCPHealthPopoverButton mcpStatus={controlPlane.status} />
               <ConnectButton
diff --git a/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx b/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
index a421e2f7..c58cf5c4 100644
--- a/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
+++ b/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
@@ -11,7 +11,7 @@ import '@ui5/webcomponents-icons/dist/delete';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import { CopyButton } from '../../Shared/CopyButton.tsx';
 import { NoManagedControlPlaneBanner } from '../NoManagedControlPlaneBanner.tsx';
-import { ControlPlaneCard } from '../ControlPlaneCard.tsx';
+import { ControlPlaneCard } from '../ControlPlaneCard/ControlPlaneCard.tsx';
 import {
   ListWorkspacesType,
   isWorkspaceReady,

From abca9164a549cc83d19b9c8c4e944ae9196a994f Mon Sep 17 00:00:00 2001
From: Andreas Kienle <andreas.kienle@sap.com>
Date: Thu, 3 Apr 2025 08:44:01 +0200
Subject: [PATCH 3/3] Move from px to rem

---
 .../ControlPlaneCard/ControlPlaneCard.module.css            | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.module.css b/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.module.css
index 2ec4c8a2..91197e01 100644
--- a/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.module.css
+++ b/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.module.css
@@ -1,11 +1,11 @@
 .card {
-  margin: 12px 12px 12px 0;
+  margin: 0.75rem 0.75rem 0.75rem 0;
 }
 
 .container {
-  padding: 20px;
+  padding: 1.25rem;
 }
 
 .row {
-  paddingTop: 20px;
+  padding-top: 1.25rem;
 }