Translations and styling

src/components/About/AboutModal.tsx

@@ -4,6 +4,7 @@ import {
   Badge,
   Button,
   createStyles,
+  Divider,
   Group,
   HoverCard,
   Modal,
@@ -21,7 +22,7 @@ import {
 } from '@tabler/icons';
 import { motion } from 'framer-motion';
 import { InitOptions } from 'i18next';
-import { i18n } from 'next-i18next';
+import { i18n, Trans, useTranslation } from 'next-i18next';
 import Image from 'next/image';
 import { ReactNode } from 'react';
 import { CURRENT_VERSION } from '../../../data/constants';
@@ -37,6 +38,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
   const { classes } = useStyles();
   const colorGradiant = usePrimaryGradient();
   const informations = useInformationTableItems(newVersionAvailable);
+  const { t } = useTranslation(['common', 'layout/modals/about']);
 
   return (
     <Modal
@@ -46,22 +48,16 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
         <Group spacing="sm">
           <Image src="/imgs/logo/logo.png" width={30} height={30} objectFit="contain" />
           <Title order={3} variant="gradient" gradient={colorGradiant}>
-            About Homarr
+            {t('about')} Homarr
           </Title>
         </Group>
       }
       size="xl"
     >
       <Text mb="lg">
-        Homarr is a simple and modern homepage for your server that helps you access all of your
-        apps in one place. It integrates with the apps you use to display useful information or
-        control them. It&apos;s easy to install and supports many different devices.
+        <Trans i18nKey="layout/modals/about:description" />
       </Text>
 
-      <Title order={6} mb="xs" align="center">
-        Version information:
-      </Title>
-
       <Table mb="lg" striped highlightOnHover withBorder>
         <tbody>
           {informations.map((item, index) => (
@@ -71,7 +67,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
                   <ActionIcon className={classes.informationIcon} variant="default">
                     {item.icon}
                   </ActionIcon>
-                  {item.label}
+                  {t(item.label)}
                 </Group>
               </td>
               <td className={classes.informationTableColumn}>{item.content}</td>
@@ -79,9 +75,9 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
           ))}
         </tbody>
       </Table>
-
+      <Divider variant="dashed" mb="md" />
       <Title order={6} mb="xs" align="center">
-        Having trouble or questions? Connect with us!
+        {t('layout/modals/about:contact')}
       </Title>
 
       <Group grow>
@@ -101,7 +97,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
           leftIcon={<IconWorldWww size={20} />}
           variant="default"
         >
-          Website
+          Documentation
         </Button>
         <Button
           component="a"
@@ -141,7 +137,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
       ...items,
       {
         icon: <IconLanguage size={20} />,
-        label: 'Loaded I18n translation namespaces',
+        label: 'layout/modals/about:i18n',
         content: (
           <Badge variant="gradient" gradient={colorGradiant}>
             {usedI18nNamespaces.length}
@@ -150,7 +146,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
       },
       {
         icon: <IconVocabulary size={20} />,
-        label: 'Configured I18n locales',
+        label: 'layout/modals/about:locales',
         content: (
           <Badge variant="gradient" gradient={colorGradiant}>
             {initOptions.locales.length}
@@ -164,7 +160,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
     ...items,
     {
       icon: <IconVersions size={20} />,
-      label: 'Homarr version',
+      label: 'version',
       content: (
         <Group position="right">
           <Badge variant="gradient" gradient={colorGradiant}>
@@ -176,7 +172,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
                 <motion.div
                   initial={{ scale: 1.2 }}
                   animate={{
-                    scale: [0.8, 1.10, 1],
+                    scale: [0.8, 1.1, 1],
                     rotate: [0, 10, 0],
                   }}
                   transition={{ duration: 0.8, ease: 'easeInOut' }}

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

src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon, Button, Popover, Text, Tooltip } from '@mantine/core';
 import { IconEditCircle, IconEditCircleOff, IconX } from '@tabler/icons';
-import { useTranslation } from 'next-i18next';
+import { Trans, useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import { useScreenSmallerThan } from '../../../../../tools/hooks/useScreenSmallerThan';
 
@@ -54,7 +54,9 @@ export const ToggleEditModeAction = () => {
           </div>
           <Text align="center" size="sm">
             <Text weight="bold">{t('popover.title')}</Text>
-            {t('popover.text')}
+            <Text>
+              <Trans i18nKey="layout/header/actions/toggle-edit-mode:popover.text" />
+            </Text>
           </Text>
         </Popover.Dropdown>
       </Popover>

src/components/layout/header/SettingsMenu.tsx

@@ -37,7 +37,7 @@ export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: str
               }
               onClick={() => aboutModal.open()}
             >
-              About
+              {t('about')}
             </Menu.Item>
           </Menu.Dropdown>
         </Menu>