💄 Add custom font sizing for app name (#1341)

* 💄 Add custom font sizing for app name

* 🚸 Added maximum font size

public/locales/en/layout/modals/add-app.json

@@ -54,6 +54,10 @@
 				"text": "This may take a few seconds"
 			}
 		},
+		"appNameFontSize":{
+			"label":"App Name Font Size",
+			"description":"Set the font size for when the app name is shown on the tile."
+		},
 		"appNameStatus":{
 			"label":"App Name Status",
 			"description":"Choose where you want the title to show up, if at all.",

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/modules/Docker/ContainerActionBar.tsx

@@ -130,6 +130,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
                 appearance: {
                   iconUrl: '/imgs/logo/logo.png',
                   appNameStatus: 'normal',
+                  appNameFontSize: 16,
                   positionAppName: 'column',
                   lineClampAppName: 1,
                 },

src/tools/config/getFrontendConfig.ts

@@ -141,6 +141,7 @@ const migrateAppConfigs = (config: BackendConfigType) => {
         ...app.appearance,
         appNameStatus: app.appearance.appNameStatus?? 'normal',
         positionAppName: app.appearance.positionAppName?? 'column',
+        appNameFontSize: app.appearance.appNameFontSize?? 16,
         lineClampAppName: app.appearance.lineClampAppName?? 1,
       }
     }))

src/types/app.ts

@@ -36,6 +36,7 @@ interface AppAppearanceType {
   iconUrl: string;
   appNameStatus: "normal"|"hover"|"hidden";
   positionAppName: Property.FlexDirection;
+  appNameFontSize: number;
   lineClampAppName: number;
 }