Improve UI/UX with modern design system and Android optimizations

[Copilot]

Modernizes the app's visual design and interaction patterns with a comprehensive color system, improved component styling, and Android-specific optimizations.

Color System

• Expanded from 6 to 17 semantic color tokens per theme (text, textSecondary, cardBackground, inputBorder, etc.)
• Improved contrast ratios for accessibility
• Centralized in constants/Colors.ts for consistency

Component Updates

Core Components

• Card: Enhanced borders, shadows, and platform-specific elevation (iOS: shadow, Android: elevation 3-8)
• FloatingPlusButton: Better shadow depth and touch feedback
• Form fields (NumberField, TextField, BooleanField, SelectField): Consistent heights (48-52px), padding, and border radius (8px)
• SignIn: Added icon, improved layout hierarchy

Screens

• index.tsx: Added icons to tracker cards, improved empty states with helpful messages
• toilet/logs.tsx: Implemented pull-to-refresh with RefreshControl
• settings.tsx: Better layout with setting descriptions
• caffeine/logs.tsx: Improved section organization

Android Compatibility

• Platform-specific styling via Platform.select()
• Touch targets meet 48dp minimum (44-56px)
• Android-specific textAlignVertical for multiline inputs

Testing

• Configured Jest with mocks for AsyncStorage, SecureStore, and SQLite
• Created jest.config.js and jest.setup.js
• Updated snapshots for new color values

Example of the enhanced color usage:

// Before
backgroundColor: theme === "dark" ? "#27272a" : "white"

// After  
backgroundColor: theme === "dark" ? Colors.dark.cardBackground : Colors.light.cardBackground

All existing functionality preserved. CodeQL scan shows zero vulnerabilities.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• api.expo.dev
  • Triggering command: /usr/local/bin/node node /home/REDACTED/work/MeTracker/MeTracker/node_modules/.bin/expo lint (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.