Adding some translations

src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx

@@ -45,7 +45,7 @@ export const ChangePositionModal = ({
     onSubmit(form.values.x, form.values.y, form.values.width, form.values.height);
   };
 
-  const { t } = useTranslation('common');
+  const { t } = useTranslation(['layout/modals/change-position', 'common']);
 
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
@@ -54,8 +54,8 @@ export const ChangePositionModal = ({
           <NumberInput
             max={99}
             min={0}
-            label="X Position"
-            description="0 or higher"
+            label={t('xPosition')}
+            description={t('layout/modals/change-position:zeroOrHigher')}
             {...form.getInputProps('x')}
           />
         </Grid.Col>
@@ -64,8 +64,8 @@ export const ChangePositionModal = ({
           <NumberInput
             max={99}
             min={0}
-            label="Y Position"
-            description="0 or higher"
+            label={t('layout/modals/change-position:yPosition')}
+            description={t('layout/modals/change-position:zeroOrHigher')}
             {...form.getInputProps('y')}
           />
         </Grid.Col>
@@ -77,8 +77,11 @@ export const ChangePositionModal = ({
             data={widthData}
             max={24}
             min={1}
-            label="Width"
-            description={`Between ${widthData.at(0)?.label} and ${widthData.at(-1)?.label}`}
+            label={t('layout/modals/change-position:width')}
+            description={t('layout/modals/change-position:betweenXandY', {
+              min: widthData.at(0)?.label,
+              max: widthData.at(-1)?.label,
+            })}
             {...form.getInputProps('width')}
           />
         </Grid.Col>
@@ -88,8 +91,11 @@ export const ChangePositionModal = ({
             data={heightData}
             max={24}
             min={1}
-            label="Height"
-            description={`Between ${heightData.at(0)?.label} and ${heightData.at(-1)?.label}`}
+            label={t('layout/modals/change-position:height')}
+            description={t('layout/modals/change-position:betweenXandY', {
+              min: heightData.at(0)?.label,
+              max: heightData.at(-1)?.label,
+            })}
             {...form.getInputProps('height')}
           />
         </Grid.Col>
@@ -97,9 +103,9 @@ export const ChangePositionModal = ({
 
       <Flex justify="end" gap="sm" mt="md">
         <Button onClick={() => onCancel()} variant="light" color="gray">
-          {t('cancel')}
+          {t('common:cancel')}
         </Button>
-        <Button type="submit">{t('save')}</Button>
+        <Button type="submit">{t('common:save')}</Button>
       </Flex>
     </form>
   );

src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/IconSelector/IconSelector.tsx

@@ -17,6 +17,7 @@ import { UseFormReturnType } from '@mantine/form';
 import { useDebouncedValue } from '@mantine/hooks';
 import { IconSearch, IconX } from '@tabler/icons';
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'next-i18next';
 import { ICON_PICKER_SLICE_LIMIT } from '../../../../../../../../data/constants';
 import { IconSelectorItem } from '../../../../../../../types/iconSelector/iconSelectorItem';
 import { WalkxcodeRepositoryIcon } from '../../../../../../../types/iconSelector/repositories/walkxcodeIconRepository';
@@ -72,6 +73,8 @@ export const IconSelector = ({ onChange, allowAppNamePropagation, form }: IconSe
   const isTruncated =
     slicedFilteredItems.length > 0 && slicedFilteredItems.length !== filteredItems.length;
 
+  const { t } = useTranslation('layout/tools');
+
   return (
     <Popover width={310}>
       <Popover.Target>
@@ -88,7 +91,7 @@ export const IconSelector = ({ onChange, allowAppNamePropagation, form }: IconSe
           <TextInput
             value={searchTerm}
             onChange={(event) => setSearchTerm(event.currentTarget.value)}
-            placeholder="Search for icons..."
+            placeholder={t('iconPicker.textInputPlaceholder')}
             variant="filled"
             rightSection={
               <ActionIcon onClick={() => setSearchTerm('')}>
@@ -110,11 +113,10 @@ export const IconSelector = ({ onChange, allowAppNamePropagation, form }: IconSe
               <Stack spacing="xs" pr={15}>
                 <Divider mt={35} mx="xl" />
                 <Title order={6} color="dimmed" align="center">
-                  Search is limited to {ICON_PICKER_SLICE_LIMIT} icons
+                  {t('iconPicker.searchLimitationTitle', { max: ICON_PICKER_SLICE_LIMIT })}
                 </Title>
                 <Text color="dimmed" align="center" size="sm">
-                  To keep things snappy and fast, the search is limited to {ICON_PICKER_SLICE_LIMIT}{' '}
-                  icons. Use the search box to find more icons.
+                  {t('iconPicker.searchLimitationMessage', { max: ICON_PICKER_SLICE_LIMIT })}
                 </Text>
               </Stack>
             )}

src/components/Dashboard/Modals/SelectElement/Components/Shared/SelectorBackArrow.tsx

@@ -1,19 +1,23 @@
 import { Button, Text } from '@mantine/core';
 import { IconArrowNarrowLeft } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
 
 interface SelectorBackArrowProps {
   onClickBack: () => void;
 }
 
-export const SelectorBackArrow = ({ onClickBack }: SelectorBackArrowProps) => (
-  <Button
-    leftIcon={<IconArrowNarrowLeft />}
-    onClick={onClickBack}
-    styles={{ inner: { width: 'fit-content' } }}
-    fullWidth
-    variant="default"
-    mb="md"
-  >
-    <Text>See all available elements</Text>
-  </Button>
-);
+export function SelectorBackArrow({ onClickBack }: SelectorBackArrowProps) {
+  const { t } = useTranslation('layout/element-selector/selector');
+  return (
+    <Button
+      leftIcon={<IconArrowNarrowLeft />}
+      onClick={onClickBack}
+      styles={{ inner: { width: 'fit-content' } }}
+      fullWidth
+      variant="default"
+      mb="md"
+    >
+      <Text>{t('goBack')}</Text>
+    </Button>
+  );
+}