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>

src/components/Dashboard/Tiles/GenericTileMenu.tsx

@@ -24,7 +24,7 @@ export const GenericTileMenu = ({
   }
 
   return (
-    <Menu withinPortal>
+    <Menu withinPortal withArrow position="right-start">
       <Menu.Target>
         <ActionIcon pos="absolute" top={4} right={4}>
           <IconDots />
@@ -34,14 +34,14 @@ export const GenericTileMenu = ({
         <Menu.Label>{t('sections.settings')}</Menu.Label>
         {displayEdit && (
           <Menu.Item icon={<IconPencil size={16} stroke={1.5} />} onClick={handleClickEdit}>
-            {t('actions.edit')}
+            {t('edit')}
           </Menu.Item>
         )}
         <Menu.Item
           icon={<IconLayoutKanban size={16} stroke={1.5} />}
           onClick={handleClickChangePosition}
         >
-          {t('actions.changePosition')}
+          {t('changePosition')}
         </Menu.Item>
         <Menu.Label>{t('sections.dangerZone')}</Menu.Label>
         <Menu.Item
@@ -49,7 +49,7 @@ export const GenericTileMenu = ({
           icon={<IconTrash size={16} stroke={1.5} color="red" />}
           onClick={handleClickDelete}
         >
-          {t('actions.remove')}
+          {t('remove')}
         </Menu.Item>
       </Menu.Dropdown>
     </Menu>

src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx

@@ -92,9 +92,9 @@ export const WidgetsEditModal = ({
 
       <Group position="right">
         <Button onClick={() => context.closeModal(id)} variant="light">
-          {t('common:actions.cancel')}
+          {t('common:cancel')}
         </Button>
-        <Button onClick={handleSave}>{t('common:actions.save')}</Button>
+        <Button onClick={handleSave}>{t('common:save')}</Button>
       </Group>
     </Stack>
   );

src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx

@@ -35,9 +35,9 @@ export const WidgetsRemoveModal = ({
       <Text>{t('descriptor.remove.confirm')}</Text>
       <Group position="right">
         <Button onClick={() => context.closeModal(id)} variant="light">
-          {t('common:actions.cancel')}
+          {t('common:cancel')}
         </Button>
-        <Button onClick={() => handleDeletion()}>{t('common:actions.ok')}</Button>
+        <Button onClick={() => handleDeletion()}>{t('common:ok')}</Button>
       </Group>
     </Stack>
   );

src/components/Dashboard/Views/ViewToggleButton.tsx

@@ -1,11 +1,13 @@
 import { ActionIcon, Button, Text, Tooltip } from '@mantine/core';
 import { IconEdit, IconEditOff } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
 import { useScreenLargerThan } from '../../../tools/hooks/useScreenLargerThan';
 import { useEditModeStore } from './useEditModeStore';
 
 export const ViewToggleButton = () => {
   const screenLargerThanMd = useScreenLargerThan('md');
   const { enabled: isEditMode, toggleEditMode } = useEditModeStore();
+  const { t } = useTranslation('layout/header/actions/toggle-edit-mode');
 
   return (
     <Tooltip
@@ -27,7 +29,7 @@ export const ViewToggleButton = () => {
           color={isEditMode ? 'red' : undefined}
           radius="md"
         >
-          <Text>{isEditMode ? 'Exit Edit Mode' : 'Enter Edit Mode'}</Text>
+          <Text>{isEditMode ? t('button.enabled') : t('button.disabled')}</Text>
         </Button>
       ) : (
         <ActionIcon