Translations and styling

public/locales/en/common.json

@@ -1,14 +1,14 @@
 {
-  "actions": {
   "save": "Save",
+  "about": "About",
   "cancel": "Cancel",
   "close": "Close",
   "delete": "Delete",
   "ok": "Okay",
   "edit": "Edit",
+  "version": "Version",
   "changePosition": "Change position",
-    "remove": "Remove"
+  "remove": "Remove",
-  },
   "sections": {
     "settings": "Settings",
     "dangerZone": "Danger zone"

public/locales/en/layout/element-selector/selector.json

@@ -3,6 +3,7 @@
         "title": "Add a new tile",
         "text": "Tiles are the main element of homarr. They allow you to configure the dashboard and display the information you want."
     },
+    "widgetDescription": "Widgets interact with your apps, to provide you with more control over your applications. They usually require a few configurations before use.",
     "actionIcon": {
         "tooltip": "Add a tile"
     }

public/locales/en/layout/header/actions/toggle-edit-mode.json

@@ -6,6 +6,6 @@
     },
     "popover": {
         "title": "Edit mode is enabled",
-        "text": "You can adjust and configure your apps now. Changes are not saved until you exit edit mode"
+        "text": "You can adjust and configure your apps now. Changes are <strong>not saved</strong> until you exit edit mode"
     }
 }

public/locales/en/layout/modals/about.json

@@ -0,0 +1,7 @@
+{
+	"description": "Homarr is a <strong>simple</strong> and <strong>modern</strong> 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's easy to install and supports many different devices.",
+	"i18n": "Loaded I18n translation namespaces",
+	"locales": "Configured I18n locales",
+	"contact": "Having trouble or questions? Connect with us!",
+	"addToDashboard": "Add to Dashboard"
+}

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
+        <Trans i18nKey="layout/modals/about:description" />
-        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.
       </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.
+        {t('widgetDescription')}
-        They usually require a few configurations before use.
       </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>

src/modules/moduleWrapper.tsx

@@ -98,7 +98,7 @@ function getItems(module: IModule) {
                 onChange={(e) => {}}
               />
 
-              <Button type="submit">{t('actions.save', { ns: 'common' })}</Button>
+              <Button type="submit">{t('save', { ns: 'common' })}</Button>
             </Group>
           </form>
         );

src/tools/translation-namespaces.ts

@@ -3,6 +3,7 @@ export const dashboardNamespaces = [
   'layout/tools',
   'layout/element-selector/selector',
   'layout/modals/add-app',
+  'layout/modals/about',
   'layout/header/actions/toggle-edit-mode',
   'settings/common',
   'settings/general/theme-selector',