(fix) Fix devtools trigger button popover (#1272)

* (fix) Fix devtools trigger button popover

This PR fixes several issues with the devtools button popover. Previously, the popover was incorrectly positioned at the top left
of the screen and the popover container pushed content below the navbar down by 1rem.

This PR addresses these issues by:

- Adding a `wrapperClasses` prop to the IconButton component to apply custom styles to the popover container
- Positioning and aligning the popover container to the top left of the devtools trigger button
- Adding a box shadow to the popover container to match the help menu button's box shadow for visual consistency
- Adjusting the right margin of the devtools trigger button to align with the help menu button

Additional changes:

- Adjusted the right margin of the help menu button's popover to align with the devtools trigger button's popover

* Update packages/apps/esm-devtools-app/src/devtools/devtools-popup.styles.scss

Author: denniskigen

packages/apps/esm-devtools-app/src/devtools/devtools-popup.styles.scss

@@ -1,4 +1,5 @@
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .popup {
   position: fixed;
@@ -19,20 +20,20 @@
 
 .tabList {
   position: fixed;
-  height: 4rem;
+  height: layout.$spacing-10;
   width: 100%;
   z-index: 1000;
   background-color: black;
 }
 
 .tabPanels {
-  padding: 1.5rem;
+  padding: layout.$spacing-06;
 }
 
 .farRight {
   position: absolute;
-  right: 24px;
-  top: 16px;
+  right: layout.$spacing-04;
+  top: layout.$spacing-04;
   display: flex;
   z-index: 1000;
 }

packages/apps/esm-devtools-app/src/devtools/devtools.component.tsx

@@ -5,7 +5,7 @@ import { type AppProps } from 'single-spa';
 import { getCoreTranslation } from '@openmrs/esm-framework';
 import { importMapOverridden } from './import-map.component';
 import DevToolsPopup from './devtools-popup.component';
-import styles from './devtools.styles.css';
+import styles from './devtools.styles.scss';
 
 const showDevTools = () => window.spaEnv === 'development' || Boolean(localStorage.getItem('openmrs:devtools'));
 
@@ -23,13 +23,18 @@ function DevTools(props: AppProps) {
   return (
     <>
       <IconButton
+        align="left"
         className={classNames(styles.devtoolsTriggerButton, {
           [styles.overridden]: isOverridden,
         })}
+        direction="left"
         kind="ghost"
         label={getCoreTranslation('toggleDevTools')}
         onClick={toggleDevTools}
         size="md"
+        tooltipAlignment="left"
+        tooltipPosition="top"
+        wrapperClasses={styles.popover}
       >
         {'{\u00B7\u00B7\u00B7}'}
       </IconButton>

packages/apps/esm-devtools-app/src/devtools/devtools.styles.css

@@ -0,0 +1,28 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.devtoolsTriggerButton {
+  z-index: 7900;
+  background: colors.$white;
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.1),
+    0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  border-radius: layout.$spacing-02;
+  color: colors.$gray-100;
+
+  &:hover {
+    color: colors.$blue-60 !important;
+  }
+}
+
+.overridden {
+  background-color: colors.$red-30;
+  color: colors.$white;
+}
+
+.popover {
+  z-index: 7900;
+  bottom: layout.$spacing-11;
+  right: layout.$spacing-02;
+  position: fixed;
+}

packages/apps/esm-devtools-app/src/devtools/devtools.styles.scss

@@ -29,5 +29,5 @@
   z-index: 7900;
   bottom: layout.$spacing-07;
   position: fixed;
-  right: 3.25rem;
+  right: 3rem;
 }