✨ add translations for dropzone

src/components/Config/LoadConfig.tsx

@@ -3,6 +3,7 @@ import { IconX as X, IconCheck as Check, IconX, IconPhoto, IconUpload } from '@t
 import { showNotification } from '@mantine/notifications';
 import { setCookie } from 'cookies-next';
 import { Dropzone } from '@mantine/dropzone';
+import { useTranslation } from 'next-i18next';
 import { useConfig } from '../../tools/state';
 import { Config } from '../../tools/types';
 import { migrateToIdConfig } from '../../tools/migrate';
@@ -10,6 +11,7 @@ import { migrateToIdConfig } from '../../tools/migrate';
 export default function LoadConfigComponent(props: any) {
   const { setConfig } = useConfig();
   const theme = useMantineTheme();
+  const { t } = useTranslation('settings/general/config-changer');
 
   return (
     <Dropzone.FullScreen
@@ -20,10 +22,10 @@ export default function LoadConfigComponent(props: any) {
           } catch (e) {
             showNotification({
               autoClose: 5000,
-              title: <Text>Error</Text>,
+              title: <Text>{t('dropzone.notifications.invalidConfig.title')}</Text>,
               color: 'red',
               icon: <X />,
-              message: 'could not load your config. Invalid JSON format.',
+              message: t('dropzone.notifications.invalidConfig.message'),
             });
             return;
           }
@@ -33,7 +35,9 @@ export default function LoadConfigComponent(props: any) {
             radius: 'md',
             title: (
               <Text>
-                Config <b>{newConfig.name}</b> loaded successfully
+                {t('dropzone.notifications.loadedSuccessfully.title', {
+                  configName: newConfig.name,
+                })}
               </Text>
             ),
             color: 'green',
@@ -58,7 +62,7 @@ export default function LoadConfigComponent(props: any) {
               stroke={1.5}
               color={theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6]}
             />
-            Drag files here to upload a config. Support for JSON only.
+            {t('dropzone.accept.text')}
           </Text>
         </Dropzone.Accept>
         <Dropzone.Reject>
@@ -68,7 +72,7 @@ export default function LoadConfigComponent(props: any) {
               stroke={1.5}
               color={theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6]}
             />
-            This file format is not supported. Please only upload JSON.
+            {t('dropzone.reject.text')}
           </Text>
         </Dropzone.Reject>
         <Dropzone.Idle>

src/components/Config/SaveConfig.tsx

@@ -36,12 +36,12 @@ export default function SaveConfigComponent(props: any) {
             setConfig({ ...config, name: values.configName });
             setOpened(false);
             showNotification({
-              title: 'Config saved',
+              title: t('modal.events.configSaved.title'),
               icon: <Check />,
               color: 'green',
               autoClose: 1500,
               radius: 'md',
-              message: `Config saved as ${values.configName}`,
+              message: t('modal.events.configSaved.message', { configName: values.configName }),
             });
           })}
         >
@@ -52,7 +52,7 @@ export default function SaveConfigComponent(props: any) {
             {...form.getInputProps('configName')}
           />
           <Group position="right" mt="md">
-            <Button type="submit">{t('modal.form.buttons.submit')}</Button>
+            <Button type="submit">{t('modal.form.submitButton')}</Button>
           </Group>
         </form>
       </Modal>
@@ -68,22 +68,22 @@ export default function SaveConfigComponent(props: any) {
             .delete(`/api/configs/${config.name}`)
             .then(() => {
               showNotification({
-                title: t('buttons.delete.deleted.title'),
+                title: t('buttons.delete.notifications.deleted.title'),
                 icon: <Check />,
                 color: 'green',
                 autoClose: 1500,
                 radius: 'md',
-                message: t('buttons.delete.deleted.message'),
+                message: t('buttons.delete.notifications.deleted.message'),
               });
             })
             .catch(() => {
               showNotification({
-                title: t('buttons.delete.deleteFailed.title'),
+                title: t('buttons.delete.notifications.deleteFailed.title'),
                 icon: <X />,
                 color: 'red',
                 autoClose: 1500,
                 radius: 'md',
-                message: t('buttons.delete.deleteFailed.message'),
+                message: t('buttons.delete.notifications.deleteFailed.message'),
               });
             });
           setConfig({ ...config, name: 'default' });

src/components/Settings/OpacitySelector.tsx

@@ -5,7 +5,7 @@ import { useConfig } from '../../tools/state';
 
 export function OpacitySelector() {
   const { config, setConfig } = useConfig();
-  const { t } = useTranslation('settings/customization/shade-selector');
+  const { t } = useTranslation('settings/customization/opacity-selector');
 
   const MARKS = [
     { value: 10, label: '10' },

src/components/Settings/ShadeSelector.tsx

@@ -16,7 +16,7 @@ import { useColorTheme } from '../../tools/color';
 export function ShadeSelector() {
   const { config, setConfig } = useConfig();
   const [opened, setOpened] = useState(false);
-  const { t } = useTranslation('settings/general/shade-selector');
+  const { t } = useTranslation('settings/customization/shade-selector');
 
   const { primaryColor, secondaryColor, primaryShade, setPrimaryShade } = useColorTheme();