(fix) Change help menu button to use IconButton (#1257)

openmrs · Jan 16, 2025 · bad25fb · bad25fb
1 parent 275b090
commit bad25fb
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/packages/apps/esm-help-menu-app/src/help-menu/help.component.tsx b/packages/apps/esm-help-menu-app/src/help-menu/help.component.tsx
@@ -1,11 +1,13 @@
 import React, { useState, useEffect, useRef } from 'react';
-import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { IconButton } from '@carbon/react';
 import { Help } from '@carbon/react/icons';
-import { useSession } from '@openmrs/esm-framework'
+import { useSession } from '@openmrs/esm-framework';
 import HelpMenuPopup from './help-popup.component';
 import styles from './help.styles.scss';
 
 export default function HelpMenu() {
+  const { t } = useTranslation();
   const { user } = useSession();
   const [helpMenuOpen, setHelpMenuOpen] = useState(false);
   const helpMenuButtonRef = useRef(null);
@@ -38,15 +40,19 @@ export default function HelpMenu() {
   return (
     <>
       {user && (
-        <button
+        <IconButton
+          label={t('help', 'Help')}
+          align="left"
+          size="md"
           aria-expanded={helpMenuOpen}
           aria-controls="help-menu-popup"
           onClick={toggleHelpMenu}
           ref={helpMenuButtonRef}
-          className={classNames(styles.helpMenuButton)}
+          className={styles.helpMenuButton}
+          wrapperClasses={styles.popover}
         >
           <Help size={24} />
-        </button>
+        </IconButton>
       )}
       {helpMenuOpen && (
         <div id="help-menu-popup" ref={popupRef} className={styles.helpMenuPopup}>

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
@@ -3,23 +3,31 @@
 
 .helpMenuButton {
   z-index: 7900;
-  background-color: white;
+  background-color: colors.$white;
   height: 2.5rem !important;
   width: 2.5rem !important;
   bottom: layout.$spacing-05;
+  right: 0.25rem;
   position: fixed;
+  padding: 0;
   display: flex;
-  justify-content: center;
   align-items: center;
-  right: 0.25rem;
   border: none;
   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-03;
+  color: colors.$black;
 
   &:hover {
     background-color: colors.$gray-20;
-    cursor: pointer;
+    color: colors.$black;
   }
 }
+
+.popover {
+  z-index: 7900;
+  bottom: layout.$spacing-07;
+  position: fixed;
+  right: 3.25rem;
+}