feat: Introduce Alerts, Clips, and Settings tabs, update theme colors, and enhance ThemedView, ThemedText, and IconSymbol components.

MobileApp/components/themed-text.tsx

@@ -5,7 +5,7 @@ import { useThemeColor } from '@/hooks/use-theme-color';
 export type ThemedTextProps = TextProps & {
   lightColor?: string;
   darkColor?: string;
-  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
+  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link' | 'secondary';
 };
 
 export function ThemedText({
@@ -15,7 +15,10 @@ export function ThemedText({
   type = 'default',
   ...rest
 }: ThemedTextProps) {
-  const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
+  const color = useThemeColor(
+    { light: lightColor, dark: darkColor },
+    type === 'secondary' ? 'textSecondary' : 'text'
+  );
 
   return (
     <Text
@@ -26,6 +29,7 @@ export function ThemedText({
         type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
         type === 'subtitle' ? styles.subtitle : undefined,
         type === 'link' ? styles.link : undefined,
+        type === 'secondary' ? styles.secondary : undefined,
         style,
       ]}
       {...rest}
@@ -55,6 +59,10 @@ const styles = StyleSheet.create({
   link: {
     lineHeight: 30,
     fontSize: 16,
-    color: '#0a7ea4',
+    color: '#635bff', // Stripe blurple
+  },
+  secondary: {
+    fontSize: 14,
+    lineHeight: 22,
   },
 });