From 23399d697f66ff36876efc2c09e64372963570b5 Mon Sep 17 00:00:00 2001
From: Jayashree-panda <jayashreepanda12345@gmail.com>
Date: Tue, 9 Feb 2021 10:37:16 +0530
Subject: [PATCH] fixes inconsistent fonts on step 1 and step 2 of baremetal
 wizard

Signed-off-by: Jayashree-panda <jayashreepanda12345@gmail.com>
---
 .../create-sc/wizard-pages/auto-detect-volume.tsx      |  4 ++--
 .../create-sc/wizard-pages/create-local-volume-set.tsx |  4 ++--
 .../auto-detect-volume/auto-detect-volume-inner.tsx    | 10 +++++++---
 .../auto-detect-volume/auto-detect-volume.tsx          |  4 ++--
 .../local-volume-set/create-local-volume-set.tsx       |  4 ++--
 .../local-volume-set/local-volume-set-inner.tsx        |  9 +++++++--
 6 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/frontend/packages/ceph-storage-plugin/src/components/ocs-install/attached-devices/create-sc/wizard-pages/auto-detect-volume.tsx b/frontend/packages/ceph-storage-plugin/src/components/ocs-install/attached-devices/create-sc/wizard-pages/auto-detect-volume.tsx
index 9d64f5df7234..77fbb5dbba09 100644
--- a/frontend/packages/ceph-storage-plugin/src/components/ocs-install/attached-devices/create-sc/wizard-pages/auto-detect-volume.tsx
+++ b/frontend/packages/ceph-storage-plugin/src/components/ocs-install/attached-devices/create-sc/wizard-pages/auto-detect-volume.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Form } from '@patternfly/react-core';
+import { Form, TextVariants } from '@patternfly/react-core';
 import {
   AutoDetectVolumeInner,
   AutoDetectVolumeHeader,
@@ -11,7 +11,7 @@ import '../../attached-devices.scss';
 
 export const AutoDetectVolume: React.FC<AutoDetectVolumeProps> = ({ state, dispatch }) => (
   <>
-    <AutoDetectVolumeHeader />
+    <AutoDetectVolumeHeader className={'ocs-install-wizard__h3'} variant={TextVariants.h3} />
     <Form noValidate={false} className="ceph-ocs-install__auto-detect-table">
       <AutoDetectVolumeInner state={state} dispatch={dispatch} taintsFilter={hasOCSTaint} />
     </Form>
diff --git a/frontend/packages/ceph-storage-plugin/src/components/ocs-install/attached-devices/create-sc/wizard-pages/create-local-volume-set.tsx b/frontend/packages/ceph-storage-plugin/src/components/ocs-install/attached-devices/create-sc/wizard-pages/create-local-volume-set.tsx
index 460276954fd7..2fd4e4159bb6 100644
--- a/frontend/packages/ceph-storage-plugin/src/components/ocs-install/attached-devices/create-sc/wizard-pages/create-local-volume-set.tsx
+++ b/frontend/packages/ceph-storage-plugin/src/components/ocs-install/attached-devices/create-sc/wizard-pages/create-local-volume-set.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, Alert, Button, Grid, GridItem } from '@patternfly/react-core';
+import { Form, Alert, Button, Grid, GridItem, TextVariants } from '@patternfly/react-core';
 import { Modal, useFlag } from '@console/shared';
 import { k8sCreate } from '@console/internal/module/k8s';
 import { LocalVolumeSetModel } from '@console/local-storage-operator-plugin/src/models';
@@ -64,7 +64,7 @@ export const CreateLocalVolumeSet: React.FC<CreateLocalVolumeSetProps> = ({
 
   return (
     <>
-      <LocalVolumeSetHeader />
+      <LocalVolumeSetHeader className={'ocs-install-wizard__h3'} variant={TextVariants.h3} />
       <Grid className="ceph-ocs-install__form-wrapper">
         <GridItem lg={10} md={12} sm={12}>
           <Form noValidate={false}>
diff --git a/frontend/packages/local-storage-operator-plugin/src/components/auto-detect-volume/auto-detect-volume-inner.tsx b/frontend/packages/local-storage-operator-plugin/src/components/auto-detect-volume/auto-detect-volume-inner.tsx
index 68b420336877..b317941e4c97 100644
--- a/frontend/packages/local-storage-operator-plugin/src/components/auto-detect-volume/auto-detect-volume-inner.tsx
+++ b/frontend/packages/local-storage-operator-plugin/src/components/auto-detect-volume/auto-detect-volume-inner.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { FormGroup, Radio } from '@patternfly/react-core';
+import { FormGroup, Radio, Text, TextContent } from '@patternfly/react-core';
 import { ListPage } from '@console/internal/components/factory';
 import { NodeKind } from '@console/internal/module/k8s';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
@@ -101,12 +101,16 @@ export const AutoDetectVolumeInner: React.FC<AutoDetectVolumeInnerProps> = ({
   );
 };
 
-export const AutoDetectVolumeHeader = () => {
+export const AutoDetectVolumeHeader = ({ className, variant }) => {
   const { t } = useTranslation();
 
   return (
     <>
-      <h1 className="co-create-operand__header-text">{t('lso-plugin~Auto Detect Volume')}</h1>
+      <TextContent>
+        <Text component={variant} className={className}>
+          {t('lso-plugin~Auto Detect Volume')}
+        </Text>
+      </TextContent>
       <p className="help-block">
         {t('lso-plugin~Allows you to discover the available disks on all available nodes')}
       </p>
diff --git a/frontend/packages/local-storage-operator-plugin/src/components/auto-detect-volume/auto-detect-volume.tsx b/frontend/packages/local-storage-operator-plugin/src/components/auto-detect-volume/auto-detect-volume.tsx
index cbecb32ccaec..8737c6542f8a 100644
--- a/frontend/packages/local-storage-operator-plugin/src/components/auto-detect-volume/auto-detect-volume.tsx
+++ b/frontend/packages/local-storage-operator-plugin/src/components/auto-detect-volume/auto-detect-volume.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { match as RouterMatch } from 'react-router';
-import { ActionGroup, Button, Form } from '@patternfly/react-core';
+import { ActionGroup, Button, Form, TextVariants } from '@patternfly/react-core';
 import {
   resourcePathFromModel,
   BreadCrumbs,
@@ -105,7 +105,7 @@ const AutoDetectVolume: React.FC = withHandlePromise<AutoDetectVolumeProps & Han
             />
           </div>
 
-          <AutoDetectVolumeHeader />
+          <AutoDetectVolumeHeader className={null} variant={TextVariants.h1} />
         </div>
         <Form
           noValidate={false}
diff --git a/frontend/packages/local-storage-operator-plugin/src/components/local-volume-set/create-local-volume-set.tsx b/frontend/packages/local-storage-operator-plugin/src/components/local-volume-set/create-local-volume-set.tsx
index 28aae24a2e9e..b00144fbfef3 100644
--- a/frontend/packages/local-storage-operator-plugin/src/components/local-volume-set/create-local-volume-set.tsx
+++ b/frontend/packages/local-storage-operator-plugin/src/components/local-volume-set/create-local-volume-set.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { match as RouterMatch } from 'react-router';
-import { ActionGroup, Button, Form } from '@patternfly/react-core';
+import { ActionGroup, Button, Form, TextVariants } from '@patternfly/react-core';
 import {
   resourcePathFromModel,
   BreadCrumbs,
@@ -79,7 +79,7 @@ const CreateLocalVolumeSet: React.FC = withHandlePromise<
             ]}
           />
         </div>
-        <LocalVolumeSetHeader />
+        <LocalVolumeSetHeader className={null} variant={TextVariants.h1} />
       </div>
       <Form
         noValidate={false}
diff --git a/frontend/packages/local-storage-operator-plugin/src/components/local-volume-set/local-volume-set-inner.tsx b/frontend/packages/local-storage-operator-plugin/src/components/local-volume-set/local-volume-set-inner.tsx
index 4f0503da81a7..7417679fdd6d 100644
--- a/frontend/packages/local-storage-operator-plugin/src/components/local-volume-set/local-volume-set-inner.tsx
+++ b/frontend/packages/local-storage-operator-plugin/src/components/local-volume-set/local-volume-set-inner.tsx
@@ -7,6 +7,7 @@ import {
   ExpandableSection,
   TextInputTypes,
   Text,
+  TextContent,
   TextVariants,
   Tooltip,
 } from '@patternfly/react-core';
@@ -307,12 +308,16 @@ type LocalVolumeSetInnerProps = {
   taintsFilter?: (node: NodeKind) => boolean;
 };
 
-export const LocalVolumeSetHeader = () => {
+export const LocalVolumeSetHeader = ({ className, variant }) => {
   const { t } = useTranslation();
 
   return (
     <>
-      <h1 className="co-create-operand__header-text">{t('lso-plugin~Local Volume Set')}</h1>
+      <TextContent>
+        <Text component={variant} className={className}>
+          {t('lso-plugin~Local Volume Set')}
+        </Text>
+      </TextContent>
       <p className="help-block">
         {t(
           'lso-plugin~A Local Volume Set allows you to filter a set of storage volumes group them and create a dedicated storage class to consume storage for them.',