From 0cd7b87850c7f1b84efed5eca12669b0fcf53d33 Mon Sep 17 00:00:00 2001
From: typescreep <typescri@yandex.ru>
Date: Wed, 11 Jun 2025 17:53:32 +0300
Subject: [PATCH] main layouts

---
 .../Forms/ApisForms/CreateApisForm.tsx        | 35 ++++++++----------
 .../Forms/ApisForms/UpdateApisForm.tsx        | 36 ++++++++-----------
 .../Forms/BuiltinForms/CreateBuiltinForm.tsx  | 34 ++++++++----------
 .../Forms/BuiltinForms/UpdateBuiltinForm.tsx  | 35 ++++++++----------
 .../Forms/CrdsForms/CreateCrdsForm.tsx        | 35 ++++++++----------
 .../Forms/CrdsForms/UpdateCrdsForm.tsx        | 36 ++++++++-----------
 src/pages/FormApiPage/FormApiPage.tsx         |  3 +-
 src/pages/FormBuiltinPage/FormBuiltinPage.tsx |  3 +-
 src/pages/FormCrdPage/FormCrdPage.tsx         |  3 +-
 9 files changed, 90 insertions(+), 130 deletions(-)

diff --git a/src/components/organisms/Forms/ApisForms/CreateApisForm.tsx b/src/components/organisms/Forms/ApisForms/CreateApisForm.tsx
index 4867282..3e9b971 100644
--- a/src/components/organisms/Forms/ApisForms/CreateApisForm.tsx
+++ b/src/components/organisms/Forms/ApisForms/CreateApisForm.tsx
@@ -1,6 +1,7 @@
 import React, { FC, useState } from 'react'
