Danielle/482 notifications needs a way to exit the modal (#609)

Before
![before
PR](https://github.com/user-attachments/assets/d33b5fce-7076-45a9-8645-603fa07920ab)


- Changed background color to `muted` for better contrast
- Added button to manually close the alert before it expires
- Button is styled with `ghost` and standard `icon` size
- Close button is accessible by keyboard and labeled

![10_11
screen](https://github.com/user-attachments/assets/20ee4af1-08ec-43ca-a246-21d45e607c0d)

components/Alert/Alert.tsx

@@ -9,13 +9,13 @@ const alertVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-background text-foreground',
+        default: 'bg-muted text-muted-foreground',
         error:
-          'bg-background text-error [&>svg]:text-error text-error border-error',
+          'bg-muted text-error [&>svg]:text-error text-error border-error',
         warning:
-          'bg-background text-warning [&>svg]:text-warning text-warning border-warning',
+          'bg-muted text-warning [&>svg]:text-warning text-warning border-warning',
         success:
-          'bg-background text-success [&>svg]:text-success text-success border-success',
+          'bg-muted text-success [&>svg]:text-success text-success border-success',
       },
     },
     defaultVariants: {

components/AlertNotification/AlertNotification.test.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
-import { render } from '@testing-library/react';
 import Alert from './AlertNotification';
 import { AlertVariants } from './Alerts.enum';
 import { CheckCircle, XCircle, Info, AlertTriangle } from 'lucide-react';
+import React from 'react';
+import { render, screen, fireEvent} from '@testing-library/react';
+import toast from 'react-hot-toast';
 
 const variantTestCases = {
   [AlertVariants.Success]: {
@@ -30,7 +31,36 @@ const variantTestCases = {
 describe('AlertNotification', () => {
   for (const [key, value] of Object.entries(variantTestCases)) {
     it(`renders the correct variant ${key}`, () => {
-      render(<Alert variant={AlertVariants[key]} message={value.message} />);
+      render(
+        <Alert
+          variant={AlertVariants[key as keyof typeof AlertVariants]}
+          message={value.message}
+        />,
+      );
+    });
+
+    it('should render the dismiss button on each alert type', () => {
+      render(
+        <Alert
+          variant={AlertVariants[key as keyof typeof AlertVariants]}
+          message={value.message}
+        />,
+      );
+      const dismissButton = screen.getByTestId('dismiss-alert-btn');
+      expect(dismissButton).toBeInTheDocument();
+    });
+
+    it('should fire the toast.remove() function when dismiss button is clicked', async () => {
+      const spyToast = jest.spyOn(toast, 'remove');
+      render(
+        <Alert
+          variant={AlertVariants[key as keyof typeof AlertVariants]}
+          message={value.message}
+        />,
+      );
+      const dismissButton = screen.getByTestId('dismiss-alert-btn');      
+      fireEvent.click(dismissButton);      
+      expect(spyToast).toHaveBeenCalled();
     });
-  }
+  };
 });

components/AlertNotification/AlertNotification.tsx

@@ -2,12 +2,14 @@
 // Licensed under the MIT License.
 
 import { Alert as AlertDefault } from '../Alert/Alert';
-import { AlertTitle } from '../AlertTItle/AlertTitle';
 import { AlertDescription } from '../AlertDescription/AlertDescription';
-import { JSX } from 'react';
-import { CheckCircle, XCircle, Info, AlertTriangle } from 'lucide-react';
-import { IAlertNotification } from './AlertNotification.interface';
+import { AlertTitle } from '../AlertTItle/AlertTitle';
 import { AlertVariants } from './Alerts.enum';
+import { Button } from '../Button/Button';
+import { CheckCircle, XCircle, Info, AlertTriangle, X } from 'lucide-react';
+import { IAlertNotification } from './AlertNotification.interface';
+import { JSX } from 'react';
+import toast from 'react-hot-toast';
 
 const variantConfig = {
   success: {
@@ -46,6 +48,15 @@ const Alert = ({
       <Icon className="h-4 w-4" data-testid="alert-icon" />
       <AlertTitle title={title} data-testid="alert-title" />
       <AlertDescription message={message} data-testid="alert-message" />
+      <Button
+        variant='ghost'
+        size="icon"
+        className="absolute right-4 top-2 hover:bg-transparent hover:text-current hover:opacity-50"
+        data-testid="dismiss-alert-btn"
+        onClick={() => toast.remove()}
+        aria-label='dismiss notification'
+        label={<X className='pl-0'/>}
+      />
     </AlertDefault>
   );
 };