From ac65df58b85ab9b6aba11014c99e0f68e8f9216b Mon Sep 17 00:00:00 2001
From: Sarah Rambacher <srambach@redhat.com>
Date: Tue, 5 Jan 2021 09:43:01 -0500
Subject: [PATCH] fix spacing of wizard section header

---
 .../wizard-section-header/WizardSectionHeader.tsx      |  9 +++++++--
 .../wizard-section-header/wizard-section-header.css    | 10 ++++++++++
 src/user-federation/UserFederationLdapWizard.tsx       |  6 +++---
 3 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 src/components/wizard-section-header/wizard-section-header.css

diff --git a/src/components/wizard-section-header/WizardSectionHeader.tsx b/src/components/wizard-section-header/WizardSectionHeader.tsx
index ffe2f5105d..f3e22c1112 100644
--- a/src/components/wizard-section-header/WizardSectionHeader.tsx
+++ b/src/components/wizard-section-header/WizardSectionHeader.tsx
@@ -17,6 +17,7 @@ import {
   DropdownPosition,
   Title,
 } from "@patternfly/react-core";
+import "./wizard-section-header.css";
 
 export type WizardSectionHeaderProps = {
   title: string;
@@ -34,12 +35,16 @@ export const WizardSectionHeader = ({
       <Title
         size={"xl"}
         headingLevel={"h2"}
-        className={showDescription ? "pf-u-mb-sm" : "pf-u-mb-lg"}
+        className={
+          showDescription
+            ? "kc-wizard-section-header__title--has-description"
+            : "kc-wizard-section-header__title"
+        }
       >
         {title}
       </Title>
       {showDescription && (
-        <TextContent className="pf-u-mb-lg">
+        <TextContent className="kc-wizard-section-header__description">
           <Text>{description}</Text>
         </TextContent>
       )}
diff --git a/src/components/wizard-section-header/wizard-section-header.css b/src/components/wizard-section-header/wizard-section-header.css
new file mode 100644
index 0000000000..e3a69adb4b
--- /dev/null
+++ b/src/components/wizard-section-header/wizard-section-header.css
@@ -0,0 +1,10 @@
+.kc-wizard-section-header__title {
+  margin-bottom: var(--pf-global--spacer--lg);
+}
+.kc-wizard-section-header__title--has-description {
+  margin-bottom: var(--pf-global--spacer--sm);
+}
+
+.kc-wizard-section-header__description {
+  margin-bottom: var(--pf-global--spacer--lg);
+}
diff --git a/src/user-federation/UserFederationLdapWizard.tsx b/src/user-federation/UserFederationLdapWizard.tsx
index 8037c987c2..7d345452a1 100644
--- a/src/user-federation/UserFederationLdapWizard.tsx
+++ b/src/user-federation/UserFederationLdapWizard.tsx
@@ -126,9 +126,9 @@ export const UserFederationLdapWizard = () => {
           else if (activeStep.id == "ldapAdvancedSettingsStep") {
             return (
               <>
-                <Button onClick={() => {}}>
-                  {" "}
-                  //TODO: close the wizard and finish
+                <Button
+                  onClick={() => {}} //TODO: close the wizard and finish
+                >
                   {t("common:finish")}
                 </Button>
                 <Button variant="secondary" onClick={onBack}>