style: improve spaces around MCP Detail spacing (#10)

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

Author: GenosseOtt

public/locales/en.json

@@ -6,7 +6,7 @@
     "signInButton": "Sign in"
   },
   "ComponentList": {
-    "tableComponentHeader": "Component",
+    "tableComponentHeader": "Name",
     "tableVersionHeader": "Version"
   },
   "FluxList": {
@@ -20,7 +20,7 @@
     "tableCreatedHeader": "Created"
   },
   "ManagedResources": {
-    "headerManagedResources": "Resources",
+    "header": "Managed Resources",
     "tableHeaderKind": "Kind",
     "tableHeaderName": "Name",
     "tableHeaderCreated": "Created",
@@ -126,7 +126,10 @@
     "title": "Projects"
   },
   "ControlPlaneView": {
-    "accessError": "Managed Control Plane does not have access information yet"
+    "accessError": "Managed Control Plane does not have access information yet",
+    "componentsTitle": "Components",
+    "crossplaneTitle": "Crossplane",
+    "gitOpsTitle": "GitOps"
   },
   "ToastContext": {
     "errorMessage": "useToast must be used within a ToastProvider"
@@ -147,7 +150,7 @@
     "tableHeaderHealthy": "Healthy"
   },
   "ProvidersConfig": {
-    "headerProvidersConfig": "Providers Config"
+    "header": "Provider Configs"
   },
   "validationErrors": {
     "required": "This field is required!",

src/components/ControlPlane/ComponentList.tsx

@@ -49,6 +49,7 @@ export default function ComponentList({ mcp }: { mcp: ControlPlaneType }) {
         columns={componentTableColumns}
         minRows={0}
         data={data}
+        style={{marginLeft: "12px", marginRight: "12px"}}
       />
     </div>
   );

src/components/ControlPlane/ManagedResources.tsx

@@ -106,12 +106,13 @@ export function ManagedResources() {
 
   return (
     <>
-      <Title level="H4">{t('ManagedResources.headerManagedResources')}</Title>
+      <Title level="H4">{t('ManagedResources.header')}</Title>
 
       {error && <IllustratedError error={error} />}
 
       {!error && (
         <AnalyticalTable
+          style={{ margin: '12px' }}
           columns={columns}
           data={rows}
           minRows={1}

src/components/ControlPlane/ProvidersConfig.tsx

@@ -12,7 +12,7 @@ export function ProvidersConfig() {
 
   return (
     <>
-      <Title level='H4'>{t('ProvidersConfig.headerProvidersConfig')}</Title>
+      <Title level='H4'>{t('ProvidersConfig.header')}</Title>
         <AnalyticalTable
           columns={columns}
           data={[]}

src/components/Shared/ConfiguredAnalyticsTable.tsx

@@ -23,6 +23,7 @@ export default function ConfiguredAnalyticsTable(props: Props) {
       scaleWidthMode={AnalyticalTableScaleWidthMode.Smart}
       loading={props.isLoading}
       filterable
+      style={{margin: "12px"}}
     />
   );
 }

src/index.css

@@ -86,6 +86,10 @@
   margin-bottom: -30px;
 }
 
+.cp-panel {
+  margin: 12px;
+}
+
 .cp-panel-crossplane {
   background-color: #FFC933;
 }

src/views/ControlPlanes/ControlPlaneView.tsx

@@ -88,13 +88,18 @@ export default function ControlPlaneView() {
           <ObjectPageSection
             className="cp-page-section-components"
             id="components"
-            titleText="Components"
+            titleText={t('ControlPlaneView.componentsTitle')}
             hideTitleText
           >
             <Panel
+              className="cp-panel"
               headerLevel="H2"
               headerText="Panel"
-              header={<Title level="H3">Components</Title>}
+              header={
+                <Title level="H3">
+                  {t('ControlPlaneView.componentsTitle')}
+                </Title>
+              }
               noAnimation
             >
               <ComponentList mcp={mcp} />
@@ -103,14 +108,18 @@ export default function ControlPlaneView() {
           <ObjectPageSection
             className="cp-page-section-crossplane"
             id="crossplane"
-            titleText="Crossplane"
+            titleText={t('ControlPlaneView.crossplaneTitle')}
             hideTitleText
           >
             <Panel
-              className="cp-panel-crossplane"
+              className="cp-panel cp-panel-crossplane"
               headerLevel="H3"
               headerText="Panel"
-              header={<Title level="H3">Crossplane</Title>}
+              header={
+                <Title level="H3">
+                  {t('ControlPlaneView.crossplaneTitle')}
+                </Title>
+              }
               noAnimation
             >
               <ProvidersList />
@@ -119,14 +128,16 @@ export default function ControlPlaneView() {
           <ObjectPageSection
             className="cp-page-section-gitops"
             id="gitops"
-            titleText="GitOps"
+            titleText={t('ControlPlaneView.gitOpsTitle')}
             hideTitleText
           >
             <Panel
-              className="cp-panel-gitops"
+              className="cp-panel cp-panel-gitops"
               headerLevel="H3"
               headerText="Panel"
-              header={<Title level="H3">GitOps</Title>}
+              header={
+                <Title level="H3">{t('ControlPlaneView.gitOpsTitle')}</Title>
+              }
               noAnimation
             >
               <FluxList />