Translations and styling

src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx

@@ -200,10 +200,10 @@ export const EditAppModal = ({
 
           <Group position="right" mt="md">
             <Button onClick={closeModal} px={50} variant="light" color="gray">
-              {t('common:actions.cancel')}
+              {t('common:cancel')}
             </Button>
             <Button disabled={!form.isValid()} px={50} type="submit">
-              {t('common:actions.save')}
+              {t('common:save')}
             </Button>
           </Group>
         </Stack>

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

@@ -1,5 +1,6 @@
-import { Button, Card, Center, Grid, Stack, Text } from '@mantine/core';
+import { Button, Card, Center, Grid, ScrollArea, Stack, Text } from '@mantine/core';
 import { TablerIcon } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
 import Image from 'next/image';
 import React from 'react';
 import { useStyles } from './styles';
@@ -20,6 +21,7 @@ export const GenericAvailableElementType = ({
   handleAddition,
 }: GenericAvailableElementTypeProps) => {
   const { classes } = useStyles();
+  const { t } = useTranslation('layout/modals/about');
 
   const Icon =
     typeof image === 'string' ? () => <Image src={image} width={24} height={24} /> : image;
@@ -50,7 +52,7 @@ export const GenericAvailableElementType = ({
             radius="md"
             fullWidth
           >
-            Add to Dashboard
+            {t('addToDashboard')}
           </Button>
         </Stack>
       </Card>

src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/AvailableWidgetsTab.tsx

@@ -19,8 +19,7 @@ export const AvailableIntegrationElements = ({
       <SelectorBackArrow onClickBack={onClickBack} />
 
       <Text mb="md" color="dimmed">
-        Widgets interact with your apps, to provide you with more control over your applications.
-        They usually require a few configurations before use.
+        {t('widgetDescription')}
       </Text>
 
       <Grid>