Restyle realm selector and fix centering (#87)

* clean up CSS on realm selector

* Fix width and correct CSS of realm selector

* Format and update snapshots

* Remove module css

* update snapshot

src/PageNav.tsx

@@ -1,6 +1,12 @@
 import React, { useState, useContext } from "react";
 import { useHistory } from "react-router-dom";
-import { Nav, NavItem, NavGroup, PageSidebar } from "@patternfly/react-core";
+import {
+  Nav,
+  NavItem,
+  NavGroup,
+  NavList,
+  PageSidebar,
+} from "@patternfly/react-core";
 import { RealmSelector } from "./components/realm-selector/RealmSelector";
 import { DataLoader } from "./components/data-loader/DataLoader";
 import { HttpClientContext } from "./http-service/HttpClientContext";
@@ -49,11 +55,15 @@ export const PageNav: React.FunctionComponent = () => {
     <PageSidebar
       nav={
         <Nav onSelect={onSelect}>
-          <DataLoader loader={realmLoader}>
+          <NavList>
-            {(realmList) => (
+            <NavItem className="keycloak__page_nav__nav_item__realm-selector">
-              <RealmSelector realm="Master" realmList={realmList || []} />
+              <DataLoader loader={realmLoader}>
-            )}
+                {(realmList) => (
-          </DataLoader>
+                  <RealmSelector realm="Master" realmList={realmList || []} />
+                )}
+              </DataLoader>
+            </NavItem>
+          </NavList>
           <NavGroup title="Manage">
             {makeNavItem("Clients", "clients")}
             {makeNavItem("Client Scopes", "client-scopes")}

src/components/realm-selector/RealmSelector.tsx

@@ -10,7 +10,7 @@ import {
   Divider,
 } from "@patternfly/react-core";
 
-import style from "./realm-selector.module.css";
+import "./realm-selector.css";
 
 type RealmSelectorProps = {
   realm: string;
@@ -37,13 +37,13 @@ export const RealmSelector = ({ realm, realmList }: RealmSelectorProps) => {
   return (
     <Dropdown
       id="realm-select"
-      className={style.dropdown}
+      className="keycloak__realm_selector__dropdown"
       isOpen={open}
       toggle={
         <DropdownToggle
           id="realm-select-toggle"
           onToggle={() => setOpen(!open)}
-          className={style.toggle}
+          className="keycloak__realm_selector_dropdown__toggle"
         >
           {currentRealm}
         </DropdownToggle>

src/components/realm-selector/__tests__/__snapshots__/RealmSelector.test.tsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders realm selector 1`] = `"<div id=\\"realm-select\\" class=\\"pf-c-dropdown pf-m-expanded\\" data-ouia-component-type=\\"PF4/Dropdown\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"1\\"><button id=\\"realm-select-toggle\\" class=\\"pf-c-dropdown__toggle\\" type=\\"button\\" aria-expanded=\\"true\\" aria-haspopup=\\"true\\"><span class=\\"pf-c-dropdown__toggle-text\\">test</span><span class=\\"pf-c-dropdown__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\" transform=\\"\\"></path></svg></span></button><ul aria-labelledby=\\"realm-select-toggle\\" class=\\"pf-c-dropdown__menu\\" role=\\"menu\\"><li role=\\"menuitem\\"><a tabindex=\\"-1\\" aria-disabled=\\"false\\" class=\\"pf-c-dropdown__menu-item\\">Another</a></li><hr class=\\"pf-c-divider\\" index=\\"1\\"><li role=\\"menuitem\\"><div tabindex=\\"-1\\" class=\\"pf-c-dropdown__menu-item\\"><button aria-disabled=\\"false\\" class=\\"pf-c-button pf-m-primary pf-m-block\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"2\\">Create Realm</button></div></li></ul></div>"`;
+exports[`renders realm selector 1`] = `"<div id=\\"realm-select\\" class=\\"pf-c-dropdown pf-m-expanded keycloak__realm_selector__dropdown\\" data-ouia-component-type=\\"PF4/Dropdown\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"1\\"><button id=\\"realm-select-toggle\\" class=\\"pf-c-dropdown__toggle keycloak__realm_selector_dropdown__toggle\\" type=\\"button\\" aria-expanded=\\"true\\" aria-haspopup=\\"true\\"><span class=\\"pf-c-dropdown__toggle-text\\">test</span><span class=\\"pf-c-dropdown__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\" transform=\\"\\"></path></svg></span></button><ul aria-labelledby=\\"realm-select-toggle\\" class=\\"pf-c-dropdown__menu\\" role=\\"menu\\"><li role=\\"menuitem\\"><a tabindex=\\"-1\\" aria-disabled=\\"false\\" class=\\"pf-c-dropdown__menu-item\\">Another</a></li><hr class=\\"pf-c-divider\\" index=\\"1\\"><li role=\\"menuitem\\"><div tabindex=\\"-1\\" class=\\"pf-c-dropdown__menu-item\\"><button aria-disabled=\\"false\\" class=\\"pf-c-button pf-m-primary pf-m-block\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"2\\">Create Realm</button></div></li></ul></div>"`;

src/components/realm-selector/realm-selector.css

@@ -0,0 +1,30 @@
+.keycloak__realm_selector_dropdown__toggle {
+  --pf-c-dropdown__toggle--Color: var(--pf-c-nav__link--m-current--Color);
+  --pf-c-dropdown__toggle--BackgroundColor: var(
+    --pf-global--BackgroundColor--dark-100
+  );
+  --pf-c-dropdown__toggle--before--BorderTopColor: var(
+    --pf-global--BorderColor--200
+  );
+  --pf-c-dropdown__toggle--before--BorderRightColor: var(
+    --pf-global--BorderColor--200
+  );
+  --pf-c-dropdown__toggle--before--BorderBottomColor: var(
+    --pf-global--BorderColor--100
+  );
+  --pf-c-dropdown__toggle--before--BorderLeftColor: var(
+    --pf-global--BorderColor--200
+  );
+  width: 100%;
+}
+
+.keycloak__realm_selector__dropdown {
+  width: 100%;
+}
+
+.keycloak__page_nav__nav_item__realm-selector {
+  margin-top: var(--pf-c-nav__link--PaddingTop);
+  padding-right: var(--pf-c-nav__link--PaddingRight);
+  margin-bottom: var(--pf-c-nav__link--PaddingBottom);
+  padding-left: var(--pf-c-nav__link--PaddingLeft);
+}

src/components/realm-selector/realm-selector.module.css

@@ -1,32 +0,0 @@
-
-.dropdown {
-  width: 100%;
-  padding: 32px;
-  border-bottom: 1px solid var(--pf-c-nav__link--before--BorderColor);
-
-  outline: 1px solid var(--pf-global--Color--200);
-  outline-offset:-32px;    
-}
-
-.menu {
-    /* setting this to 85% for now */
-    min-width: 85%;
-}
-
-.pf-c-button.pf-m-primary.realmSelectButton {
-  width: 100%;
-}
-
-.toggle {
-  color: var(--pf-c-nav__link--m-current--Color);
-  width: 100%;
-  background: var(--pf-global--BackgroundColor--dark-100);
-}
-
-.toggle:focus {
-  outline:0;
-}
-
-.toggle::before {
-  border: none;
-}