fix: replace close button with icon button

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.2.30-beta-5",
+    "version": "0.2.30-beta-6",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -7,7 +7,7 @@ export const ToastContent = ({
     description,
     buttonProps,
 }: Pick<ToastProps, 'title' | 'description' | 'buttonProps'>) => (
-    <div className="flexbox-col dc__gap-8">
+    <div className="flexbox-col dc__gap-8 custom-toast__content">
         <div className="flexbox-col dc__gap-4">
             <h3 className="m-0 fs-13 fw-6 lh-20 cn-0 dc__truncate">{title}</h3>
             <p className="fs-12 fw-4 lh-18 m-0 dc__truncate--clamp-6">{description}</p>

src/Shared/Services/ToastManager/ToastContent.tsx

@@ -1,11 +1,12 @@
-import { MouseEventHandler } from 'react'
 import { ToastOptions, ToastContainerProps } from 'react-toastify'
 import { ReactComponent as ICInfoFilled } from '@Icons/ic-info-filled.svg'
 import { ReactComponent as ICSuccess } from '@Icons/ic-success.svg'
 import { ReactComponent as ICError } from '@Icons/ic-error.svg'
 import { ReactComponent as ICWarning } from '@Icons/ic-warning.svg'
 import { ReactComponent as ICLocked } from '@Icons/ic-locked.svg'
 import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
+import { Button, ButtonStyleType, ButtonVariantType } from '@Shared/Components'
+import { ComponentSizeType } from '@Shared/constants'
 import { ToastProps, ToastVariantType } from './types'
 
 export const TOAST_BASE_CONFIG: ToastContainerProps = {
@@ -18,9 +19,14 @@ export const TOAST_BASE_CONFIG: ToastContainerProps = {
     toastClassName: 'custom-toast',
     bodyClassName: 'custom-toast__body',
     closeButton: ({ closeToast }) => (
-        <ICClose
-            className="icon-dim-24 p-4 flex dc__no-shrink fcn-0 cursor"
-            onClick={closeToast as MouseEventHandler}
+        <Button
+            icon={<ICClose className="fcn-0" />}
+            onClick={closeToast}
+            dataTestId="close-toast"
+            ariaLabel="Close toast"
+            size={ComponentSizeType.xs}
+            variant={ButtonVariantType.text}
+            style={ButtonStyleType.neutral}
         />
     ),
 }

src/Shared/Services/ToastManager/constants.tsx

@@ -25,19 +25,29 @@
         align-items: flex-start;
         align-self: center;
 
-        > .Toastify__toast-icon {
+        >.Toastify__toast-icon {
             margin: 0;
             width: auto;
             align-self: flex-start;
         }
+    }
 
+    &__content {
         button {
             color: var(--N0);
 
-            &:hover, &:active {
+            svg *[stroke^="#"] {
+                stroke: var(--N0);
+            }
+        
+            svg *[fill^="#"] {
+                fill: var(--N0);
+            }
+
+            &:hover,
+            &:active {
                 color: var(--N0);
             }
         }
     }
-    // TODO: fix the styling for progress bar
 }