updated to match ui design (#369)

* updated to match ui design

fixes: #323

* fixed test

* Update src/components/help-enabler/HelpHeader.tsx

Co-authored-by: Eugenia <32821331+jenny-s51@users.noreply.github.com>

* Update src/components/help-enabler/help-header.css

Co-authored-by: Eugenia <32821331+jenny-s51@users.noreply.github.com>

* fixed merge error

* changed to use "t" function

Co-authored-by: Eugenia <32821331+jenny-s51@users.noreply.github.com>

src/common-help.json

@@ -1,4 +1,5 @@
 {
   "common-help": {
+    "helpToggleInfo": "This toggle will enable / disable part of the help info in the console. Includes any help text, links and popovers."
   }
 }

src/components/help-enabler/HelpHeader.tsx

@@ -1,15 +1,19 @@
 import React, { useState, useContext, ReactNode, createContext } from "react";
 import {
+  Divider,
   Dropdown,
   DropdownItem,
   DropdownToggle,
   Split,
   SplitItem,
   Switch,
+  TextContent,
 } from "@patternfly/react-core";
 import { Trans, useTranslation } from "react-i18next";
 import { HelpIcon, ExternalLinkAltIcon } from "@patternfly/react-icons";
 
+import "./help-header.css";
+
 type HelpProps = {
   children: ReactNode;
 };
@@ -51,16 +55,8 @@ export const HelpHeader = () => {
         </SplitItem>
       </Split>
     </DropdownItem>,
-    <DropdownItem
+    <Divider key="divide" />,
-      key="enable"
+    <DropdownItem key="enable" id="enable">
-      id="enable"
-      description={
-        <Trans>
-          This toggle will enable / disable part of the help info in the
-          console. Includes any help text, links and popovers.
-        </Trans>
-      }
-    >
       <Split>
         <SplitItem isFilled>{t("enableHelpMode")}</SplitItem>
         <SplitItem>
@@ -68,10 +64,15 @@ export const HelpHeader = () => {
             id="enableHelp"
             aria-label="Help is enabled"
             isChecked={help.enabled}
+            label=""
+            className="keycloak_help-header-switch"
             onChange={() => help.toggleHelp()}
           />
         </SplitItem>
       </Split>
+      <TextContent className="keycloak_help-header-description">
+        {t("common-help:helpToggleInfo")}
+      </TextContent>
     </DropdownItem>,
   ];
   return (

src/components/help-enabler/__tests__/__snapshots__/HelpHeader.test.tsx.snap

@@ -80,20 +80,21 @@ exports[`<HelpHeader /> enable help 1`] = `
           </div>
         </a>
       </li>
+      <hr
+        class="pf-c-divider"
+        index="1"
+      />
       <li
         id="enable"
         role="menuitem"
       >
         <a
           aria-disabled="false"
-          class="pf-c-dropdown__menu-item pf-m-description"
+          class="pf-c-dropdown__menu-item"
           data-ouia-component-id="OUIA-Generated-DropdownItem-4"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           tabindex="-1"
-        >
-          <div
-            class="pf-c-dropdown__menu-item-main"
         >
           <div
             class="pf-l-split"
@@ -107,7 +108,7 @@ exports[`<HelpHeader /> enable help 1`] = `
               class="pf-l-split__item"
             >
               <label
-                  class="pf-c-switch"
+                class="pf-c-switch keycloak_help-header-switch"
                 data-ouia-component-id="OUIA-Generated-Switch-2"
                 data-ouia-component-type="PF4/Switch"
                 data-ouia-safe="true"
@@ -122,33 +123,22 @@ exports[`<HelpHeader /> enable help 1`] = `
                 />
                 <span
                   class="pf-c-switch__toggle"
-                  >
-                    <div
-                      aria-hidden="true"
-                      class="pf-c-switch__toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 512 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
                 />
-                      </svg>
+                <span
-                    </div>
+                  aria-hidden="true"
-                  </span>
+                  class="pf-c-switch__label pf-m-on"
+                />
+                <span
+                  aria-hidden="true"
+                  class="pf-c-switch__label pf-m-off"
+                />
               </label>
             </div>
           </div>
-          </div>
           <div
-            class="pf-c-dropdown__menu-item-description"
+            class="pf-c-content keycloak_help-header-description"
           >
-            This toggle will enable / disable part of the help info in the console. Includes any help text, links and popovers.
+            helpToggleInfo
           </div>
         </a>
       </li>
@@ -242,20 +232,21 @@ exports[`<HelpHeader /> open dropdown 1`] = `
           </div>
         </a>
       </li>
+      <hr
+        class="pf-c-divider"
+        index="1"
+      />
       <li
         id="enable"
         role="menuitem"
       >
         <a
           aria-disabled="false"
-          class="pf-c-dropdown__menu-item pf-m-description"
+          class="pf-c-dropdown__menu-item"
           data-ouia-component-id="OUIA-Generated-DropdownItem-2"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           tabindex="-1"
-        >
-          <div
-            class="pf-c-dropdown__menu-item-main"
         >
           <div
             class="pf-l-split"
@@ -269,7 +260,7 @@ exports[`<HelpHeader /> open dropdown 1`] = `
               class="pf-l-split__item"
             >
               <label
-                  class="pf-c-switch"
+                class="pf-c-switch keycloak_help-header-switch"
                 data-ouia-component-id="OUIA-Generated-Switch-1"
                 data-ouia-component-type="PF4/Switch"
                 data-ouia-safe="true"
@@ -284,33 +275,22 @@ exports[`<HelpHeader /> open dropdown 1`] = `
                 />
                 <span
                   class="pf-c-switch__toggle"
-                  >
-                    <div
-                      aria-hidden="true"
-                      class="pf-c-switch__toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 512 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
                 />
-                      </svg>
+                <span
-                    </div>
+                  aria-hidden="true"
-                  </span>
+                  class="pf-c-switch__label pf-m-on"
+                />
+                <span
+                  aria-hidden="true"
+                  class="pf-c-switch__label pf-m-off"
+                />
               </label>
             </div>
           </div>
-          </div>
           <div
-            class="pf-c-dropdown__menu-item-description"
+            class="pf-c-content keycloak_help-header-description"
           >
-            This toggle will enable / disable part of the help info in the console. Includes any help text, links and popovers.
+            helpToggleInfo
           </div>
         </a>
       </li>

src/components/help-enabler/help-header.css

@@ -0,0 +1,16 @@
+
+
+.keycloak_help-header-description {
+  padding-top: var(--pf-global--spacer--lg);
+  overflow-wrap: break-word;
+  white-space: normal;
+  color: var(--pf-c-dropdown__menu-item--Color);
+}
+
+.keycloak_help-header-switch {
+  margin-left: var(--pf-global--spacer--xl);
+}
+
+.keycloak_help-header-switch .pf-c-switch__toggle::before {
+  background-color: var(--pf-c-switch__toggle-icon--Color);
+}