refactor: change dialog to md components

src/components/SettingsPageComp/ClearStorageComp.tsx

@@ -4,7 +4,6 @@ import useLanguage from '@/shared/Context/hooks';
 import FilledTonalButton from '@/shared/ui/FilledTonalButton';
 
 import ConfirmModal from './ConfirmModal';
-import ConfirmOverlay from './ConfirmOverlay';
 
 const ClearStorageComp = () => {
   const [isModalShown, setIsModalShown] = useState(false);
@@ -21,12 +20,11 @@ const ClearStorageComp = () => {
           {translation.settingsPage.clear.btn}
         </FilledTonalButton>
       </div>
-      <ConfirmOverlay isShown={isModalShown} setIsShown={setIsModalShown}>
-        <ConfirmModal
-          setIsShown={setIsModalShown}
-          locales={{ ...translation.settingsPage.clear.modal, ...translation.settingsPage.clear.undo }}
-        />
-      </ConfirmOverlay>
+      <ConfirmModal
+        open={isModalShown}
+        setIsShown={setIsModalShown}
+        locales={{ ...translation.settingsPage.clear.modal, ...translation.settingsPage.clear.undo }}
+      />
     </>
   );
 };

src/components/SettingsPageComp/ClearUndo.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
 
+import { SNACKBAR_AUTO_HIDE_DURATION } from '@shared/constants/const';
+
 type UndoPropsType = {
   closeToast: () => void;
   title: string;
@@ -17,7 +19,7 @@ const ClearUndo = (props: UndoPropsType) => {
   useEffect(() => {
     const timeoutId = setTimeout(() => {
       dataClearance();
-    }, 2000);
+    }, SNACKBAR_AUTO_HIDE_DURATION);
 
     setDeleteDataTimeout(timeoutId);
 

src/components/SettingsPageComp/ConfirmModal.tsx

@@ -1,15 +1,18 @@
-import { Dispatch, FC, SetStateAction } from 'react';
+import { Dispatch, FC, SetStateAction, useRef } from 'react';
 
+import { MdDialog } from '@material/web/all';
 import { toast } from 'react-toastify';
 
 import FilledTonalButton from '@/shared/ui/FilledTonalButton';
 import Icon from '@/shared/ui/Icon';
 import TextButton from '@/shared/ui/TextButton';
+import Dialog from '@shared/ui/Dialog';
 
 import ClearUndo from './ClearUndo';
 
 type PropsType = {
   setIsShown: Dispatch<SetStateAction<boolean>>;
+  open: boolean;
   locales: {
     title: string;
     subtitle: string;
@@ -20,25 +23,35 @@ type PropsType = {
   };
 };
 
-const ConfirmModal: FC<PropsType> = ({ setIsShown, locales }) => {
+const ConfirmModal: FC<PropsType> = ({ open, setIsShown, locales }) => {
   const { title, subtitle, cancel, confirm, undoTitle, cancelBtn } = locales;
+  const dialogRef = useRef<MdDialog>(null);
+
   return (
-    <div className="w-[312px] rounded-4xl bg-surface-container-high p-6 text-center font-[500] text-on-surface">
-      <Icon>delete</Icon>
-      <h3 className="mt-4 text-2xl">{title}</h3>
-      <p className="mt-4 text-start text-sm text-on-surface-variant">{subtitle}</p>
-      <div className="mt-6 flex justify-end gap-2">
-        <TextButton onClick={() => setIsShown((prev) => !prev)}>{cancel}</TextButton>
+    <Dialog open={open} ref={dialogRef} className="max-w-[320px]" closed={() => setIsShown(false)}>
+      <div slot="headline">{title}</div>
+      <Icon slot="icon">delete_outline</Icon>
+      <form id="form" slot="content" method="dialog">
+        {subtitle}
+      </form>
+      <div slot="actions">
+        <TextButton
+          onClick={() => {
+            if (dialogRef.current) dialogRef.current.close();
+          }}
+        >
+          {cancel}
+        </TextButton>
         <FilledTonalButton
           onClick={() => {
             toast(<ClearUndo closeToast={() => {}} title={undoTitle} btn={cancelBtn} />);
-            setIsShown((prev) => !prev);
+            if (dialogRef.current) dialogRef.current.close();
           }}
         >
           {confirm}
         </FilledTonalButton>
       </div>
-    </div>
+    </Dialog>
   );
 };
 

src/layouts/MainLayout.tsx

@@ -6,6 +6,7 @@ import Header from '@components/Header/Header';
 import Nav from '@components/Nav/Nav';
 import Controls from '@components/RequestEditor/ui/Controls';
 import ViewProvider from '@components/ViewList/context/ViewProvider';
+import { SNACKBAR_AUTO_HIDE_DURATION } from '@shared/constants/const';
 import useScrollbar from '@shared/lib/hooks/useScrollbar';
 
 const SnackBarTransition = cssTransition({
@@ -39,7 +40,7 @@ const MainLayout = () => {
       <ToastContainer
         closeOnClick={false}
         closeButton={false}
-        autoClose={4000}
+        autoClose={SNACKBAR_AUTO_HIDE_DURATION}
         hideProgressBar
         pauseOnHover={false}
         draggable={false}

src/shared/constants/const.ts

@@ -7,3 +7,4 @@ export const QUERY_PARAMS_INIT = {
 
 export const INTERPOLATION_START = 1;
 export const INTERPOLATION_END = 0.8;
+export const SNACKBAR_AUTO_HIDE_DURATION = 4000;

src/test/SettingsPage/SettingsPage.test.tsx

@@ -1,4 +1,4 @@
-import { act, fireEvent, render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 
 import App from '@/app/App';
@@ -37,40 +37,6 @@ describe('Testing for settings page', () => {
     expect(await screen.findByText('Dark mode')).toBeInTheDocument();
     expect(await screen.findByText('Clear storage')).toBeInTheDocument();
   });
-  it('Should opened modal and close it with proper buttons', async () => {
-    render(<App />);
-    const clearDataBtn = screen.getByText('Clear data');
-    expect(screen.queryByTestId('overlay')).toBeNull();
-    await act(async () => {
-      fireEvent.click(clearDataBtn);
-    });
-    expect(await screen.findByTestId('overlay')).toBeInTheDocument();
-    const closeBtn = await screen.findByText('Cancel');
-    await act(async () => {
-      fireEvent.click(closeBtn);
-    });
-    waitForElementToBeRemoved(() => {
-      expect(screen.queryByTestId('overlay')).toBeNull();
-    }).catch(() => {});
-  });
-  it('Should open confirm modal and close it after clicking corresponding buttons', async () => {
-    render(<App />);
-    const clearDataBtn = screen.getByText('Clear data');
-    await act(async () => {
-      fireEvent.click(clearDataBtn);
-    });
-    const clearBtn = await screen.findByText('Clear');
-    await act(async () => {
-      fireEvent.click(clearBtn);
-    });
-    const undoBtn = await screen.findByText('Undo');
-    await act(async () => {
-      fireEvent.click(undoBtn);
-    });
-    waitForElementToBeRemoved(() => {
-      expect(undoBtn).toBeNull();
-    }).catch(() => {});
-  });
   it('Should change color theme after clicking on theme switcher', async () => {
     render(<App />);
     expect(document.body.getAttribute('data-user-theme')).toBeNull();