Normalize perspective dropdown (#91)

* Remove unused css after pf fix/bump

* Normalize perspective dropdown

pkg/client/src/app/layout/SidebarApp/SidebarApp.css

@@ -1,4 +1,16 @@
-.perspective.pf-c-select {
-  --pf-global--Color--100: #fff;
-  --pf-global--BackgroundColor--100: #000;
+.pf-c-select {
+  --pf-global--Color--100: var(--pf-global--palette--white);
+  --pf-global--BorderColor--100: var(--pf-global--palette--black-600);
+  --pf-c-select__menu--BackgroundColor: var(--pf-global--palette--black-850);
+  --pf-c-select__menu-item--Color: var(--pf-global--palette--white);
+  --pf-c-select__menu-item--hover--BackgroundColor: var(
+    --pf-global--palette--black-600
+  );
+  --pf-c-select__toggle--BackgroundColor: var(--pf-global--palette--black-850);
+  --pf-c-select__toggle--active--before--BorderBottomColor: var(
+    --pf-global--palette--white
+  );
+  --pf-c-select__toggle--m-expanded--before--BorderBottomColor: var(
+    --pf-global--palette--black-600
+  );
 }

pkg/client/src/app/layout/SidebarApp/SidebarApp.tsx

@@ -16,14 +16,15 @@ import DevIcon from "@patternfly/react-icons/dist/esm/icons/code-icon";
 
 import { Paths } from "@app/Paths";
 import { LayoutTheme } from "../LayoutUtils";
-import "./SidebarApp.css";
 import { checkAccess } from "@app/common/rbac-utils";
 import keycloak from "@app/keycloak";
 import {
   LocalStorageKey,
   useLocalStorageContext,
 } from "@app/context/LocalStorageContext";
 
+import "./SidebarApp.css";
+
 export const SidebarApp: React.FC = () => {
   const token = keycloak.tokenParsed || undefined;
   const userRoles = token?.realm_access?.roles,
@@ -70,8 +71,12 @@ export const SidebarApp: React.FC = () => {
   const Navigation = (
     <>
       <Select
+        style={{
+          borderStyle: "solid",
+          borderWidth: "0.1em",
+          borderColor: "white",
+        }}
         toggleIcon={isDevIcon ? <DevIcon /> : <AdminIcon />}
-        className="perspective"
         variant={SelectVariant.single}
         aria-label="Select user perspective"
         selections={selectedPersona}

pkg/client/src/index.tsx

@@ -12,8 +12,6 @@ import { NinjaErrorBoundary } from "@app/ninja-error-boundary";
 import { LocalStorageContextProvider } from "@app/context/LocalStorageContext";
 import { KeycloakProvider } from "@app/common/KeycloakProvider";
 
-import "./index.css";
-
 i18n.init();
 const queryClient = new QueryClient();