From 5c94dd584bd99945c305c58a7ca6b09c5d5b095e Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Tue, 20 Apr 2021 21:46:07 +0200
Subject: [PATCH] fixing comment on issue: (#522)

* fixing comment on issue:

https://github.com/keycloak/keycloak-admin-ui/issues/428#issuecomment-818504696

* fixed top margin

* fixed devider length
---
 src/clients/AdvancedTab.tsx             |   2 +-
 src/clients/ClientSettings.tsx          |   2 +-
 src/clients/credentials/Credentials.tsx | 194 ++++++++++++------------
 3 files changed, 100 insertions(+), 98 deletions(-)

diff --git a/src/clients/AdvancedTab.tsx b/src/clients/AdvancedTab.tsx
index c7a3b51f85..17466bc3c4 100644
--- a/src/clients/AdvancedTab.tsx
+++ b/src/clients/AdvancedTab.tsx
@@ -177,7 +177,7 @@ export const AdvancedTab = ({
   }
 
   return (
-    <PageSection variant="light">
+    <PageSection variant="light" className="pf-u-py-0">
       <ScrollForm sections={sections}>
         <>
           <Text className="pf-u-pb-lg">
diff --git a/src/clients/ClientSettings.tsx b/src/clients/ClientSettings.tsx
index 1305b625f6..7da0cb38a2 100644
--- a/src/clients/ClientSettings.tsx
+++ b/src/clients/ClientSettings.tsx
@@ -40,7 +40,7 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
   return (
     <>
       <ScrollForm
-        className="pf-u-p-lg"
+        className="pf-u-px-lg"
         sections={[
           t("capabilityConfig"),
           t("generalSettings"),
diff --git a/src/clients/credentials/Credentials.tsx b/src/clients/credentials/Credentials.tsx
index d0dccc78ee..d53331d0fa 100644
--- a/src/clients/credentials/Credentials.tsx
+++ b/src/clients/credentials/Credentials.tsx
@@ -11,6 +11,7 @@ import {
   ClipboardCopy,
   Divider,
   FormGroup,
+  PageSection,
   Select,
   SelectOption,
   SelectVariant,
@@ -143,109 +144,110 @@ export const Credentials = ({ clientId, save }: CredentialsProps) => {
   });
 
   return (
-    <FormAccess isHorizontal className="pf-u-mt-md" role="manage-clients">
-      <ClientSecretConfirm />
-      <AccessTokenConfirm />
-      <Card isFlat>
-        <CardBody>
-          <FormGroup
-            label={t("clientAuthenticator")}
-            fieldId="kc-client-authenticator-type"
-            labelIcon={
-              <HelpItem
-                helpText="clients-help:client-authenticator-type"
-                forLabel={t("clientAuthenticator")}
-                forID="kc-client-authenticator-type"
-              />
-            }
-          >
-            <Controller
-              name="clientAuthenticatorType"
-              control={control}
-              render={({ onChange, value }) => (
-                <Select
-                  toggleId="kc-client-authenticator-type"
-                  required
-                  onToggle={() => isOpen(!open)}
-                  onSelect={(_, value) => {
-                    onChange(value as string);
-                    isOpen(false);
-                  }}
-                  selections={value}
-                  variant={SelectVariant.single}
-                  aria-label={t("clientAuthenticator")}
-                  isOpen={open}
-                >
-                  {providers.map((option) => (
-                    <SelectOption
-                      selected={option.id === value}
-                      key={option.id}
-                      value={option.id}
-                    >
-                      {option.displayName}
-                    </SelectOption>
-                  ))}
-                </Select>
-              )}
-            />
-          </FormGroup>
-          {clientAuthenticatorType === "client-jwt" && <SignedJWT />}
-          {clientAuthenticatorType === "client-x509" && <X509 />}
-          <ActionGroup>
-            <Button
-              variant="primary"
-              onClick={() => save()}
-              isDisabled={!isDirty}
+    <PageSection>
+      <FormAccess isHorizontal className="pf-u-mt-md" role="manage-clients">
+        <ClientSecretConfirm />
+        <AccessTokenConfirm />
+        <Card isFlat>
+          <CardBody>
+            <FormGroup
+              label={t("clientAuthenticator")}
+              fieldId="kc-client-authenticator-type"
+              labelIcon={
+                <HelpItem
+                  helpText="clients-help:client-authenticator-type"
+                  forLabel={t("clientAuthenticator")}
+                  forID="kc-client-authenticator-type"
+                />
+              }
             >
-              {t("common:save")}
-            </Button>
-          </ActionGroup>
-        </CardBody>
-        <CardBody>
+              <Controller
+                name="clientAuthenticatorType"
+                control={control}
+                render={({ onChange, value }) => (
+                  <Select
+                    toggleId="kc-client-authenticator-type"
+                    required
+                    onToggle={() => isOpen(!open)}
+                    onSelect={(_, value) => {
+                      onChange(value as string);
+                      isOpen(false);
+                    }}
+                    selections={value}
+                    variant={SelectVariant.single}
+                    aria-label={t("clientAuthenticator")}
+                    isOpen={open}
+                  >
+                    {providers.map((option) => (
+                      <SelectOption
+                        selected={option.id === value}
+                        key={option.id}
+                        value={option.id}
+                      >
+                        {option.displayName}
+                      </SelectOption>
+                    ))}
+                  </Select>
+                )}
+              />
+            </FormGroup>
+            {clientAuthenticatorType === "client-jwt" && <SignedJWT />}
+            {clientAuthenticatorType === "client-x509" && <X509 />}
+            <ActionGroup>
+              <Button
+                variant="primary"
+                onClick={() => save()}
+                isDisabled={!isDirty}
+              >
+                {t("common:save")}
+              </Button>
+            </ActionGroup>
+          </CardBody>
+          {(clientAuthenticatorType === "client-secret" ||
+            clientAuthenticatorType === "client-secret-jwt") && <Divider />}
           {(clientAuthenticatorType === "client-secret" ||
             clientAuthenticatorType === "client-secret-jwt") && (
-            <>
-              <Divider className="pf-u-mb-md" />
+            <CardBody>
               <ClientSecret
                 secret={secret}
                 toggle={toggleClientSecretConfirm}
               />
-            </>
+            </CardBody>
           )}
-        </CardBody>
-      </Card>
-      <Card isFlat>
-        <CardBody>
-          <FormGroup
-            label={t("registrationAccessToken")}
-            fieldId="kc-access-token"
-            labelIcon={
-              <HelpItem
-                helpText="clients-help:registration-access-token"
-                forLabel={t("registrationAccessToken")}
-                forID="kc-access-token"
-              />
-            }
-          >
-            <Split hasGutter>
-              <SplitItem isFilled>
-                <ClipboardCopy id="kc-access-token" isReadOnly>
-                  {accessToken}
-                </ClipboardCopy>
-              </SplitItem>
-              <SplitItem>
-                <Button
-                  variant="secondary"
-                  onClick={toggleAccessTokenConfirm}
-                  isDisabled={isDirty}
-                >
-                  {t("regenerate")}
-                </Button>
-              </SplitItem>
-            </Split>
-          </FormGroup>
-        </CardBody>
-      </Card>
-    </FormAccess>
+        </Card>
+        <Card isFlat>
+          <CardBody>
+            <FormGroup
+              label={t("registrationAccessToken")}
+              fieldId="kc-access-token"
+              labelIcon={
+                <HelpItem
+                  helpText="clients-help:registration-access-token"
+                  forLabel={t("registrationAccessToken")}
+                  forID="kc-access-token"
+                />
+              }
+            >
+              <Split hasGutter>
+                <SplitItem isFilled>
+                  <ClipboardCopy id="kc-access-token" isReadOnly>
+                    {accessToken}
+                  </ClipboardCopy>
+                </SplitItem>
+                <SplitItem>
+                  <Button
+                    variant="secondary"
+                    onClick={toggleAccessTokenConfirm}
+                    isDisabled={isDirty}
+                  >
+                    {t("regenerate")}
+                  </Button>
+                </SplitItem>
+              </Split>
+            </FormGroup>
+          </CardBody>
+        </Card>
+      </FormAccess>
+    </PageSection>
   );
 };