(fix) O3-3890 Help menu (and menu items) should use a standard Carbon…

src/tutorial/styles.scss

@@ -28,3 +28,11 @@
 
   }
 }
+
+.tutorialsText {
+  padding: 0.5rem 0.5rem;
+}
+
+.tutorialsText:hover {
+  background: #e8e8e8;
+}

src/tutorial/tutorial.test.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import '@testing-library/jest-dom';
+import { showModal } from "@openmrs/esm-framework";
+import Tutorial from "./tutorial";
+
+jest.mock('@openmrs/esm-framework', () => ({
+	showModal: jest.fn(),
+}))
+
+describe('Tutorial Component', () => {
+	it('renders the menu item with the correct label', () => {
+		render(<Tutorial />);
+
+		expect(screen.getByText(/Tutorials/i)).toBeInTheDocument();
+	})
+
+	it('calls showModal when the menu item is clicked', () => {
+		render(<Tutorial />);
+
+		const menuItem = screen.getByText(/Tutorials/i);
+		fireEvent.click(menuItem);
+
+		expect(showModal).toHaveBeenCalledWith('tutorial-modal', expect.any(Object))
+	})
+})

src/tutorial/tutorial.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { showModal } from '@openmrs/esm-framework';
+import styles from './styles.scss'
 
 const Tutorial = () => {
   const { t } = useTranslation();
@@ -13,7 +14,7 @@ const Tutorial = () => {
 
   return (
     <>
-      <div onClick={handleOpenModal}>{t('tutorials', 'Tutorials')}</div>
+      <div onClick={handleOpenModal} className={styles.tutorialsText}>{t('tutorials', 'Tutorials')}</div>
     </>
   );
 };