chore(i18n): update i18n content

focela · Jul 19, 2024 · c9d51e9 · c9d51e9
1 parent cb9dbc4
commit c9d51e9
Show file tree

Hide file tree

Showing 9 changed files with 120 additions and 44 deletions.
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
   <meta content="#000000" name="theme-color" />
   <meta content="Web site created using create-react-app" name="description" />
   <link href="/logo192.png" rel="apple-touch-icon" />
-  <title>React - Material UI Dashboard</title>
+  <title>Weasel - React Admin Dashboard</title>
 
   <!-- this is to resolve issue in old safari browser in tablet -->
   <script src="https://cdn.jsdelivr.net/npm/resize-observer-polyfill@1.5.1/dist/ResizeObserver.min.js"></script>

diff --git a/src/components/logo/LogoMain.tsx b/src/components/logo/LogoMain.tsx
@@ -6,7 +6,7 @@ export default function LogoMain({ reverse }: { reverse?: boolean }) {
 
   return (
     <>
-      <svg width="118" height="35" viewBox="0 0 818 256" xmlns="http://www.w3.org/2000/svg">
+      <svg width="120" height="35" viewBox="0 0 818 256" xmlns="http://www.w3.org/2000/svg">
         <linearGradient id="a" x1="62.102327%" x2="108.19718%" y1="0%" y2="37.863576%">
           <stop offset="0" stopColor="#4285eb" />
           <stop offset="1" stopColor="#2ec7ff" />
@@ -48,7 +48,7 @@ export default function LogoMain({ reverse }: { reverse?: boolean }) {
           fontSize="160"
           fontWeight="bold"
         >
-          Focela
+          Weasel
         </text>
       </svg>
     </>

diff --git a/src/layout/MainLayout/Customization/ColorScheme.tsx b/src/layout/MainLayout/Customization/ColorScheme.tsx
@@ -10,13 +10,14 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { alpha, useTheme } from '@mui/material/styles';
 
+// THIRD-PARTY IMPORT
+import { presetDarkPalettes, presetPalettes, PalettesProps } from '@ant-design/colors';
+import { useTranslation } from 'react-i18next';
+
 // PROJECT IMPORT
 import MainCard from '~/components/cards/MainCard';
 import useConfig from '~/hooks/useConfig';
 
-// THIRD-PARTY IMPORT
-import { presetDarkPalettes, presetPalettes, PalettesProps } from '@ant-design/colors';
-
 // ASSETS IMPORT
 import colorLayout from '~/assets/images/customization/theme-color.svg';
 
@@ -30,73 +31,75 @@ interface ColorProps {
 
 export default function ColorScheme() {
   const theme = useTheme();
+  const { t } = useTranslation();
 
   const { mode, presetColor, onChangePresetColor } = useConfig();
-
   const colors: PalettesProps = mode === 'dark' ? presetDarkPalettes : presetPalettes;
+
   const { blue } = colors;
+
   const colorOptions: ColorProps[] = [
     {
       id: 'default',
       primary: blue[5],
       lighter: blue[0],
-      label: 'Default',
+      label: t('customization.default'),
       shadow: `0 0 0 2px ${alpha(blue[5], 0.2)}`
     },
     {
       id: 'theme1',
       primary: mode === 'dark' ? '#305bdd' : '#3366FF',
       lighter: mode === 'dark' ? '#1c2134' : '#D6E4FF',
-      label: 'Theme 1',
+      label: t('customization.themeColor', { attribute: 1 }),
       shadow: `0 0 0 2px ${alpha(mode === 'dark' ? '#305bdd' : '#3366FF', 0.2)}`
     },
     {
       id: 'theme2',
       primary: mode === 'dark' ? '#655ac8' : '#7265E6',
       lighter: mode === 'dark' ? '#222130' : '#EEEDFC',
-      label: 'Theme 2',
+      label: t('customization.themeColor', { attribute: 2 }),
       shadow: `0 0 0 2px ${alpha(mode === 'dark' ? '#655ac8' : '#7265E6', 0.2)}`
     },
     {
       id: 'theme3',
       primary: mode === 'dark' ? '#0a7d3e' : '#068e44',
       lighter: mode === 'dark' ? '#1a231f' : '#E6F3EC',
-      label: 'Theme 3',
+      label: t('customization.themeColor', { attribute: 3 }),
       shadow: `0 0 0 2px ${alpha(mode === 'dark' ? '#0a7d3e' : '#068e44', 0.2)}`
     },
     {
       id: 'theme4',
       primary: mode === 'dark' ? '#5d7dcb' : '#3c64d0',
       lighter: mode === 'dark' ? '#1d212d' : '#f0f6ff',
-      label: 'Theme 4',
+      label: t('customization.themeColor', { attribute: 4 }),
       shadow: `0 0 0 2px ${alpha(mode === 'dark' ? '#5d7dcb' : '#3c64d0', 0.2)}`
     },
     {
       id: 'theme5',
       primary: mode === 'dark' ? '#d26415' : '#f27013',
       lighter: mode === 'dark' ? '#32221a' : '#fff4e6',
-      label: 'Theme 5',
+      label: t('customization.themeColor', { attribute: 5 }),
       shadow: `0 0 0 2px ${alpha(mode === 'dark' ? '#d26415' : '#f27013', 0.2)}`
     },
     {
       id: 'theme6',
       primary: mode === 'dark' ? '#288d99' : '#2aa1af',
       lighter: mode === 'dark' ? '#1c2628' : '#e1f0ef',
-      label: 'Theme 6',
+      label: t('customization.themeColor', { attribute: 6 }),
       shadow: `0 0 0 2px ${alpha(mode === 'dark' ? '#288d99' : '#2aa1af', 0.2)}`
     },
     {
       id: 'theme7',
       primary: mode === 'dark' ? '#05934c' : '#00a854',
       lighter: mode === 'dark' ? '#1a2721' : '#d1e8d99c',
-      label: 'Theme 7',
+      label: t('customization.themeColor', { attribute: 7 }),
       shadow: `0 0 0 2px ${alpha(mode === 'dark' ? '#05934c' : '#00a854', 0.2)}`
     },
     {
       id: 'theme8',
       primary: mode === 'dark' ? '#058478' : '#009688',
       lighter: mode === 'dark' ? '#1a2524' : '#c1d6d066',
-      label: 'Theme 8',
+      label: t('customization.themeColor', { attribute: 8 }),
       shadow: `0 0 0 2px ${alpha(mode === 'dark' ? '#058478' : '#009688', 0.2)}`
     }
   ];

diff --git a/src/layout/MainLayout/Customization/ThemeLayout.tsx b/src/layout/MainLayout/Customization/ThemeLayout.tsx
@@ -11,6 +11,9 @@ import Typography from '@mui/material/Typography';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
 
+// THIRD-PARTY IMPORT
+import { useTranslation } from 'react-i18next';
+
 // PROJECT IMPORT
 import MainCard from '~/components/cards/MainCard';
 import useConfig from '~/hooks/useConfig';
@@ -23,14 +26,15 @@ import miniMenu from '~/assets/images/customization/mini-menu.svg';
 import rtlLayoutImg from '~/assets/images/customization/rtl.svg';
 
 export default function ThemeLayout() {
+  const { t } = useTranslation();
+
   const theme = useTheme();
   const matchDownLg = useMediaQuery(theme.breakpoints.down('lg'));
 
   const { menuMaster } = useGetMenuMaster();
   const drawerOpen = menuMaster.isDashboardDrawerOpened;
 
   const { miniDrawer, rtlLayout, layout, onChangeMiniDrawer, onChangeRTL } = useConfig();
-
   let initialTheme = 'default';
   if (miniDrawer) initialTheme = 'mini';
   if (rtlLayout) initialTheme = 'rtl';
@@ -78,7 +82,7 @@ export default function ThemeLayout() {
               >
                 <Stack spacing={1.25} alignItems="center">
                   <CardMedia component="img" src={defaultLayout} alt="Vertical" sx={{ borderRadius: 1, width: 64, height: 64 }} />
-                  <Typography variant="caption">Default</Typography>
+                  <Typography variant="caption">{t('customization.default')}</Typography>
                 </Stack>
               </MainCard>
             }
@@ -100,7 +104,7 @@ export default function ThemeLayout() {
                 >
                   <Stack spacing={1.25} alignItems="center">
                     <CardMedia component="img" src={miniMenu} alt="Vertical" sx={{ borderRadius: 1, width: 64, height: 64 }} />
-                    <Typography variant="caption">Mini Drawer</Typography>
+                    <Typography variant="caption">{t('customization.miniDrawer')}</Typography>
                   </Stack>
                 </MainCard>
               }

diff --git a/src/layout/MainLayout/Customization/ThemeMode.tsx b/src/layout/MainLayout/Customization/ThemeMode.tsx
@@ -11,6 +11,9 @@ import Typography from '@mui/material/Typography';
 import { PaletteMode } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 
+// THIRD-PARTY IMPORT
+import { useTranslation } from 'react-i18next';
+
 // PROJECT IMPORT
 import MainCard from '~/components/cards/MainCard';
 import useConfig from '~/hooks/useConfig';
@@ -20,6 +23,8 @@ import darkLayout from '~/assets/images/customization/dark.svg';
 import defaultLayout from '~/assets/images/customization/default.svg';
 
 export default function ThemeModeLayout() {
+  const { t } = useTranslation();
+
   const theme = useTheme();
 
   const { mode, onChangeMode } = useConfig();
@@ -44,7 +49,7 @@ export default function ThemeModeLayout() {
               >
                 <Stack spacing={1.25} alignItems="center">
                   <CardMedia component="img" src={defaultLayout} alt="Vertical" sx={{ borderRadius: 1, width: 64, height: 64 }} />
-                  <Typography variant="caption">Light</Typography>
+                  <Typography variant="caption">{t('customization.light')}</Typography>
                 </Stack>
               </MainCard>
             }
@@ -63,7 +68,7 @@ export default function ThemeModeLayout() {
               >
                 <Stack spacing={1.25} alignItems="center">
                   <CardMedia component="img" src={darkLayout} alt="Vertical" sx={{ borderRadius: 1, width: 64, height: 64 }} />
-                  <Typography variant="caption">Dark</Typography>
+                  <Typography variant="caption"> {t('customization.dark')}</Typography>
                 </Stack>
               </MainCard>
             }

diff --git a/src/layout/MainLayout/Customization/index.tsx b/src/layout/MainLayout/Customization/index.tsx
@@ -10,13 +10,7 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 
 // THIRD-PARTY IMPORT
-import BgColorsOutlined from '@ant-design/icons/BgColorsOutlined';
-import BorderInnerOutlined from '@ant-design/icons/BorderInnerOutlined';
-import CloseCircleOutlined from '@ant-design/icons/CloseCircleOutlined';
-import FontColorsOutlined from '@ant-design/icons/FontColorsOutlined';
-import HighlightOutlined from '@ant-design/icons/HighlightOutlined';
-import LayoutOutlined from '@ant-design/icons/LayoutOutlined';
-import SettingOutlined from '@ant-design/icons/SettingOutlined';
+import { useTranslation } from 'react-i18next';
 
 // PROJECT IMPORT
 import AnimateButton from '~/components/extended/AnimateButton';
@@ -31,8 +25,20 @@ import ThemeMenuLayout from '~/layout/MainLayout/Customization/ThemeMenuLayout';
 import ThemeWidth from '~/layout/MainLayout/Customization/ThemeWidth';
 import useConfig from '~/hooks/useConfig';
 
+// ASSETS IMPORT
+import BgColorsOutlined from '@ant-design/icons/BgColorsOutlined';
+import BorderInnerOutlined from '@ant-design/icons/BorderInnerOutlined';
+import CloseCircleOutlined from '@ant-design/icons/CloseCircleOutlined';
+import FontColorsOutlined from '@ant-design/icons/FontColorsOutlined';
+import HighlightOutlined from '@ant-design/icons/HighlightOutlined';
+import LayoutOutlined from '@ant-design/icons/LayoutOutlined';
+import SettingOutlined from '@ant-design/icons/SettingOutlined';
+
 export default function Customization() {
+  const { t } = useTranslation();
+
   const { mode } = useConfig();
+  const iconBackColorOpen = mode === 'dark' ? 'background.default' : 'grey.100';
 
   const colorScheme = useMemo(() => <ColorScheme />, []);
   const themeFont = useMemo(() => <ThemeFont />, []);
@@ -42,12 +48,10 @@ export default function Customization() {
   const themeWidth = useMemo(() => <ThemeWidth />, []);
 
   const [open, setOpen] = useState(false);
+
   const handleToggle = () => {
     setOpen(!open);
   };
-
-  const iconBackColorOpen = mode === 'dark' ? 'background.default' : 'grey.100';
-
   return (
     <>
       <Box sx={{ flexShrink: 0, ml: 0.75 }}>
@@ -76,7 +80,7 @@ export default function Customization() {
       >
         {open && (
           <MainCard
-            title="Theme Customization"
+            title={t('customization.title')}
             sx={{
               border: 'none',
               borderRadius: 0,
@@ -120,10 +124,10 @@ export default function Customization() {
                       </IconButton>
                       <Stack>
                         <Typography variant="subtitle1" color="text.primary">
-                          Theme Layout
+                          {t('customization.themeLayout')}
                         </Typography>
                         <Typography variant="caption" color="text.secondary">
-                          Choose your layout
+                          {t('customization.themeLayoutCaption')}
                         </Typography>
                       </Stack>
                     </Stack>
@@ -144,10 +148,10 @@ export default function Customization() {
                       </IconButton>
                       <Stack>
                         <Typography variant="subtitle1" color="text.primary">
-                          Menu Orientation
+                          {t('customization.menuOrientation')}
                         </Typography>
                         <Typography variant="caption" color="text.secondary">
-                          Choose Vertical or Horizontal Menu Orientation
+                          {t('customization.menuOrientationCaption')}
                         </Typography>
                       </Stack>
                     </Stack>
@@ -168,10 +172,10 @@ export default function Customization() {
                       </IconButton>
                       <Stack>
                         <Typography variant="subtitle1" color="text.primary">
-                          Theme Mode
+                          {t('customization.themeMode')}
                         </Typography>
                         <Typography variant="caption" color="text.secondary">
-                          Choose light or dark mode
+                          {t('customization.themeModeCaption')}
                         </Typography>
                       </Stack>
                     </Stack>
@@ -192,10 +196,10 @@ export default function Customization() {
                       </IconButton>
                       <Stack>
                         <Typography variant="subtitle1" color="text.primary">
-                          Color Scheme
+                          {t('customization.colorScheme')}
                         </Typography>
                         <Typography variant="caption" color="text.secondary">
-                          Choose your primary theme color
+                          {t('customization.colorSchemeCaption')}
                         </Typography>
                       </Stack>
                     </Stack>
@@ -216,10 +220,10 @@ export default function Customization() {
                       </IconButton>
                       <Stack>
                         <Typography variant="subtitle1" color="text.primary">
-                          Layout Width
+                          {t('customization.layoutWidth')}
                         </Typography>
                         <Typography variant="caption" color="text.secondary">
-                          Choose fluid or container layout
+                          {t('customization.layoutWidthCaption')}
                         </Typography>
                       </Stack>
                     </Stack>
@@ -240,10 +244,10 @@ export default function Customization() {
                       </IconButton>
                       <Stack>
                         <Typography variant="subtitle1" color="text.primary">
-                          Font Family
+                          {t('customization.fontFamily')}
                         </Typography>
                         <Typography variant="caption" color="text.secondary">
-                          Choose your font family.
+                          {t('customization.fontFamilyCaption')}
                         </Typography>
                       </Stack>
                     </Stack>

diff --git a/src/utils/locales/en/translation.json b/src/utils/locales/en/translation.json
@@ -47,5 +47,25 @@
   "validation": {
     "required": "{{attribute}} is required.",
     "max": "{{attribute}} must not be greater than {{max}} characters."
+  },
+  "customization": {
+    "colorScheme": "Color Scheme",
+    "colorSchemeCaption": "Choose your primary theme color",
+    "dark": "Dark",
+    "default": "Default",
+    "fontFamily": "Font Family",
+    "fontFamilyCaption": "Choose your font family",
+    "layoutWidth": "Layout Width",
+    "layoutWidthCaption": "Choose fluid or container layout",
+    "light": "Light",
+    "menuOrientation": "Menu Orientation",
+    "menuOrientationCaption": "Choose Vertical or Horizontal Menu Orientation",
+    "miniDrawer": "Mini Drawer",
+    "themeColor": "Theme {{attribute}}",
+    "themeLayout": "Theme Layout",
+    "themeLayoutCaption": "Choose your layout",
+    "themeMode": "Theme Mode",
+    "themeModeCaption": "Choose light or dark mode",
+    "title": "Theme Customization"
   }
 }