-import { Card, Flex, Segmented } from 'antd'
-import { BlackholeForm, FlexEnd } from 'components'
+import { Segmented } from 'antd'
+import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
+import { BlackholeForm } from 'components'
 
 type TCreateApisFormProps = {
   namespace?: string
@@ -29,24 +30,16 @@ export const CreateApisForm: FC<TCreateApisFormProps> = ({ namespace, apiGroup,
   }
 
   return (
-    <Card
-      title={
-        <Flex>
-          Create {namespace ? `${namespace}/` : ''}
-          {apiGroup}/{apiVersion}/{typeName}
-          <FlexEnd>
-            <Segmented<string>
-              options={['OpenAPI', 'Manual']}
-              value={currentMode}
-              onChange={value => {
-                setCurrentMode(value)
-              }}
-              disabled={currentModeDisabled}
-            />
-          </FlexEnd>
-        </Flex>
-      }
-    >
+    <ContentCard>
+      <Segmented<string>
+        options={['OpenAPI', 'Manual']}
+        value={currentMode}
+        onChange={value => {
+          setCurrentMode(value)
+        }}
+        disabled={currentModeDisabled}
+      />
+      <Spacer $space={10} $samespace />
       <BlackholeForm
         data={{
           type: 'apis',
@@ -59,6 +52,6 @@ export const CreateApisForm: FC<TCreateApisFormProps> = ({ namespace, apiGroup,
         backlink={backLink}
         modeData={modeData}
       />
-    </Card>
+    </ContentCard>
   )
 }
diff --git a/src/components/organisms/Forms/ApisForms/UpdateApisForm.tsx b/src/components/organisms/Forms/ApisForms/UpdateApisForm.tsx
index 395ea8a..001767a 100644
--- a/src/components/organisms/Forms/ApisForms/UpdateApisForm.tsx
+++ b/src/components/organisms/Forms/ApisForms/UpdateApisForm.tsx
@@ -1,9 +1,9 @@
 import React, { FC, useState } from 'react'
-import { Spin, Alert, Card, Flex, Segmented } from 'antd'
-import { useApiResourceSingle } from '@prorobotech/openapi-k8s-toolkit'
+import { Spin, Alert, Segmented } from 'antd'
+import { useApiResourceSingle, ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
 import { useSelector } from 'react-redux'
 import { RootState } from 'store/store'
-import { BlackholeForm, FlexEnd } from 'components'
+import { BlackholeForm } from 'components'
 
 type TUpdateApisFormProps = {
   apiGroup: string
@@ -65,24 +65,16 @@ export const UpdateApisForm: FC<TUpdateApisFormProps> = ({
   const { managedFields: __, ...metadata } = data.metadata
 
   return (
-    <Card
-      title={
-        <Flex>
-          Edit {apiGroup}/{apiVersion}
-          {data.metadata.namespace ? `/namespaces/${data.metadata.namespace}` : ''}/{typeName}/{entryName}
-          <FlexEnd>
-            <Segmented<string>
-              options={['OpenAPI', 'Manual']}
-              value={currentMode}
-              onChange={value => {
-                setCurrentMode(value)
-              }}
-              disabled={currentModeDisabled}
-            />
-          </FlexEnd>
-        </Flex>
-      }
-    >
+    <ContentCard>
+      <Segmented<string>
+        options={['OpenAPI', 'Manual']}
+        value={currentMode}
+        onChange={value => {
+          setCurrentMode(value)
+        }}
+        disabled={currentModeDisabled}
+      />
+      <Spacer $space={10} $samespace />
       <BlackholeForm
         data={{
           type: 'apis',
@@ -95,6 +87,6 @@ export const UpdateApisForm: FC<TUpdateApisFormProps> = ({
         backlink={backLink}
         modeData={modeData}
       />
-    </Card>
+    </ContentCard>
   )
 }
diff --git a/src/components/organisms/Forms/BuiltinForms/CreateBuiltinForm.tsx b/src/components/organisms/Forms/BuiltinForms/CreateBuiltinForm.tsx
index de532a0..96c08cd 100644
--- a/src/components/organisms/Forms/BuiltinForms/CreateBuiltinForm.tsx
+++ b/src/components/organisms/Forms/BuiltinForms/CreateBuiltinForm.tsx
@@ -1,6 +1,7 @@
 import React, { FC, useState } from 'react'
-import { Card, Flex, Segmented } from 'antd'
-import { BlackholeForm, FlexEnd } from 'components'
+import { Segmented } from 'antd'
+import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
+import { BlackholeForm } from 'components'
 
 type TCreateBuiltinFormProps = {
   namespace?: string
@@ -27,23 +28,16 @@ export const CreateBuiltinForm: FC<TCreateBuiltinFormProps> = ({ namespace, type
   }
 
   return (
-    <Card
-      title={
-        <Flex>
-          Create {namespace ? `${namespace}/` : ''}v1/{typeName}
-          <FlexEnd>
-            <Segmented<string>
-              options={['OpenAPI', 'Manual']}
-              value={currentMode}
-              onChange={value => {
-                setCurrentMode(value)
-              }}
-              disabled={currentModeDisabled}
-            />
-          </FlexEnd>
-        </Flex>
-      }
-    >
+    <ContentCard>
+      <Segmented<string>
+        options={['OpenAPI', 'Manual']}
+        value={currentMode}
+        onChange={value => {
+          setCurrentMode(value)
+        }}
+        disabled={currentModeDisabled}
+      />
+      <Spacer $space={10} $samespace />
       <BlackholeForm
         data={{
           type: 'builtin',
@@ -54,6 +48,6 @@ export const CreateBuiltinForm: FC<TCreateBuiltinFormProps> = ({ namespace, type
         backlink={backLink}
         modeData={modeData}
       />
-    </Card>
+    </ContentCard>
   )
 }
diff --git a/src/components/organisms/Forms/BuiltinForms/UpdateBuiltinForm.tsx b/src/components/organisms/Forms/BuiltinForms/UpdateBuiltinForm.tsx
index cb3cfa0..2a79d22 100644
--- a/src/components/organisms/Forms/BuiltinForms/UpdateBuiltinForm.tsx
+++ b/src/components/organisms/Forms/BuiltinForms/UpdateBuiltinForm.tsx
@@ -1,9 +1,9 @@
 import React, { FC, useState } from 'react'
-import { Spin, Alert, Card, Flex, Segmented } from 'antd'
-import { useBuiltinResourceSingle } from '@prorobotech/openapi-k8s-toolkit'
+import { Spin, Alert, Segmented } from 'antd'
+import { useBuiltinResourceSingle, ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
 import { useSelector } from 'react-redux'
 import { RootState } from 'store/store'
-import { BlackholeForm, FlexEnd } from 'components'
+import { BlackholeForm } from 'components'
 
 type TUpdateBuiltinFormProps = {
   typeName: string
@@ -54,23 +54,16 @@ export const UpdateBuiltinForm: FC<TUpdateBuiltinFormProps> = ({ typeName, entry
   const { managedFields: __, ...metadata } = data.metadata
 
   return (
-    <Card
-      title={
-        <Flex>
-          Edit v1{data.metadata.namespace ? `/namespaces/${data.metadata.namespace}` : ''}/{typeName}/{entryName}
-          <FlexEnd>
-            <Segmented<string>
-              options={['OpenAPI', 'Manual']}
-              value={currentMode}
-              onChange={value => {
-                setCurrentMode(value)
-              }}
-              disabled={currentModeDisabled}
-            />
-          </FlexEnd>
-        </Flex>
-      }
-    >
+    <ContentCard>
+      <Segmented<string>
+        options={['OpenAPI', 'Manual']}
+        value={currentMode}
+        onChange={value => {
+          setCurrentMode(value)
+        }}
+        disabled={currentModeDisabled}
+      />
+      <Spacer $space={10} $samespace />
       <BlackholeForm
         data={{
           type: 'builtin',
@@ -81,6 +74,6 @@ export const UpdateBuiltinForm: FC<TUpdateBuiltinFormProps> = ({ typeName, entry
         backlink={backLink}
         modeData={modeData}
       />
-    </Card>
+    </ContentCard>
   )
 }
diff --git a/src/components/organisms/Forms/CrdsForms/CreateCrdsForm.tsx b/src/components/organisms/Forms/CrdsForms/CreateCrdsForm.tsx
index c3d09d8..f19d19c 100644
--- a/src/components/organisms/Forms/CrdsForms/CreateCrdsForm.tsx
+++ b/src/components/organisms/Forms/CrdsForms/CreateCrdsForm.tsx
@@ -1,6 +1,7 @@
 import React, { FC, useState } from 'react'
-import { Card, Flex, Segmented } from 'antd'
-import { BlackholeForm, FlexEnd } from 'components'
+import { Segmented } from 'antd'
+import { ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
+import { BlackholeForm } from 'components'
 
 type TCreateCrdsFormProps = {
   namespace?: string
@@ -29,24 +30,16 @@ export const CreateCrdsForm: FC<TCreateCrdsFormProps> = ({ namespace, apiGroup,
   }
 
   return (
-    <Card
-      title={
-        <Flex>
-          Create {namespace ? `${namespace}/` : ''}
-          {apiGroup}/{apiVersion}/{typeName}
-          <FlexEnd>
-            <Segmented<string>
-              options={['OpenAPI', 'Manual']}
-              value={currentMode}
-              onChange={value => {
-                setCurrentMode(value)
-              }}
-              disabled={currentModeDisabled}
-            />
-          </FlexEnd>
-        </Flex>
-      }
-    >
+    <ContentCard>
+      <Segmented<string>
+        options={['OpenAPI', 'Manual']}
+        value={currentMode}
+        onChange={value => {
+          setCurrentMode(value)
+        }}
+        disabled={currentModeDisabled}
+      />
+      <Spacer $space={10} $samespace />
       <BlackholeForm
         data={{
           type: 'apis',
@@ -59,6 +52,6 @@ export const CreateCrdsForm: FC<TCreateCrdsFormProps> = ({ namespace, apiGroup,
         backlink={backLink}
         modeData={modeData}
       />
-    </Card>
+    </ContentCard>
   )
 }
diff --git a/src/components/organisms/Forms/CrdsForms/UpdateCrdsForm.tsx b/src/components/organisms/Forms/CrdsForms/UpdateCrdsForm.tsx
index 7572945..db8a4e4 100644
--- a/src/components/organisms/Forms/CrdsForms/UpdateCrdsForm.tsx
+++ b/src/components/organisms/Forms/CrdsForms/UpdateCrdsForm.tsx
@@ -1,9 +1,9 @@
 import React, { FC, useState } from 'react'
-import { Spin, Alert, Card, Flex, Segmented } from 'antd'
-import { useCrdResourceSingle } from '@prorobotech/openapi-k8s-toolkit'
+import { Spin, Alert, Segmented } from 'antd'
+import { useCrdResourceSingle, ContentCard, Spacer } from '@prorobotech/openapi-k8s-toolkit'
 import { useSelector } from 'react-redux'
 import { RootState } from 'store/store'
-import { BlackholeForm, FlexEnd } from 'components'
+import { BlackholeForm } from 'components'
 
 type TUpdateCrdsFormProps = {
   apiGroup: string
@@ -65,24 +65,16 @@ export const UpdateCrdsForm: FC<TUpdateCrdsFormProps> = ({
   const { managedFields: __, ...metadata } = data.metadata
 
   return (
-    <Card
-      title={
-        <Flex>
-          Edit {apiGroup}/{apiVersion}
-          {data.metadata.namespace ? `/namespaces/${data.metadata.namespace}` : ''}/{typeName}/{entryName}
-          <FlexEnd>
-            <Segmented<string>
-              options={['OpenAPI', 'Manual']}
-              value={currentMode}
-              onChange={value => {
-                setCurrentMode(value)
-              }}
-              disabled={currentModeDisabled}
-            />
-          </FlexEnd>
-        </Flex>
-      }
-    >
+    <ContentCard>
+      <Segmented<string>
+        options={['OpenAPI', 'Manual']}
+        value={currentMode}
+        onChange={value => {
+          setCurrentMode(value)
+        }}
+        disabled={currentModeDisabled}
+      />
+      <Spacer $space={10} $samespace />
       <BlackholeForm
         data={{
           type: 'apis',
@@ -95,6 +87,6 @@ export const UpdateCrdsForm: FC<TUpdateCrdsFormProps> = ({
         backlink={backLink}
         modeData={modeData}
       />
-    </Card>
+    </ContentCard>
   )
 }
diff --git a/src/pages/FormApiPage/FormApiPage.tsx b/src/pages/FormApiPage/FormApiPage.tsx
index a968677..a178ea4 100644
--- a/src/pages/FormApiPage/FormApiPage.tsx
+++ b/src/pages/FormApiPage/FormApiPage.tsx
@@ -31,13 +31,14 @@ export const FormApiPage: FC<TFormApiPageProps> = ({ forcedTheme }) => {
   return (
     <BaseTemplate forcedTheme={forcedTheme}>
       <ManageableBreadcrumbs />
+      <Spacer $space={20} $samespace />
       <BackLink
         to={backLink || customBacklink}
         title={`${entryName ? 'Update' : 'Create'} ${apiGroup}/${apiVersion}/${typeName}${
           entryName ? `/${entryName}` : ''
         }`}
       />
-      <Spacer $space={20} $samespace />
+      <Spacer $space={10} $samespace />
       {entryName ? (
         <UpdateApisForm
           namespace={namespace}
diff --git a/src/pages/FormBuiltinPage/FormBuiltinPage.tsx b/src/pages/FormBuiltinPage/FormBuiltinPage.tsx
index a927346..10a33d0 100644
--- a/src/pages/FormBuiltinPage/FormBuiltinPage.tsx
+++ b/src/pages/FormBuiltinPage/FormBuiltinPage.tsx
@@ -31,11 +31,12 @@ export const FormBuiltinPage: FC<TFormBuiltinPageProps> = ({ forcedTheme }) => {
   return (
     <BaseTemplate forcedTheme={forcedTheme}>
       <ManageableBreadcrumbs />
+      <Spacer $space={20} $samespace />
       <BackLink
         to={backLink || customBacklink}
         title={`${entryName ? 'Update' : 'Create'} ${typeName}${entryName ? `/${entryName}` : ''}`}
       />
-      <Spacer $space={20} $samespace />
+      <Spacer $space={10} $samespace />
       {entryName ? (
         <UpdateBuiltinForm namespace={namespace} typeName={typeName} entryName={entryName} backLink={backLink} />
       ) : (
diff --git a/src/pages/FormCrdPage/FormCrdPage.tsx b/src/pages/FormCrdPage/FormCrdPage.tsx
index 83e5410..1ea29a5 100644
--- a/src/pages/FormCrdPage/FormCrdPage.tsx
+++ b/src/pages/FormCrdPage/FormCrdPage.tsx
@@ -31,13 +31,14 @@ export const FormCrdPage: FC<TFormCrdPageProps> = ({ forcedTheme }) => {
   return (
     <BaseTemplate forcedTheme={forcedTheme}>
       <ManageableBreadcrumbs />
+      <Spacer $space={20} $samespace />
       <BackLink
         to={backLink || customBacklink}
         title={`${entryName ? 'Update' : 'Create'} ${apiGroup}/${apiVersion}/${typeName}${
           entryName ? `/${entryName}` : ''
         }`}
       />
-      <Spacer $space={20} $samespace />
+      <Spacer $space={10} $samespace />
       {entryName ? (
         <UpdateCrdsForm
           namespace={namespace}