fixed theme and svgs

src/components/dashboard/change-password/index.jsx

@@ -1,7 +1,6 @@
 import CenterLayout from "@/layouts/CenterLayout";
 import DashboardLayouts from "@/layouts/dashboardLayouts";
-import {Box, Button, Container, Paper, Stack, Typography,} from "@mui/material";
-import Image from "next/image";
+import {Button, Container, Paper, Stack, Typography,} from "@mui/material";
 import {Formik} from "formik";
 import * as Yup from "yup";
 import {useTranslations} from "next-intl";
@@ -13,6 +12,7 @@ import axios from "axios";
 import Notifications from "@/core/components/notifications";
 import useDirection from "@/lib/app/hooks/useDirection";
 import {toast} from "react-toastify";
+import SvgChangePassword from "@/core/components/svgs/SvgChangePassword";
 
 const DashboardChangePasswordComponent = () => {
     const t = useTranslations();
@@ -93,11 +93,7 @@ const DashboardChangePasswordComponent = () => {
                             >
                                 <Paper elevation={0}>
                                     <Stack spacing={3} sx={{p: 5}} component="div">
-                                        <Box
-                                            sx={{position: "relative", width: "100%", height: 200}}
-                                        >
-                                            <Image fill src="/images/change-password.svg" alt="" priority/>
-                                        </Box>
+                                        <SvgChangePassword width={300} height={200}/>
                                         <Typography margin={2} variant="h4" textAlign="center">
                                             {t("ChangePassword.typography_change_password")}
                                         </Typography>