fix: resolve inconsistent notification color scheme (#158)

src/components/project/CloneProject/CloneProject.tsx

@@ -1,7 +1,7 @@
 import AppIcon from '@/components/ui/icon';
 import { baseProjectPath, useProject } from '@/hooks/projectV2.hooks';
 import fileSystem from '@/lib/fs';
-import { Button, Form, Input, message, Modal, Tooltip } from 'antd';
+import { App, Button, Form, Input, Modal, Tooltip } from 'antd';
 import cloneDeep from 'lodash.clonedeep';
 import { FC, useState } from 'react';
 import s from './CloneProject.module.scss';
@@ -10,6 +10,7 @@ const CloneProject: FC = () => {
   const [isSaveModalOpen, setIsSaveModalOpen] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
   const { activeProject, projectFiles, createProject } = useProject();
+  const { message } = App.useApp();
 
   const storeAsNewProject = async ({ name }: { name: string }) => {
     try {

src/components/project/MigrateToUnifiedFS/MigrateToUnifiedFS.tsx

@@ -7,7 +7,7 @@ import {
   Tree,
 } from '@/interfaces/workspace.interface';
 import EventEmitter from '@/utility/eventEmitter';
-import { Button, ConfigProvider, message, Modal, Popconfirm } from 'antd';
+import { App, Button, ConfigProvider, Modal, Popconfirm } from 'antd';
 import { FC, useEffect, useState } from 'react';
 import { IndexedDBHelper } from './IndexedDBHelper';
 import s from './MigrateToUnifiedFS.module.scss';
@@ -35,6 +35,8 @@ const MigrateToUnifiedFS: FC<Props> = ({ hasDescription = false }) => {
   >('pending');
   const { createProject } = useProject();
   const { createLog } = useLogActivity();
+  const { message } = App.useApp();
+
   const note = `We've recently upgraded the IDE, and some of your projects may not be visible.`;
 
   const checkMigration = async () => {

src/components/project/NewProject/NewProject.tsx

@@ -12,7 +12,7 @@ import { Analytics } from '@/utility/analytics';
 import EventEmitter from '@/utility/eventEmitter';
 import { downloadRepo } from '@/utility/gitRepoDownloader';
 import { decodeBase64 } from '@/utility/utils';
-import { Button, Form, Input, Modal, Radio, Upload, message } from 'antd';
+import { App, Button, Form, Input, Modal, Radio, Upload } from 'antd';
 import { useForm } from 'antd/lib/form/Form';
 import type { RcFile } from 'antd/lib/upload';
 import { useRouter } from 'next/router';
@@ -49,6 +49,7 @@ const NewProject: FC<Props> = ({
   const [isLoading, setIsLoading] = useState(false);
   const { createLog } = useLogActivity();
   const { open: openTab } = useFileTab();
+  const { message } = App.useApp();
 
   const router = useRouter();
   const {

src/components/shared/ThemeProvider/ThemeProvider.tsx

@@ -1,4 +1,4 @@
-import { ConfigProvider, theme as antdTheme } from 'antd';
+import { App, ConfigProvider, ThemeConfig, theme as antdTheme } from 'antd';
 import {
   ReactNode,
   createContext,
@@ -53,20 +53,23 @@ export const ThemeProvider = ({ children }: { children: ReactNode }) => {
   };
 
   // Ant Design's theme configuration
-  const antdConfig = {
+  const antdConfig: ThemeConfig = {
     token: {
       colorPrimary: '#0098ea',
       colorError: '#C84075',
       fontFamily: 'var(--font-body)',
       borderRadius: 4,
+      colorText: 'var(--text-color)',
     },
     algorithm:
       theme === 'dark' ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
   };
 
   return (
     <ThemeContext.Provider value={{ theme, toggleTheme }}>
-      <ConfigProvider theme={antdConfig}>{children}</ConfigProvider>
+      <ConfigProvider theme={antdConfig}>
+        <App>{children}</App>
+      </ConfigProvider>
     </ThemeContext.Provider>
   );
 };

src/components/template/ProjectTemplate/ProjectTemplate.tsx

@@ -4,7 +4,7 @@ import { useTheme } from '@/components/shared/ThemeProvider';
 import AppIcon from '@/components/ui/icon';
 import { AppConfig } from '@/config/AppConfig';
 import { projectExamples } from '@/constant/projectExamples';
-import { Drawer, Skeleton, message } from 'antd';
+import { App, Drawer, Skeleton } from 'antd';
 import axios from 'axios';
 import Link from 'next/link';
 import { FC, useEffect, useState } from 'react';
@@ -40,6 +40,7 @@ const ProjectTemplate: FC = () => {
     content: string;
   }>({ contract: '', content: '' });
   const { theme } = useTheme();
+  const { message } = App.useApp();
 
   const getContent = async () => {
     const link = examples[currentExample].link;

src/components/workspace/ExecuteFile/ExecuteFile.tsx

@@ -8,7 +8,7 @@ import { useWorkspaceActions } from '@/hooks/workspace.hooks';
 import { Project, Tree } from '@/interfaces/workspace.interface';
 import EventEmitter from '@/utility/eventEmitter';
 import { getFileExtension } from '@/utility/utils';
-import { Button, Select, message } from 'antd';
+import { App, Button, Select } from 'antd';
 import { FC, useEffect, useRef, useState } from 'react';
 import s from './ExecuteFile.module.scss';
 
@@ -43,6 +43,7 @@ const ExecuteFile: FC<Props> = ({
   const selectedFileRef = useRef<Tree | undefined>();
   const isAutoBuildAndDeployEnabled =
     useSettingAction().isAutoBuildAndDeployEnabled();
+  const { message } = App.useApp();
 
   const isAutoBuildAndDeployEnabledRef = useRef(false);
 

src/components/workspace/project/ManageProject/ManageProject.tsx

@@ -9,14 +9,16 @@ import AppIcon from '@/components/ui/icon';
 import { baseProjectPath, useProject } from '@/hooks/projectV2.hooks';
 import { Project } from '@/interfaces/workspace.interface';
 import EventEmitter from '@/utility/eventEmitter';
-import { Button, Modal, Select, message } from 'antd';
+import { App, Button, Modal, Select } from 'antd';
 import Router, { useRouter } from 'next/router';
 import { FC, useEffect, useState } from 'react';
 import s from './ManageProject.module.scss';
 
 const ManageProject: FC = () => {
   const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);
   const router = useRouter();
+  const { message } = App.useApp();
+
   const { importURL } = router.query;
 
   const {

src/components/workspace/tree/FileTree/TreeNode.tsx

@@ -5,7 +5,7 @@ import { Project, Tree } from '@/interfaces/workspace.interface';
 import EventEmitter from '@/utility/eventEmitter';
 import { encodeBase64, fileTypeFromFileName } from '@/utility/utils';
 import { NodeModel } from '@minoru/react-dnd-treeview';
-import { message } from 'antd';
+import { App } from 'antd';
 import cn from 'clsx';
 import { FC, useState } from 'react';
 import s from './FileTree.module.scss';
@@ -35,6 +35,7 @@ const TreeNode: FC<Props> = ({ node, depth, isOpen, onToggle }) => {
   const { open: openTab } = useFileTab();
   const { createLog } = useLogActivity();
   const { getFile } = useFile();
+  const { message } = App.useApp();
 
   const disallowedFile = [
     'message.cell.ts',

src/hooks/contract.hooks.ts

@@ -37,14 +37,15 @@ import {
 import { StateInit, TonClient } from '@ton/ton';
 import { ITonConnect, SendTransactionRequest } from '@tonconnect/sdk';
 import { useTonConnectUI } from '@tonconnect/ui-react';
-import { message } from 'antd';
+import { App } from 'antd';
 import { pascalCase } from 'change-case';
 import { useSettingAction } from './setting.hooks';
 
 export function useContractAction() {
   const [tonConnector] = useTonConnectUI();
   const { getTonAmountForInteraction } = useSettingAction();
   const tonAmountForInteraction = toNano(getTonAmountForInteraction());
+  const { message } = App.useApp();
 
   return {
     deployContract,