diff --git a/example.env.local b/example.env.local index c6b8c67..3dff93b 100644 --- a/example.env.local +++ b/example.env.local @@ -2,17 +2,8 @@ NEXT_PUBLIC_API_NAME = "Loan Facilities Dashboard" NEXT_PUBLIC_DEFAULT_LANGUAGE = "fa" NEXT_PUBLIC_DEFAULT_DIRECTION = "rtl" - NEXT_PUBLIC_PRIMARY_MAIN = "#084070" -NEXT_PUBLIC_PRIMARY_CONTRAST_TEXT = "#fff" -NEXT_PUBLIC_PRIMARY_LIGHT = "#2c6291" -NEXT_PUBLIC_PRIMARY_DARK = "#11293e" - - NEXT_PUBLIC_SECONDARY_MAIN = "#FF4E00" -NEXT_PUBLIC_SECONDARY_CONTRAST_TEXT = "#fff" -NEXT_PUBLIC_SECONDARY_LIGHT = "#ed743e" -NEXT_PUBLIC_SECONDARY_DARK = "#ad3a07" NEXT_PUBLIC_API_URL = "http://Your IP:3000" diff --git a/package.json b/package.json index fabf486..4b48659 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@mui/material": "^5.12.0", "@mui/x-date-pickers": "^6.9.2", "axios": "^1.4.0", + "colord": "^2.9.3", "date-fns-jalali": "^2.13.0-0", "dayjs": "^1.11.9", "eslint": "8.36.0", diff --git a/public/images/403.svg b/public/images/403.svg deleted file mode 100644 index d5ab3a5..0000000 --- a/public/images/403.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/images/404.svg b/public/images/404.svg deleted file mode 100644 index 2383041..0000000 --- a/public/images/404.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/images/500.svg b/public/images/500.svg deleted file mode 100644 index c7629f3..0000000 --- a/public/images/500.svg +++ /dev/null @@ -1 +0,0 @@ -server_cluster \ No newline at end of file diff --git a/public/images/change-password.svg b/public/images/change-password.svg deleted file mode 100644 index d940442..0000000 --- a/public/images/change-password.svg +++ /dev/null @@ -1,64 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/public/images/dashboard.svg b/public/images/dashboard.svg deleted file mode 100644 index f7c0340..0000000 --- a/public/images/dashboard.svg +++ /dev/null @@ -1,104 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/public/images/loading_logo.svg b/public/images/loading_logo.svg deleted file mode 100644 index ba14232..0000000 --- a/public/images/loading_logo.svg +++ /dev/null @@ -1,121 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/public/images/login.svg b/public/images/login.svg deleted file mode 100644 index cd7e24e..0000000 --- a/public/images/login.svg +++ /dev/null @@ -1,60 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index 9da4be5..fd26a69 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -42,7 +42,7 @@ "Authorization": { "typography_your_login_is_valid_and_you_do_not_need_to_login_again": "شما دسترسی لازم به این صفحه را دارید نیاز به ورود مجدد نیست.", "typography_your_access_to_this_page_has_expired_Please_login_again": "دسترسی شما منقضی شده است لطفا دوباره ورود نمایید.", - "typography_redirect_to": "رفتن به صفحه", + "typography_redirect_to": "درحال رفتن به صفحه", "typography_routing_previuos_page": "صفحه قبل...", "typography_routing_dashbaord_page": "داشبورد..." }, diff --git a/src/components/dashboard/change-password/index.jsx b/src/components/dashboard/change-password/index.jsx index 477ec00..2b4fbfa 100644 --- a/src/components/dashboard/change-password/index.jsx +++ b/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 = () => { > - - - + {t("ChangePassword.typography_change_password")} diff --git a/src/components/errors/403.jsx b/src/components/errors/403.jsx index cf46e41..ce91443 100644 --- a/src/components/errors/403.jsx +++ b/src/components/errors/403.jsx @@ -1,10 +1,10 @@ import CenterLayout from "@/layouts/CenterLayout"; import FullPageLayout from "@/layouts/FullPageLayout"; -import {Box, Button, Container, Stack, Typography} from "@mui/material"; +import {Button, Typography} from "@mui/material"; import {NextLinkComposed} from "@/core/components/LinkRouting"; import {useTranslations} from "next-intl"; -import Image from "next/image"; import TitlePage from "@/core/components/TitlePage"; +import Svg403 from "@/core/components/svgs/Svg403"; const UnAuthorizedComponent = () => { const t = useTranslations(); @@ -13,32 +13,21 @@ const UnAuthorizedComponent = () => { <> - - - - - {t("app_name")} - - - {t("ErrorPage.custom_403")} - - - - + + + + {t("ErrorPage.custom_403")} + + diff --git a/src/components/errors/404.jsx b/src/components/errors/404.jsx index e0888b3..acfd418 100644 --- a/src/components/errors/404.jsx +++ b/src/components/errors/404.jsx @@ -1,10 +1,10 @@ import CenterLayout from "@/layouts/CenterLayout"; import FullPageLayout from "@/layouts/FullPageLayout"; -import {Box, Button, Container, Stack, Typography} from "@mui/material"; +import {Button, Typography} from "@mui/material"; import {NextLinkComposed} from "@/core/components/LinkRouting"; import {useTranslations} from "next-intl"; -import Image from "next/image"; import TitlePage from "@/core/components/TitlePage"; +import Svg404 from "@/core/components/svgs/Svg404"; const NotFoundComponent = () => { const t = useTranslations(); @@ -13,32 +13,21 @@ const NotFoundComponent = () => { <> - - - - - {t("app_name")} - - - {t("ErrorPage.custom_404")} - - - - + + + + {t("ErrorPage.custom_404")} + + diff --git a/src/components/first/index.jsx b/src/components/first/index.jsx index 9304403..03407ff 100644 --- a/src/components/first/index.jsx +++ b/src/components/first/index.jsx @@ -1,11 +1,10 @@ -import dahsboardImage from "&/images/dashboard.svg"; import {NextLinkComposed} from "@/core/components/LinkRouting"; -import StyledImage from "@/core/components/StyledImage"; import CenterLayout from "@/layouts/CenterLayout"; import FullPageLayout from "@/layouts/FullPageLayout"; import useUser from "@/lib/app/hooks/useUser"; import {Button, Typography} from "@mui/material"; import {useTranslations} from "next-intl"; +import SvgDashboard from "@/core/components/svgs/SvgDashboard"; const FirstComponent = () => { const t = useTranslations(); @@ -14,12 +13,7 @@ const FirstComponent = () => { return ( - + {t("app_name")} diff --git a/src/components/login-expert/index.jsx b/src/components/login-expert/index.jsx index 30c84e6..7b35cf4 100644 --- a/src/components/login-expert/index.jsx +++ b/src/components/login-expert/index.jsx @@ -11,10 +11,10 @@ import {Box, Button, Container, Paper, Stack, TextField, Typography,} from "@mui import axios from "axios"; import {Field, Formik} from "formik"; import {useTranslations} from "next-intl"; -import Image from "next/image"; import {useSearchParams} from "next/navigation"; import * as Yup from "yup"; import useDirection from "@/lib/app/hooks/useDirection"; +import SvgLogin from "@/core/components/svgs/SvgLogin"; const LoginComponent = () => { const t = useTranslations(); @@ -61,11 +61,12 @@ const LoginComponent = () => { > {(props) => ( - - {t("app_name")} - + + {t("login_expert")} diff --git a/src/core/components/LoadingHardPage.jsx b/src/core/components/LoadingHardPage.jsx index d0f1c3f..c3b24d6 100644 --- a/src/core/components/LoadingHardPage.jsx +++ b/src/core/components/LoadingHardPage.jsx @@ -1,7 +1,7 @@ -import {Backdrop, Fade, styled} from "@mui/material"; -import StyledImage from "./StyledImage"; +import {Backdrop, Box, styled} from "@mui/material"; +import SvgLoading from "@/core/components/svgs/SvgLoading"; -const LoadingImage = styled(StyledImage)({ +const LoadingImage = styled(Box)({ "@keyframes load": { "0%": { // opacity: 0, @@ -26,15 +26,13 @@ const LoadingHardPage = ({children, loading}) => { sx={{bgcolor: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1}} open={loading} > - - - + + + {children} diff --git a/src/core/components/Messages.jsx b/src/core/components/Messages.jsx index bc53b6e..8a5cfc9 100644 --- a/src/core/components/Messages.jsx +++ b/src/core/components/Messages.jsx @@ -1,17 +1,13 @@ import CenterLayout from "@/layouts/CenterLayout"; import FullPageLayout from "@/layouts/FullPageLayout"; -import StyledImage from "./StyledImage"; +import SvgLoading from "@/core/components/svgs/SvgLoading"; const Message = ({text, actions}) => { return ( - + {text} {actions} diff --git a/src/core/components/svgs/Svg403.jsx b/src/core/components/svgs/Svg403.jsx new file mode 100644 index 0000000..720828c --- /dev/null +++ b/src/core/components/svgs/Svg403.jsx @@ -0,0 +1,131 @@ +import {useTheme} from "@mui/material"; + +const Svg403 = ({width, height}) => { + const theme = useTheme() + const fillColor = theme.palette.primary.main + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) + +} + +export default Svg403 \ No newline at end of file diff --git a/src/core/components/svgs/Svg404.jsx b/src/core/components/svgs/Svg404.jsx new file mode 100644 index 0000000..e46ab12 --- /dev/null +++ b/src/core/components/svgs/Svg404.jsx @@ -0,0 +1,101 @@ +import {useTheme} from "@mui/material"; + +const Svg404 = ({width, height}) => { + const theme = useTheme() + const fillColor = theme.palette.primary.main + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default Svg404 \ No newline at end of file diff --git a/src/core/components/svgs/SvgChangePassword.jsx b/src/core/components/svgs/SvgChangePassword.jsx new file mode 100644 index 0000000..a7ee82f --- /dev/null +++ b/src/core/components/svgs/SvgChangePassword.jsx @@ -0,0 +1,77 @@ +import {useTheme} from "@mui/material"; + +const SvgChangePassword = ({width, height}) => { + const theme = useTheme() + const fillColor = theme.palette.primary.main + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default SvgChangePassword \ No newline at end of file diff --git a/src/core/components/svgs/SvgDashboard.jsx b/src/core/components/svgs/SvgDashboard.jsx new file mode 100644 index 0000000..a5b40e0 --- /dev/null +++ b/src/core/components/svgs/SvgDashboard.jsx @@ -0,0 +1,117 @@ +import {useTheme} from "@mui/material"; + +const SvgDashboard = ({width, height}) => { + const theme = useTheme() + const fillColor = theme.palette.primary.main + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default SvgDashboard \ No newline at end of file diff --git a/src/core/components/svgs/SvgLoading.jsx b/src/core/components/svgs/SvgLoading.jsx new file mode 100644 index 0000000..f9cea4a --- /dev/null +++ b/src/core/components/svgs/SvgLoading.jsx @@ -0,0 +1,136 @@ +import {useTheme} from "@mui/material"; + +const SvgLoading = ({width, height}) => { + const theme = useTheme() + const fillColor = theme.palette.primary.main + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default SvgLoading \ No newline at end of file diff --git a/src/core/components/svgs/SvgLogin.jsx b/src/core/components/svgs/SvgLogin.jsx new file mode 100644 index 0000000..643c195 --- /dev/null +++ b/src/core/components/svgs/SvgLogin.jsx @@ -0,0 +1,75 @@ +import {useTheme} from "@mui/material"; + +const SvgLogin = ({width, height}) => { + const theme = useTheme() + const fillColor = theme.palette.primary.main + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) + +} + +export default SvgLogin \ No newline at end of file diff --git a/src/core/utils/theme-rtl.jsx b/src/core/utils/theme-rtl.jsx index fb0bbaa..33a9ae7 100644 --- a/src/core/utils/theme-rtl.jsx +++ b/src/core/utils/theme-rtl.jsx @@ -1,11 +1,13 @@ import {createTheme} from "@mui/material/styles"; import theme from "./theme"; +import {faIR} from "@mui/x-date-pickers/locales"; const themeRtl = createTheme({ direction: "rtl", typography: { fontFamily: `IRANSansFaNum, sans-serif`, }, + faIR, ...theme, }); diff --git a/src/core/utils/theme.jsx b/src/core/utils/theme.jsx index 0ded0d2..b36a3fe 100644 --- a/src/core/utils/theme.jsx +++ b/src/core/utils/theme.jsx @@ -1,21 +1,20 @@ -import {faIR} from "@mui/x-date-pickers/locales"; +import {colord} from "colord"; const theme = { palette: { primary: { main: process.env.NEXT_PUBLIC_PRIMARY_MAIN, - contrastText: process.env.NEXT_PUBLIC_PRIMARY_CONTRAST_TEXT, - light: process.env.NEXT_PUBLIC_PRIMARY_LIGHT, - dark: process.env.NEXT_PUBLIC_PRIMARY_DARK, + contrastText: "#FFFFFF", + light: colord(process.env.NEXT_PUBLIC_PRIMARY_MAIN).lighten(0.5).toHex(), + dark: colord(process.env.NEXT_PUBLIC_PRIMARY_MAIN).darken(0.1).toHex(), }, secondary: { main: process.env.NEXT_PUBLIC_SECONDARY_MAIN, - contrastText: process.env.NEXT_PUBLIC_SECENDARY_CONTRAST_TEXT, - light: process.env.NEXT_PUBLIC_SECENDARY_LIGHT, - dark: process.env.NEXT_PUBLIC_SECENDARY_DARK, + contrastText: "#FFFFFF", + light: colord(process.env.NEXT_PUBLIC_SECONDARY_MAIN).lighten(0.5).toHex(), + dark: colord(process.env.NEXT_PUBLIC_SECONDARY_MAIN).darken(0.1).toHex(), }, }, - faIR, components: { MuiBackdrop: { styleOverrides: { diff --git a/src/layouts/MuiLayout.jsx b/src/layouts/MuiLayout.jsx index 2614ac2..a2c2e69 100644 --- a/src/layouts/MuiLayout.jsx +++ b/src/layouts/MuiLayout.jsx @@ -10,10 +10,9 @@ import Head from "next/head"; const clientSideEmotionCacheRtl = createEmotionCacheRtl(); const MuiLayout = ({children, isBot}) => { - const emotionCache = clientSideEmotionCacheRtl; - const theme = themeRtl; + return ( @@ -30,7 +29,7 @@ const MuiLayout = ({children, isBot}) => { height: "8px", }, "*::-webkit-scrollbar-thumb": { - background: "#e1e1e1", + background: `${theme.palette.primary.light}`, borderRadius: "3px", }, "*:not(.MuiTableContainer-root)": { @@ -40,11 +39,11 @@ const MuiLayout = ({children, isBot}) => { "*": { scrollbarWidth: "thin", - scrollbarColor: "#e1e1e1 transparent", + scrollbarColor: `${theme.palette.primary.light} transparent`, }, "*::-moz-scrollbar-thumb": { - backgroundColor: "#e1e1e1", + backgroundColor: `${theme.palette.primary.light}`, }, [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: { "*::-webkit-scrollbar": {