@dankupfer/create-dn-starter/template/src/modules/feature/apply/styles.ts

Interactive CLI for creating modular React Native apps with Expo

// template/src/modules/feature/apply/styles.ts
import { StyleSheet } from 'react-native';
import { ProcessedTheme } from '../../../theme/tokenProcessor';

export const createApplyStyles = (theme: ProcessedTheme) =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: theme.colors.background,
    },

    // Header styles (matching main app)
    header: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: theme.spacing.md,
      paddingTop: theme.spacing.sm,
    },
    headerLeft: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    notificationBadge: {
      backgroundColor: theme.colors.semantic.error,
      borderRadius: theme.borderRadius.sm * 3,
      paddingHorizontal: theme.spacing.xs + 2,
      paddingVertical: 2,
      marginRight: theme.spacing.md,
    },
    notificationCount: {
      color: theme.colors.neutral[50],
      fontSize: theme.fontSize.sm,
      fontWeight: 'bold',
    },
    sectionTitle: {
      color: theme.colors.text,
      fontSize: theme.fontSize.lg,
      fontWeight: '600',
    },
    logoutButton: {
      backgroundColor: theme.colors.surface,
      paddingHorizontal: theme.spacing.md,
      paddingVertical: theme.spacing.xs + 2,
      borderRadius: theme.borderRadius.sm,
    },
    logoutText: {
      color: theme.colors.text,
      fontSize: theme.fontSize.sm,
    },

    // Content styles
    content: {
      flex: 1,
    },
    welcomeSection: {
      padding: theme.spacing.lg,
      alignItems: 'center',
    },
    welcomeTitle: {
      color: theme.colors.text,
      fontSize: theme.fontSize.xl,
      fontWeight: 'bold',
      textAlign: 'center',
      marginBottom: theme.spacing.sm,
    },
    welcomeSubtitle: {
      color: theme.colors.textSecondary,
      fontSize: theme.fontSize.base,
      textAlign: 'center',
      lineHeight: 24,
    },

    // Categories styles
    categoriesSection: {
      paddingHorizontal: theme.spacing.md,
      marginBottom: theme.spacing.xl,
    },
    sectionHeading: {
      color: theme.colors.text,
      fontSize: theme.fontSize.lg,
      fontWeight: '600',
      marginBottom: theme.spacing.md,
    },

    // Application card styles
    applicationCard: {
      backgroundColor: theme.colors.surface,
      borderRadius: theme.borderRadius.md,
      padding: theme.spacing.md,
      marginBottom: theme.spacing.md,
      flexDirection: 'row',
      alignItems: 'center',
      borderWidth: 1,
      borderColor: theme.colors.border,
    },
    cardIcon: {
      width: 48,
      height: 48,
      borderRadius: 24,
      backgroundColor: theme.colors.primary[500],
      justifyContent: 'center',
      alignItems: 'center',
      marginRight: theme.spacing.md,
    },
    cardIconText: {
      fontSize: 20,
    },
    cardContent: {
      flex: 1,
    },
    cardTitle: {
      color: theme.colors.text,
      fontSize: theme.fontSize.base,
      fontWeight: '600',
      marginBottom: theme.spacing.xs,
    },
    cardDescription: {
      color: theme.colors.textSecondary,
      fontSize: theme.fontSize.sm,
      lineHeight: 20,
    },
    cardArrow: {
      color: theme.colors.primary[500],
      fontSize: theme.fontSize.lg,
      marginLeft: theme.spacing.sm,
    },

    // Spacing
    bottomPadding: {
      height: theme.spacing.xl,
    },
  });