From f278f34fe57a3248595e020de25231f996e10a27 Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Tue, 25 May 2021 08:03:20 -0400
Subject: [PATCH] Fixes form panel styling in clients -> advanced tab (#631)

* fix form panel styling

* remove modal styles
---
 src/realm-settings/KeysProvidersTab.tsx     |  2 +-
 src/realm-settings/LoginTab.tsx             |  7 +++--
 src/realm-settings/RealmSettingsSection.css | 34 +++++++++++++++------
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/realm-settings/KeysProvidersTab.tsx b/src/realm-settings/KeysProvidersTab.tsx
index e9f511d51b..b271bfdfb0 100644
--- a/src/realm-settings/KeysProvidersTab.tsx
+++ b/src/realm-settings/KeysProvidersTab.tsx
@@ -158,7 +158,7 @@ export const KeysTabInner = ({ components }: KeysTabInnerProps) => {
                 isDisabled
               />
               <DataListItemCells
-                className="test2"
+                className="data-list-cells"
                 dataListCells={[
                   <DataListCell className="name" key={"1"}>
                     <>{t("realm-settings:name")}</>
diff --git a/src/realm-settings/LoginTab.tsx b/src/realm-settings/LoginTab.tsx
index 45b9c721f7..bcf28c3ad3 100644
--- a/src/realm-settings/LoginTab.tsx
+++ b/src/realm-settings/LoginTab.tsx
@@ -20,7 +20,10 @@ export const RealmSettingsLoginTab = ({
   return (
     <>
       <PageSection variant="light">
-        <FormPanel title="Login screen customization">
+        <FormPanel
+          className="kc-login-screen"
+          title="Login screen customization"
+        >
           <FormAccess isHorizontal role="manage-realm">
             <FormGroup
               label={t("userRegistration")}
@@ -96,7 +99,7 @@ export const RealmSettingsLoginTab = ({
             </FormGroup>
           </FormAccess>
         </FormPanel>
-        <FormPanel title="Email settings">
+        <FormPanel className="kc-email-settings" title="Email settings">
           <FormAccess isHorizontal role="manage-realm">
             <FormGroup
               label={t("emailAsUsername")}
diff --git a/src/realm-settings/RealmSettingsSection.css b/src/realm-settings/RealmSettingsSection.css
index 3f2e6feaae..83e35978aa 100644
--- a/src/realm-settings/RealmSettingsSection.css
+++ b/src/realm-settings/RealmSettingsSection.css
@@ -1,3 +1,5 @@
+.pf-c-card.pf-m-flat.kc-login-screen,
+.pf-c-card.pf-m-flat.kc-email-settings,
 .pf-c-card.pf-m-flat.kc-email-template,
 .pf-c-card.pf-m-flat.kc-email-connection {
   border: none;
@@ -6,13 +8,30 @@
   padding-bottom: var(--pf-global--spacer--sm);
 }
 
-div.pf-c-card__header.kc-form-panel__header {
+article.pf-c-card.pf-m-flat.kc-email-template
+  > .pf-c-card__header.kc-form-panel__header,
+article.pf-c-card.pf-m-flat.kc-email-connection
+  > .pf-c-card__header.kc-form-panel__header {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  padding-left: 0px;
+  padding-bottom: 0px;
+}
+
+.kc-login-screen > div.pf-c-card__header.kc-form-panel__header,
+.kc-email-settings > div.pf-c-card__header.kc-form-panel__header {
   padding-bottom: 0px;
   padding-left: 0px;
   padding-top: 0px;
 }
 
-div.pf-c-card__body.kc-form-panel__body {
+.kc-email-settings > div.pf-c-card__body.kc-form-panel__body,
+.kc-login-screen > div.pf-c-card__body.kc-form-panel__body {
+  padding-left: 0px;
+  padding-bottom: var(--pf-global--spacer--2xl);
+}
+
+.kc-email-template > div.pf-c-card__body.kc-form-panel__body {
   padding-left: 0px;
   padding-bottom: var(--pf-global--spacer--2xl);
 }
@@ -21,11 +40,7 @@ button#kc-certificate.pf-c-button.pf-m-secondary {
   margin-left: var(--pf-global--spacer--md);
 }
 
-.pf-c-data-list__item-row.test {
-  font-weight: bold;
-}
-
-.pf-c-data-list__item-content.test2 {
+.pf-c-data-list__item-content.data-list-cells {
   margin-left: var(--pf-global--spacer--xl);
 }
 
@@ -49,6 +64,7 @@ button.pf-c-button.pf-m-link.add-provider {
   padding-left: var(--pf-c-toolbar__content--PaddingLeft);
 }
 
-.button-wrapper {
-  white-space: nowrap;
+.pf-c-form__group-label {
+  display: flex;
+  align-items: start;
 }