@taruvi/navkit 0.0.21 → 0.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taruvi/navkit",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "main": "src/App.tsx",
   "type": "module",
   "scripts": {

package/src/NavkitContext.tsx

@@ -109,7 +109,7 @@ export const NavkitProvider = ({ children, client, onThemeChange }: NavkitProvid
         const transformedApps: AppData[] = (appsResponse?.data || []).map?.((app: any) => ({
           id: app.slug,
           appname: app.display_name || app.name,
-          icon: app.icon || "fa-question",
+          icon: app.icon || "",
           url: app.url
         }))
         startTransition(() => {

package/src/components/AppLauncher/AppLauncher.tsx

@@ -3,7 +3,7 @@ import type { AppData } from "../../types"
 import Search from "../Search/Search"
 import { Card, Box, Grid, Typography } from "@mui/material"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import type { IconName } from "@fortawesome/fontawesome-svg-core"
+import { findIconDefinition, library, type IconName } from "@fortawesome/fontawesome-svg-core"
 import { useNavigation } from "../../NavkitContext"
 import { getAppLauncherStyles } from "./AppLauncher.styles"
 
@@ -12,6 +12,11 @@ const isIconUrl = (icon: string): boolean => {
     return icon.startsWith('http://') || icon.startsWith('https://') || icon.startsWith('/')
 }
 
+const isValidFaIcon = (icon: string): boolean => {
+    const iconName = icon.replace('fa-', '') as IconName
+    return !!findIconDefinition({ prefix: 'fas', iconName }) || !!findIconDefinition({ prefix: 'far', iconName })
+}
+
 const AppLauncher = () => {
     const { navigateToUrl, appsList, themeMode } = useNavigation()
     const styles = getAppLauncherStyles(themeMode)
@@ -34,10 +39,10 @@ const AppLauncher = () => {
             <Search appsList={appsList} onSearchChange={handleSearchChange} />
             {filteredApps && filteredApps.length > 0 && (
                 <Box sx={styles.scrollContainer}>
-                    <Grid container spacing={1}>
+                    <Grid container spacing={0}>
                         {filteredApps.map((app) => {
                             return (
-                                <Grid size={3} key={app.id}>
+                                <Grid size={2} key={app.id}>
                                     <Box
                                         sx={styles.appItem}
                                         onClick={() => handleAppClick(app)}
@@ -55,18 +60,22 @@ const AppLauncher = () => {
                                                         objectFit: 'contain'
                                                     }}
                                                 />
-                                            ) : (
+                                            ) : app.icon && isValidFaIcon(app.icon) ? (
                                                 <FontAwesomeIcon
                                                     icon={["fas", app.icon.replace('fa-', '') as IconName]}
                                                     style={styles.iconStyle}
                                                 />
+                                            ) : (
+                                                <Typography sx={{ fontSize: '1.25rem', fontWeight: 600 }}>
+                                                    {app.appname?.charAt(0).toUpperCase()}
+                                                </Typography>
                                             )}
                                         </Box>
                                         <Typography
                                             variant="body2"
                                             sx={styles.appName}
                                         >
-                                            {app?.appname?.length > 15 ? `${app.appname.substring(0, 15)}...` : app.appname}
+                                            {app?.appname?.length > 40 ? `${app.appname.substring(0, 40)}...` : app.appname}
                                         </Typography>
                                     </Box>
                                 </Grid>

package/src/components/Profile/Profile.styles.ts

@@ -1,4 +1,4 @@
-import { colours, spacing, shadows, borderRadius, typography, zIndex, dimensions, getColors, getShadows } from '../../styles/variables'
+import { colours, darkColors, spacing, shadows, borderRadius, typography, zIndex, dimensions, getColors, getShadows } from '../../styles/variables'
 import type { ThemeMode } from '../../styles/variables'
 
 export const profileStyles = {
@@ -76,8 +76,8 @@ export const getProfileStyles = (mode: ThemeMode) => {
     avatar: {
       width: dimensions.avatarSize,
       height: dimensions.avatarSize,
-      bgcolor: colors.bg.avatar,
-      color: colors.text.primary,
+      bgcolor: darkColors.bg.avatar,
+      color: darkColors.text.primary,
       fontWeight: typography.weights.semibold,
       fontSize: typography.sizes.sm,
     },