minor ui/ux updates on inventory and item pages

src/app/inventory/[item].tsx

@@ -107,7 +107,7 @@ const ItemPage: React.FC<ItemPageProps> = () => {
                 });
             }
         }
-    }, [item]);
+    }, [item?.id]);
 
     // console.log('Item: status & modal', status, activeModal);
 

src/app/inventory/index.tsx

@@ -7,12 +7,14 @@ import { useInventory } from 'hooks';
 
 import { Card } from 'components';
 import { InventoryItem } from 'types/GameMechanics';
+import { useGameContent } from 'contexts';
 
 const InventoryScreen: React.FC = () => {
     const { inventory, loading } = useInventory();
     const [categorizedInventory, setCategories] = useState<
         { title: string; data: InventoryItem[] }[]
     >([]);
+    const { inventory: content } = useGameContent();
 
     useMemo(async () => {
         if (inventory.length) {
@@ -55,16 +57,21 @@ const InventoryScreen: React.FC = () => {
             <Text style={styles.inventoryHeader}>{title.toUpperCase()}</Text>
         );
 
-    return loading ? (
-        <ActivityIndicator animating size="large" />
-    ) : (
-        <SectionList
-            style={styles.container}
-            sections={categorizedInventory}
-            ItemSeparatorComponent={() => <View style={styles.itemSeperator} />}
-            renderSectionHeader={renderCategoryHeader}
-            renderItem={({ item }) => renderItem({ item })}
-        />
+    return (
+        <>
+            <Text style={styles.pageDescription}>{content?.index?.meta?.description}</Text>
+            {loading ? (
+                <ActivityIndicator animating size="large" />
+            ) : (
+                <SectionList
+                    style={styles.container}
+                    sections={categorizedInventory}
+                    ItemSeparatorComponent={() => <View style={styles.itemSeperator} />}
+                    renderSectionHeader={renderCategoryHeader}
+                    renderItem={({ item }) => renderItem({ item })}
+                />
+            )}
+        </>
     );
 };
 
@@ -74,6 +81,15 @@ const styles = StyleSheet.create({
         flex: 1,
         width: '100%',
     },
+    pageDescription: {
+        backgroundColor: 'pink',
+        fontSize: 18,
+        padding: 10,
+        // fontWeight: 'bold',
+        // marginTop: 18,
+        // marginBottom: 18,
+        // marginLeft: 10, // same as list
+    },
     inventoryHeader: {
         fontSize: 24,
         fontWeight: 'bold',

src/assets/game-content/inventory.ts

@@ -1,4 +1,11 @@
 export default {
+    index: {
+        // when displaying all items
+        meta: {
+            description:
+                'Equip items to feed data to your jinni, help it evolve in different ways faster, and get personalized mini-games',
+        },
+    },
     MaliksMajik: {
         meta: {
             description:

src/components/common/Pill.tsx

@@ -20,12 +20,12 @@ const styles = StyleSheet.create({
     sm: {
         padding: 7,
         height: 35,
-        width: 70,
+        maxWidth: 126,
     },
     md: {
         padding: 25,
         height: 70,
-        width: 140,
+        maxWidth: 252,
     },
     pill: {
         textAlign: 'center',

src/inventory/github.ts

@@ -22,7 +22,7 @@ const equip = _equip(ITEM_ID);
 const unequip = _unequip(ITEM_ID);
 const item: InventoryItem = {
     id: ITEM_ID,
-    name: 'Octopus Brains',
+    name: ITEM_ID,
     dataProvider: ITEM_ID,
     image: 'https://pngimg.com/uploads/github/github_PNG90.png',
     tags: ['digital', 'productivity'],

src/inventory/spotify.ts

@@ -33,7 +33,7 @@ const unequip = _unequip(ITEM_ID);
 
 const item: InventoryItem = {
     id: ITEM_ID,
-    name: "Horn o' Vibranium",
+    name: ITEM_ID,
     dataProvider: ITEM_ID,
     image: 'https://w7.pngwing.com/pngs/420/432/png-transparent-spotify-logo-spotify-computer-icons-podcast-music-apps-miscellaneous-angle-logo-thumbnail.png',
     tags: ['digital', 'music', 'social'],