Merge pull request #2170 from metalice/CNV-48097-fix-some-styling-in-…

…tabs CNV-48097: Fix tabs styling to match
kubevirt-ui · Sep 11, 2024 · 3160948 · 3160948
2 parents ac28f8b + 7df4724
commit 3160948
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 57 deletions.
diff --git a/src/utils/styles/ListPageCreateButton.scss b/src/utils/styles/ListPageCreateButton.scss
diff --git a/src/views/catalog/wizard/tabs/disks/WizardDisksTab.tsx b/src/views/catalog/wizard/tabs/disks/WizardDisksTab.tsx
@@ -15,15 +15,13 @@ import {
   useListPageFilter,
   VirtualizedTable,
 } from '@openshift-console/dynamic-plugin-sdk';
-import { Flex, FlexItem } from '@patternfly/react-core';
+import { Flex, FlexItem, PageSection, PageSectionVariants } from '@patternfly/react-core';
 
 import DiskRow from './components/DiskRow';
 import useDiskColumns from './hooks/useDiskColumns';
 import useDisksFilters from './hooks/useDisksFilters';
 import useWizardDisksTableData from './hooks/useWizardDisksTableData';
 
-import './wizard-disk-tab.scss';
-
 const WizardDisksTab: WizardTab = ({ tabsData, updateTabsData, updateVM, vm }) => {
   const { createModal } = useModal();
   const columns = useDiskColumns();
@@ -32,7 +30,7 @@ const WizardDisksTab: WizardTab = ({ tabsData, updateTabsData, updateVM, vm }) =
   const [data, filteredData, onFilterChange] = useListPageFilter(disks, filters);
 
   return (
-    <div className="wizard-disk-tab">
+    <PageSection variant={PageSectionVariants.light}>
       <ListPageBody>
         <SidebarEditor
           onResourceUpdate={(newVM) => updateVM(newVM)}
@@ -89,7 +87,7 @@ const WizardDisksTab: WizardTab = ({ tabsData, updateTabsData, updateVM, vm }) =
           />
         </SidebarEditor>
       </ListPageBody>
-    </div>
+    </PageSection>
   );
 };
 

diff --git a/src/views/catalog/wizard/tabs/disks/wizard-disk-tab.scss b/src/views/catalog/wizard/tabs/disks/wizard-disk-tab.scss
diff --git a/src/views/catalog/wizard/tabs/network/WizardNetworkTab.tsx b/src/views/catalog/wizard/tabs/network/WizardNetworkTab.tsx
@@ -6,21 +6,19 @@ import SidebarEditor from '@kubevirt-utils/components/SidebarEditor/SidebarEdito
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import { PATHS_TO_HIGHLIGHT } from '@kubevirt-utils/resources/vm/utils/constants';
 import { ListPageBody, ListPageCreateButton } from '@openshift-console/dynamic-plugin-sdk';
+import { PageSection, PageSectionVariants } from '@patternfly/react-core';
 
 import NetworkInterfaceList from './components/list/NetworkInterfaceList';
 import WizardNetworkInterfaceModal from './components/modal/WizardNetworkInterfaceModal';
 
-import 'src/utils/styles/ListPageCreateButton.scss';
-import './wizard-network-tab.scss';
-
 const WizardNetworkTab: WizardTab = ({ updateVM, vm }) => {
   const { t } = useKubevirtTranslation();
   const { createModal } = useModal();
 
   const actionText = t('Add network interface');
 
   return (
-    <div className="wizard-network-tab">
+    <PageSection variant={PageSectionVariants.light}>
       <ListPageBody>
         <SidebarEditor
           onResourceUpdate={(newVM) => updateVM(newVM)}
@@ -47,7 +45,7 @@ const WizardNetworkTab: WizardTab = ({ updateVM, vm }) => {
           <NetworkInterfaceList vm={vm} />
         </SidebarEditor>
       </ListPageBody>
-    </div>
+    </PageSection>
   );
 };
 

diff --git a/src/views/catalog/wizard/tabs/network/wizard-network-tab.scss b/src/views/catalog/wizard/tabs/network/wizard-network-tab.scss
diff --git a/src/views/templates/details/tabs/network/TemplateNetworkPage.tsx b/src/views/templates/details/tabs/network/TemplateNetworkPage.tsx
@@ -5,16 +5,13 @@ import { useModal } from '@kubevirt-utils/components/ModalProvider/ModalProvider
 import SidebarEditor from '@kubevirt-utils/components/SidebarEditor/SidebarEditor';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import { k8sUpdate, ListPageBody } from '@openshift-console/dynamic-plugin-sdk';
-import { Button, Title } from '@patternfly/react-core';
+import { Button, PageSection, PageSectionVariants, Title } from '@patternfly/react-core';
 
 import useEditTemplateAccessReview from '../../hooks/useIsTemplateEditable';
 
 import NetworkInterfaceList from './components/list/NetworkInterfaceList';
 import TemplatesNetworkInterfaceModal from './components/modal/TemplatesNetworkInterfaceModal';
 
-import 'src/utils/styles/ListPageCreateButton.scss';
-import './template-network-tab.scss';
-
 type TemplateNetworkProps = {
   obj: V1Template;
 };
@@ -37,7 +34,7 @@ const TemplateNetwork: FC<TemplateNetworkProps> = ({ obj: template }) => {
   );
 
   return (
-    <div className="template-network-tab">
+    <PageSection variant={PageSectionVariants.light}>
       <ListPageBody>
         <SidebarEditor<V1Template> onResourceUpdate={onSubmitTemplate} resource={template}>
           <Title className="list-page-create-button-margin" headingLevel="h2">
@@ -64,7 +61,7 @@ const TemplateNetwork: FC<TemplateNetworkProps> = ({ obj: template }) => {
           <NetworkInterfaceList template={template} />
         </SidebarEditor>
       </ListPageBody>
-    </div>
+    </PageSection>
   );
 };
 

diff --git a/src/views/templates/details/tabs/network/template-network-tab.scss b/src/views/templates/details/tabs/network/template-network-tab.scss
diff --git a/src/views/virtualmachines/details/tabs/configuration/network/NetworkTab.tsx b/src/views/virtualmachines/details/tabs/configuration/network/NetworkTab.tsx
@@ -12,7 +12,6 @@ import { ConfigurationInnerTabProps } from '../utils/types';
 import AddNetworkInterfaceButton from './components/AddNetworkInterfaceButton';
 import NetworkInterfaceList from './components/list/NetworkInterfaceList';
 
-import 'src/utils/styles/ListPageCreateButton.scss';
 import './network-tab.scss';
 
 const NetworkTab: FC<ConfigurationInnerTabProps> = ({ vm, vmi }) => {