From f696aef0a415a41e84348ebe626a9c4799e7c834 Mon Sep 17 00:00:00 2001 From: Amir Moghani Date: Tue, 16 Jun 2026 17:29:59 +0330 Subject: [PATCH] feat: add light and dark logo SVGs and update Logo component to use them based on color scheme --- src/assets/logo-en-dark.svg | 37 ++++++++++++++++++ src/assets/{logo-en.svg => logo-en-light.svg} | 0 src/assets/logo-fa-dark.svg | 34 ++++++++++++++++ src/assets/{logo-fa.svg => logo-fa-light.svg} | 0 src/components/Logo.tsx | 39 +++++++++++++++---- 5 files changed, 103 insertions(+), 7 deletions(-) create mode 100644 src/assets/logo-en-dark.svg rename src/assets/{logo-en.svg => logo-en-light.svg} (100%) create mode 100644 src/assets/logo-fa-dark.svg rename src/assets/{logo-fa.svg => logo-fa-light.svg} (100%) diff --git a/src/assets/logo-en-dark.svg b/src/assets/logo-en-dark.svg new file mode 100644 index 0000000..a8f64b7 --- /dev/null +++ b/src/assets/logo-en-dark.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/logo-en.svg b/src/assets/logo-en-light.svg similarity index 100% rename from src/assets/logo-en.svg rename to src/assets/logo-en-light.svg diff --git a/src/assets/logo-fa-dark.svg b/src/assets/logo-fa-dark.svg new file mode 100644 index 0000000..8d127af --- /dev/null +++ b/src/assets/logo-fa-dark.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/logo-fa.svg b/src/assets/logo-fa-light.svg similarity index 100% rename from src/assets/logo-fa.svg rename to src/assets/logo-fa-light.svg diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx index b747bac..b754552 100644 --- a/src/components/Logo.tsx +++ b/src/components/Logo.tsx @@ -1,24 +1,49 @@ -import LogoFaSvg from '@/assets/logo-fa.svg'; -import LogoEnSvg from '@/assets/logo-en.svg'; -import LogoIconSvg from '@/assets/logo_icon.svg'; -import { Box, type SxProps } from '@mui/material'; +import { useMemo } from 'react'; +import { Box, useColorScheme, type SxProps } from '@mui/material'; import { useTranslation } from 'react-i18next'; +import LogoFaLightSvg from '@/assets/logo-fa-light.svg'; +import LogoEnLightSvg from '@/assets/logo-en-light.svg'; +import LogoFaDarkSvg from '@/assets/logo-fa-dark.svg'; +import LogoEnDarkSvg from '@/assets/logo-en-dark.svg'; +import LogoIconSvg from '@/assets/logo_icon.svg'; + interface LogoProps { boxSx?: SxProps; isIcon?: boolean; } +const LOGO_MAP = { + fa: { + light: LogoFaLightSvg, + dark: LogoFaDarkSvg, + }, + en: { + light: LogoEnLightSvg, + dark: LogoEnDarkSvg, + }, +} as const; + function Logo({ boxSx, isIcon = false }: LogoProps) { const { i18n } = useTranslation(); + const { mode } = useColorScheme(); + + const logoSrc = useMemo(() => { + if (isIcon) return LogoIconSvg; + + const lang = i18n.language.startsWith('fa') ? 'fa' : 'en'; + const resolvedMode = mode === 'dark' ? 'dark' : 'light'; + + return LOGO_MAP[lang][resolvedMode]; + }, [i18n.language, mode, isIcon]); - const isFarsi = i18n.language === 'fa' || i18n.language === 'fa-IR'; return (