🔀 Merge dev to auth branch

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

@@ -67,6 +67,16 @@ export const AppearanceTab = ({
         />
         {form.values.appearance.appNameStatus === 'normal' && (
           <>
+            <NumberInput
+              label={t('appearance.appNameFontSize.label')}
+              description={t('appearance.appNameFontSize.description')}
+              min={5}
+              max={64}
+              {...form.getInputProps('appearance.appNameFontSize')}
+              onChange={(value) => {
+                form.setFieldValue('appearance.appNameFontSize', value);
+              }}
+            />
             <Select
               label={t('appearance.positionAppName.label')}
               description={t('appearance.positionAppName.description')}

src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx

@@ -94,6 +94,7 @@ export const AvailableElementTypes = ({
                   appearance: {
                     iconUrl: '/imgs/logo/logo.png',
                     appNameStatus: 'normal',
+                    appNameFontSize: 16,
                     positionAppName: 'column',
                     lineClampAppName: 1,
                   },

src/components/Dashboard/Tiles/Apps/AppTile.tsx

@@ -49,7 +49,7 @@ export const AppTile = ({ className, app }: AppTileProps) => {
             <Text
               className={cx(classes.appName, 'dashboard-tile-app-title')}
               fw={700}
-              size="md"
+              size={app.appearance.appNameFontSize}
               ta="center"
               sx={{
                 flex: isRow ? '1' : undefined,
@@ -60,19 +60,12 @@ export const AppTile = ({ className, app }: AppTileProps) => {
             </Text>
           )}
           <motion.img
-            className={cx('dashboard-tile-app-image')}
+            className={cx(classes.appImage, 'dashboard-tile-app-image')}
             src={app.appearance.iconUrl}
-            height="85%"
-            width="85%"
             alt={app.name}
             whileHover={{ scale: 0.9 }}
             initial={{ scale: 0.8 }}
             style={{
-              maxHeight: '90%',
-              maxWidth: '90%',
-              flex: 1,
-              overflow: 'auto',
-              objectFit: 'contain',
               width: isRow ? 0 : undefined,
             }}
           />
@@ -118,6 +111,13 @@ const useStyles = createStyles((theme, _params, getRef) => ({
     overflow: 'visible',
     flexGrow: 5,
   },
+  appImage:{
+    maxHeight: '100%',
+    maxWidth: '100%',
+    overflow: 'auto',
+    flex: 1,
+    objectFit: 'contain',
+  },
   appName: {
     wordBreak: 'break-word',
   },

src/components/Dashboard/Wrappers/Category/CategoryEditMenu.tsx

@@ -48,13 +48,13 @@ export const CategoryEditMenu = ({ category }: CategoryEditMenuProps) => {
           {t('menu.moveDown')}
         </Menu.Item>
         <Menu.Label>
-          {t('menu.addCategory')}
+          {t('menu.addCategory',{location: ''})}
         </Menu.Label>
         <Menu.Item icon={<IconRowInsertTop size={20} />} onClick={addCategoryAbove}>
-          {t('menu.addCategory') + ' ' + t('menu.addAbove')}
+          {t('menu.addCategory',{location: t('menu.addAbove')})}
         </Menu.Item>
         <Menu.Item icon={<IconRowInsertBottom size={20} />} onClick={addCategoryBelow}>
-          {t('menu.addCategory') + ' ' + t('menu.addBelow')}
+          {t('menu.addCategory',{location: t('menu.addBelow')})}
         </Menu.Item>
       </Menu.Dropdown>
     </Menu>

src/components/layout/header/About/AboutModal.tsx

@@ -163,7 +163,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
             variant="default"
             fullWidth
           >
-            Documentation
+            {t('layout/modals/about:documentation')}
           </Button>
         </Grid.Col>
 
@@ -198,6 +198,7 @@ interface ExtendedInitOptions extends InitOptions {
 const useInformationTableItems = (newVersionAvailable?: string): InformationTableItem[] => {
   const { attributes } = usePackageAttributesStore();
   const { primaryColor } = useColorTheme();
+  const { t } = useTranslation(['layout/modals/about']);
 
   const { configVersion } = useConfigContext();
   const { configs } = useConfigStore();
@@ -270,21 +271,23 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
                   transition={{ duration: 0.8, ease: 'easeInOut' }}
                 >
                   <Badge color="green" variant="filled">
-                    new: {newVersionAvailable}
+                    {t('version.new',{ newVersion: newVersionAvailable})}
                   </Badge>
                 </motion.div>
               </HoverCard.Target>
               <HoverCard.Dropdown>
-                Version{' '}
-                <b>
-                  <Anchor
-                    target="_blank"
-                    href={`https://github.com/ajnart/homarr/releases/tag/${newVersionAvailable}`}
-                  >
-                    {newVersionAvailable}
-                  </Anchor>
-                </b>{' '}
-                is available ! Current version: {attributes.packageVersion}
+                <Text>
+                  {t('version.dropdown', {currentVersion: attributes.packageVersion}).split('{{newVersion}}')[0]}
+                  <b>
+                    <Anchor
+                      target="_blank"
+                      href={`https://github.com/ajnart/homarr/releases/tag/${newVersionAvailable}`}
+                    >
+                      {newVersionAvailable}
+                    </Anchor>
+                  </b>
+                  {t('version.dropdown', {currentVersion: attributes.packageVersion}).split('{{newVersion}}')[1]}
+                </Text>
               </HoverCard.Dropdown>
             </HoverCard>
           )}