(fix) O3-3896: Tutorials modal should use a standard Carbon modal com…

…ponent

src/tutorial/modal.component.tsx

@@ -3,7 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { useConfig, useAppContext, navigate } from '@openmrs/esm-framework';
 import styles from './styles.scss';
 import { type TutorialContext } from '../types';
-import { ModalHeader, ModalBody, Button } from '@carbon/react';
+import { ModalHeader, ModalBody, Link } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons';
 
 const TutorialModal = ({ open, onClose }) => {
   const { t } = useTranslation();
@@ -39,7 +40,7 @@ const TutorialModal = ({ open, onClose }) => {
 
   return (
     <React.Fragment>
-      <ModalHeader closeModal={onClose} title={t('tutorial', 'Tutorial')}>
+      <ModalHeader closeModal={onClose} title={t('tutorial', 'Tutorial')} className={styles.modalHeader}>
         <p className={styles.description}>
           {t('modalDescription', 'Find walkthroughs and video tutorials on some of the core features of OpenMRS.')}
         </p>
@@ -50,9 +51,10 @@ const TutorialModal = ({ open, onClose }) => {
             <li className={styles.tutorialItem} key={index}>
               <h3 className={styles.tutorialTitle}>{tutorial.title}</h3>
               <p className={styles.tutorialDescription}>{tutorial.description}</p>
-              <Button kind="ghost" onClick={() => handleWalkthroughClick(index)}>
+              <Link onClick={() => handleWalkthroughClick(index)} className={styles.tutorialLink} renderIcon={() => 
+                <ArrowRight aria-label="Arrow Right" />}>
                 {t('walkthrough', 'Walkthrough')}
-              </Button>
+              </Link>
             </li>
           ))}
         </ul>

src/tutorial/styles.scss

@@ -1,5 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
+@use '@carbon/layout';
 @import '~@openmrs/esm-styleguide/src/vars';
 
 .description {
@@ -26,5 +27,38 @@
       @include type.type-style('body-compact-01');
     }
 
+    .tutorialLink {
+      margin-bottom: spacing.$spacing-04;
+      margin-top: spacing.$spacing-04;
+      cursor: pointer;
+    }
+  }
+}
+
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
   }
 }

src/tutorial/tutorial.tsx

@@ -8,6 +8,7 @@ const Tutorial = () => {
   const handleOpenModal = () => {
     const dispose = showModal('tutorial-modal', {
       onClose: () => dispose(),
+      size: 'sm',
     });
   };