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

* 💄 Add custom font sizing for app name

* 🚸 Added maximum font size

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',
   },