@dankupfer/create-dn-starter/template/src/modules/core/combined-auth/styles.ts

Interactive CLI for creating modular React Native apps with Expo

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

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

    // Splash styles
    splashContainer: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: theme.colors.background,
      padding: theme.spacing.xl,
    },
    splashTitle: {
      fontSize: theme.fontSize.xl,
      fontWeight: 'bold',
      color: theme.colors.text,
      marginBottom: theme.spacing.sm,
    },
    splashSubtitle: {
      fontSize: theme.fontSize.base,
      color: theme.colors.textSecondary,
      marginBottom: theme.spacing.xl,
    },
    splashLoader: {
      marginTop: theme.spacing.lg,
    },

    // Auth styles
    authContainer: {
      flex: 1,
      backgroundColor: theme.colors.background,
    },
    authContent: {
      flex: 1,
      justifyContent: 'center',
      padding: theme.spacing.lg,
    },
    authTitle: {
      fontSize: theme.fontSize.xl,
      fontWeight: 'bold',
      color: theme.colors.text,
      textAlign: 'center',
      marginBottom: theme.spacing.sm,
    },
    authSubtitle: {
      fontSize: theme.fontSize.base,
      color: theme.colors.textSecondary,
      textAlign: 'center',
      marginBottom: theme.spacing.xl,
    },
    inputContainer: {
      marginBottom: theme.spacing.lg,
    },
    input: {
      backgroundColor: theme.colors.surface,
      borderWidth: 1,
      borderColor: theme.colors.border,
      borderRadius: theme.borderRadius.md,
      paddingHorizontal: theme.spacing.md,
      paddingVertical: theme.spacing.md,
      fontSize: theme.fontSize.base,
      color: theme.colors.text,
      marginBottom: theme.spacing.md,
    },
    primaryButton: {
      backgroundColor: theme.colors.primary[500],
      borderRadius: theme.borderRadius.md,
      paddingVertical: theme.spacing.md,
      alignItems: 'center',
      marginBottom: theme.spacing.md,
    },
    disabledButton: {
      backgroundColor: theme.colors.neutral[500],
    },
    primaryButtonText: {
      color: theme.colors.neutral[50],
      fontSize: theme.fontSize.base,
      fontWeight: '600',
    },
    secondaryButton: {
      alignItems: 'center',
    },
    secondaryButtonText: {
      color: theme.colors.textSecondary,
      fontSize: theme.fontSize.sm,
    },
    // Dashboard styles
    dashboardContainer: {
      flex: 1,
      backgroundColor: theme.colors.background,
    },
    header: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: theme.spacing.md,
      paddingTop: theme.spacing.sm,
    },
    headerLeft: {
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'flex-start',
    },
    headerCenter: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
    headerRight: {
      flex: 1,
      alignItems: 'flex-end',
      justifyContent: 'center',
    },
    notificationBadge: {
      backgroundColor: theme.colors.neutral[200], // Changed from semantic.error to neutral gray
      borderRadius: theme.borderRadius.sm, // Changed from sm * 3 to just sm for more rectangular shape
      paddingHorizontal: theme.spacing.xs + 4, // Slightly more horizontal padding
      paddingVertical: theme.spacing.xs, // More vertical padding for rectangular shape
    },
    notificationCount: {
      color: theme.colors.neutral[500], // Changed from neutral[50] to dark text
      fontSize: theme.fontSize.sm,
      fontWeight: 'bold',
    },
    greeting: {
      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,
    },

    // Keep the existing navigation styles for now (we'll theme these later)
    topNav: {
      paddingHorizontal: 16,
      paddingVertical: 8,
      marginBottom: 16,
    },
    pillContainer: {
      position: 'relative',
      height: 32,
    },
    pillMask: {
      position: 'absolute',
      top: 0,
      width: 100,
      height: 32,
      backgroundColor: 'transparent',
      borderRadius: 20,
      borderWidth: 1,
      borderColor: theme.colors.border,
      zIndex: 2,
    },
    pillScrollView: {
      position: 'relative',
      zIndex: 3,
    },
    slidingBackground: {
      position: 'absolute',
      top: 0,
      left: 0,
      width: 100,
      height: 32,
      backgroundColor: theme.colors.neutral[900], // Changed from primary[500] to black
      borderRadius: 20, // Add border radius to match pills
      zIndex: 1,
    },
    navPill: {
      backgroundColor: theme.colors.neutral[100], // Light gray background for inactive
      borderWidth: 0, // Remove border
      borderRadius: 20,
      paddingHorizontal: 16,
      paddingVertical: 6,
      marginRight: 8,
      height: 32,
      justifyContent: 'center',
      minWidth: 100,
    },
    navPillActive: {
      backgroundColor: theme.colors.neutral[900], // Black background for active
      borderColor: 'transparent',
    },
    navPillText: {
      color: theme.colors.neutral[500], // Dark gray text for inactive
      fontSize: theme.fontSize.sm,
      textAlign: 'center',
    },
    navPillTextActive: {
      color: theme.colors.neutral[50], // White text for active
      fontWeight: '600',
    },
    navPillSolid: {
      backgroundColor: theme.colors.surface,
      borderColor: theme.colors.surface,
    },
    content: {
      flex: 1,
      paddingHorizontal: theme.spacing.md,
    },
    carouselContainer: {
      flex: 1,
    },
    carouselContent: {},
    sectionContainer: {
      flex: 1,
    },
    sectionScrollView: {
      flex: 1,
    },
    sectionContent: {
      paddingHorizontal: theme.spacing.md,
    },
    sectionTitle: {
      color: theme.colors.text,
      fontSize: theme.fontSize.lg,
      fontWeight: '600',
      marginBottom: theme.spacing.md,
    },
    bottomPadding: {
      height: theme.spacing.lg,
    },

    // Placeholder styles
    placeholderContainer: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      paddingVertical: 80,
      paddingHorizontal: theme.spacing.lg,
    },
    placeholderTitle: {
      color: theme.colors.text,
      fontSize: theme.fontSize.xl,
      fontWeight: 'bold',
      marginBottom: theme.spacing.md,
      textAlign: 'center',
    },
    placeholderText: {
      color: theme.colors.textSecondary,
      fontSize: theme.fontSize.base,
      textAlign: 'center',
      marginBottom: theme.spacing.sm,
      lineHeight: 24,
    },
    placeholderSubtext: {
      color: theme.colors.textSecondary,
      fontSize: theme.fontSize.sm,
      textAlign: 'center',
      fontStyle: 'italic',
    },

    // Overlay styles
    overlayContainer: {
      flex: 1,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      justifyContent: 'flex-end',
    },
    overlayBackdrop: {
      flex: 1,
    },
    overlayContent: {
      backgroundColor: theme.colors.surface,
      paddingHorizontal: theme.spacing.lg,
      paddingBottom: 34,
      paddingTop: theme.spacing.md,
      flex: 1,
      minHeight: 300,
      maxHeight: '100%',
      shadowColor: '#000',
      shadowOffset: {
        width: 0,
        height: -4,
      },
      shadowOpacity: 0.3,
      shadowRadius: 8,
      elevation: 8,
    },
    overlayHandle: {
      width: 40,
      height: 4,
      backgroundColor: theme.colors.border,
      borderRadius: 2,
      alignSelf: 'center',
      marginBottom: theme.spacing.lg,
    },
    overlayTitle: {
      color: theme.colors.text,
      fontSize: theme.fontSize.xl,
      fontWeight: 'bold',
      marginBottom: theme.spacing.md,
      textAlign: 'center',
    },
    overlayText: {
      color: theme.colors.textSecondary,
      fontSize: theme.fontSize.base,
      textAlign: 'center',
      marginBottom: theme.spacing.xl,
      lineHeight: 24,
    },
    overlayCloseButton: {
      backgroundColor: theme.colors.primary[500],
      borderRadius: theme.borderRadius.md,
      paddingVertical: theme.spacing.md,
      alignItems: 'center',
      marginTop: 'auto',
    },
    overlayCloseText: {
      color: theme.colors.neutral[50],
      fontSize: theme.fontSize.base,
      fontWeight: '600',
    },
  });