switched message to notification api

src/Pages/UserProfile/index.js

@@ -1,4 +1,13 @@
-import { Button, Card, Form, Input, Space, Table, Upload, message } from "antd";
+import {
+  Button,
+  Card,
+  Form,
+  Input,
+  Space,
+  Table,
+  Upload,
+  notification,
+} from "antd";
 import { useContext, useState } from "react";
 import {
   Constants,
@@ -68,6 +77,8 @@ const columns = [
 
 export default function UserProfile() {
   const webSocketContext = useContext(WebSocketContext);
+  const [notificationApi, notificationContextHolder] =
+    notification.useNotification();
 
   const [oldPassword, setOldPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
@@ -95,11 +106,12 @@ export default function UserProfile() {
 
   const beforeUpload = (file) => {
     if (file.size > Constants.MAX_AVATAR_SIZE) {
-      message.error(
-        `Image must be smaller than ${
+      notificationApi["error"]({
+        message: `Your profile could not be changed`,
+        description: `Avatar must be smaller than ${
           Constants.MAX_AVATAR_SIZE / 1024 / 1024
-        } MB`
-      );
+        } MB`,
+      });
       return false;
     }
     return true;
@@ -160,6 +172,8 @@ export default function UserProfile() {
 
   return (
     <>
+      {notificationContextHolder}
+
       <h1 style={{ fontWeight: "bold" }}>Your Profile</h1>
 
       <Card>