Update CBS Mobile App codebase

src/modules/home/components/QuickActions.tsx

@@ -7,16 +7,38 @@ import {
 } from 'react-native';
 
 import Ionicons from '@react-native-vector-icons/ionicons';
-import { useTheme } from '../../../theme';
+import { useTheme, fontFamily, type CategoryHue } from '../../../theme';
 import { Card } from '../../../components';
+import { FeatureKey } from '../../../constants/featureKeys';
+import { useEnabledItems } from '../../../features';
 
-const CBS_ACTIONS = [
-  { id: 'transfer', title: 'Transfer', subtitle: 'Send Funds', icon: 'send', color: '#1E40AF', route: 'Payments' },
-  { id: 'payments', title: 'Pay Bills', subtitle: 'Utilities', icon: 'receipt', color: '#10B981', route: 'Payments' },
-  { id: 'airtime', title: 'Airtime', subtitle: 'Recharge', icon: 'phone-portrait', color: '#8B5CF6', route: 'Payments' },
-  { id: 'loans', title: 'Loans', subtitle: 'Manage', icon: 'cash', color: '#F59E0B', route: 'LoanFlow' },
-  { id: 'cards', title: 'Cards', subtitle: 'Security', icon: 'card', color: '#EC4899', route: 'Cards' },
-  { id: 'services', title: 'Stats', subtitle: 'Summary', icon: 'stats-chart', color: '#0EA5E9', route: 'Home' },
+/**
+ * The tiles.
+ *
+ * Each names a categorical HUE rather than a hex. The hue is decorative — it
+ * exists so that neighbouring tiles are easy to tell apart, and it carries no
+ * state — so it resolves through `theme.colors.category`, which supplies a
+ * legible tone plus a matching tint chip for whichever theme is live.
+ *
+ * The previous `${hex}15` suffix built that chip by compositing the raw hue at
+ * 8% alpha over the card. That reads on white and disappears completely on a
+ * dark card, which is the specific bug the paired ramp exists to fix.
+ */
+const CBS_ACTIONS: ReadonlyArray<{
+  id: string;
+  feature: FeatureKey;
+  title: string;
+  subtitle: string;
+  icon: string;
+  hue: CategoryHue;
+  route: string;
+}> = [
+  { id: 'transfer', feature: FeatureKey.HOME_QUICK_ACTIONS_TRANSFER, title: 'Transfer', subtitle: 'Send Funds', icon: 'send', hue: 'blue', route: 'Payments' },
+  { id: 'payments', feature: FeatureKey.HOME_QUICK_ACTIONS_BILL_PAY, title: 'Pay Bills', subtitle: 'Utilities', icon: 'receipt', hue: 'green', route: 'Payments' },
+  { id: 'airtime', feature: FeatureKey.HOME_QUICK_ACTIONS_AIRTIME, title: 'Airtime', subtitle: 'Recharge', icon: 'phone-portrait', hue: 'violet', route: 'Payments' },
+  { id: 'loans', feature: FeatureKey.HOME_QUICK_ACTIONS_LOANS, title: 'Loans', subtitle: 'Manage', icon: 'cash', hue: 'amber', route: 'LoanFlow' },
+  { id: 'cards', feature: FeatureKey.HOME_QUICK_ACTIONS_CARDS, title: 'Cards', subtitle: 'Security', icon: 'card', hue: 'pink', route: 'Cards' },
+  { id: 'services', feature: FeatureKey.HOME_QUICK_ACTIONS_STATS, title: 'Stats', subtitle: 'Summary', icon: 'stats-chart', hue: 'sky', route: 'Home' },
 ];
 
 interface QuickActionsProps {
@@ -25,10 +47,11 @@ interface QuickActionsProps {
 
 const QuickActionsComponent = ({ onPressRoute }: QuickActionsProps) => {
   const theme = useTheme();
+  const actions = useEnabledItems(CBS_ACTIONS);
 
   return (
     <View style={styles.grid}>
-      {CBS_ACTIONS.map((action) => (
+      {actions.map((action) => (
         <Card
           key={action.id}
           style={styles.card}
@@ -37,8 +60,17 @@ const QuickActionsComponent = ({ onPressRoute }: QuickActionsProps) => {
             onPress={() => onPressRoute(action.route)}
             style={styles.pressable}
           >
-            <View style={[styles.iconContainer, { backgroundColor: `${action.color}15` }]}>
-              <Ionicons name={action.icon as any} size={22} color={action.color} />
+            <View
+              style={[
+                styles.iconContainer,
+                { backgroundColor: theme.colors.category[action.hue].surface },
+              ]}
+            >
+              <Ionicons
+                name={action.icon as any}
+                size={22}
+                color={theme.colors.category[action.hue].tone}
+              />
             </View>
             <View>
               <Text style={[styles.title, { color: theme.colors.textPrimary }]}>{action.title}</Text>
@@ -79,14 +111,14 @@ const styles = StyleSheet.create({
   },
   title: {
     fontSize: 13,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
     textAlign: 'center',
     letterSpacing: -0.2,
   },
   subtitle: {
     fontSize: 9,
     marginTop: 2,
-    fontWeight: '600',
+    fontFamily: fontFamily.semibold,
     textAlign: 'center',
     opacity: 0.6,
     textTransform: 'uppercase',