From aed4f8d725769228ac600b77825f39274403c81f Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Sat, 18 Jan 2025 11:45:17 +0300
Subject: [PATCH] (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
---
 .../src/devtools/devtools-popup.styles.scss   |  9 +++---
 .../src/devtools/devtools.component.tsx       |  7 ++++-
 .../src/devtools/devtools.styles.css          | 13 ---------
 .../src/devtools/devtools.styles.scss         | 28 +++++++++++++++++++
 .../src/help-menu/help.styles.scss            |  2 +-
 5 files changed, 40 insertions(+), 19 deletions(-)
 delete mode 100644 packages/apps/esm-devtools-app/src/devtools/devtools.styles.css
 create mode 100644 packages/apps/esm-devtools-app/src/devtools/devtools.styles.scss

diff --git a/packages/apps/esm-devtools-app/src/devtools/devtools-popup.styles.scss b/packages/apps/esm-devtools-app/src/devtools/devtools-popup.styles.scss
index 41c3c4dcb..85b161688 100644
--- a/packages/apps/esm-devtools-app/src/devtools/devtools-popup.styles.scss
+++ b/packages/apps/esm-devtools-app/src/devtools/devtools-popup.styles.scss
@@ -1,3 +1,4 @@
+@use '@carbon/layout';
 @import '~@openmrs/esm-styleguide/src/vars';
 
 .popup {
@@ -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;
 }
diff --git a/packages/apps/esm-devtools-app/src/devtools/devtools.component.tsx b/packages/apps/esm-devtools-app/src/devtools/devtools.component.tsx
index 12a6923f3..5af587620 100644
--- a/packages/apps/esm-devtools-app/src/devtools/devtools.component.tsx
+++ b/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>
diff --git a/packages/apps/esm-devtools-app/src/devtools/devtools.styles.css b/packages/apps/esm-devtools-app/src/devtools/devtools.styles.css
deleted file mode 100644
index b707d102d..000000000
--- a/packages/apps/esm-devtools-app/src/devtools/devtools.styles.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.devtoolsTriggerButton {
-  z-index: 7900;
-  background: #c6c6c6;
-  bottom: 5rem;
-  right: 0.25rem;
-  position: fixed;
-  border-radius: 0.25rem;
-}
-
-.overridden {
-  background-color: #da1e28;
-  color: white;
-}
diff --git a/packages/apps/esm-devtools-app/src/devtools/devtools.styles.scss b/packages/apps/esm-devtools-app/src/devtools/devtools.styles.scss
new file mode 100644
index 000000000..53572dc4f
--- /dev/null
+++ b/packages/apps/esm-devtools-app/src/devtools/devtools.styles.scss
@@ -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;
+}
diff --git a/packages/apps/esm-help-menu-app/src/help-menu/help.styles.scss b/packages/apps/esm-help-menu-app/src/help-menu/help.styles.scss
index a90c37297..f150d496b 100644
--- a/packages/apps/esm-help-menu-app/src/help-menu/help.styles.scss
+++ b/packages/apps/esm-help-menu-app/src/help-menu/help.styles.scss
@@ -29,5 +29,5 @@
   z-index: 7900;
   bottom: layout.$spacing-07;
   position: fixed;
-  right: 3.25rem;
+  right: 3rem;
 }