UI Refresh: Dark-First Design System Implementation #34
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add TOKENS constant with dark-first design system values - Update useTheme hook to force dark mode with TOKENS - Create 7 new design system components: - StatusBadge: Shadow-based status indicators - StatCard: Metric display cards - ControlButton: Touch-optimized buttons - SectionHeader: Visual hierarchy headers - ScreenLayout: Standard screen wrapper with pull-to-refresh - ProgressBar: Progress indicator with shadow accent - EmptyState: Friendly empty state component - Add test-components.tsx for component validation Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
- Remove fake quick actions (I'm Feeling Lucky, Inspire Me, Go Invent, Add Action) - Keep only functional quick actions (Interactive, Running, Notifications) - Update to 3-column grid layout for better spacing Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
- Update sessions index to use EmptyState component - Add router for create session action in empty state Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
Phase 2 updates: - Settings: Remove GitHub Integration and API Keys "Soon" badges - Settings Privacy: Condense bullet points from 7 to 3 key points - Sessions: Add EmptyState component Phase 3 updates: - Badge: Use TOKENS.radius20 for consistency - Toggle: Use TOKENS colors (primary, border, card) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
Component updates: - OfflineBanner: Use TOKENS for danger color and text - ErrorMessage: Use TOKENS for colors and radius - Toast: Use TOKENS for background colors (primary, warning, success, danger, elevated) - FAB: Use TOKENS.primary for background color Cleanup: - Delete test-components.tsx (testing complete) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
Comprehensive update to migrate entire codebase from legacy light theme colors to dark-first TOKENS design system. Color property migrations: - colors.text → colors.textPrimary (white text on dark) - colors.accent → colors.primary (blue #3b82f6) - colors.error → colors.danger (red #ef4444) - colors.textPrimarySecondary → colors.textSecondary Files updated (46 total): - All app screens (tabs, settings, sessions, decisions, RFE, etc.) - All components (chat, inbox, layout, notifications, session) - Design system components (ScreenLayout, SectionHeader) - Theme hook (useTheme.tsx) Type system fixes: - Updated ThemeContextType interface to use typeof TOKENS - Fixed ScreenLayout to use SafeAreaView from react-native-safe-area-context - Fixed SectionHeader style prop type from ViewStyle to TextStyle All screens now display white/light gray text on dark backgrounds, making content readable throughout the app. TypeScript type-check passes with zero errors. Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
React Native's Animated API doesn't support color interpolation reliably across platforms. Removed progress and status flash animations that were using color interpolations, replacing them with static colors. Changes: - Removed Animated.interpolate for progressTextColor, progressBgColor, statusBgColor - Replaced Animated.Text and Animated.View with standard Text and View - Removed animation useEffects and refs - Added static wrapper styles (statusBadgeWrapper, progressWrapper) - Removed unused imports (useEffect, useRef, Animated) This fixes the runtime error: "Invariant Violation: outputRange must contain color or value with numeric component" The app now loads without errors while maintaining dark theme readability. Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
- Session names now dynamically generate dates (Jan 11, Jan 10, etc.) - All timestamps use relative dates (Date.now() - offset) - Inbox data updated from December 2025 to current dates - Notification history uses relative timestamps - Format design system components with Prettier Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR implements a comprehensive UI refresh with a dark-first design system, replacing the slate-based corporate aesthetic with a polished modern look using the cl0ck design system.
Changes
Phase 1: Foundation & Design System
TOKENSconstant with dark-first design values (#0a0a0a background)useThemehook to force dark mode everywhereStatusBadge- Shadow-based status indicators with glowStatCard- Metric display cardsControlButton- Touch-optimized buttons (44pt min)SectionHeader- Visual hierarchy headersScreenLayout- Standard wrapper with pull-to-refreshProgressBar- Progress with shadow accentEmptyState- Friendly empty statesPhase 2: Screen Updates
EmptyStatecomponent for better UXPhase 3: Component Migration
Updated 6 UI components to use TOKENS:
Badge.tsx- UsesTOKENS.radius20Toggle.tsx- UsesTOKENS.primary,border,cardOfflineBanner.tsx- UsesTOKENS.danger,textPrimaryErrorMessage.tsx- Uses TOKENS for all colorsToast.tsx- Uses TOKENS for backgroundsFAB.tsx- UsesTOKENS.primaryDesign Decisions
TOKENS.textPrimaryinstead of nestedTOKENS.text.primaryCOLORSexport for potential rollbackTesting Checklist
Files Changed
Created (7 components):
components/design-system/StatusBadge.tsxcomponents/design-system/StatCard.tsxcomponents/design-system/ControlButton.tsxcomponents/design-system/SectionHeader.tsxcomponents/design-system/ScreenLayout.tsxcomponents/design-system/ProgressBar.tsxcomponents/design-system/EmptyState.tsxModified (11 files):
utils/constants.ts- Added TOKENShooks/useTheme.tsx- Force dark modeapp/(tabs)/index.tsx- Remove fake actionsapp/sessions/index.tsx- Add EmptyStateapp/settings/index.tsx- Remove Soon badgesapp/settings/privacy.tsx- Condense textcomponents/ui/Badge.tsx- Use TOKENScomponents/ui/Toggle.tsx- Use TOKENScomponents/ui/OfflineBanner.tsx- Use TOKENScomponents/ui/ErrorMessage.tsx- Use TOKENScomponents/ui/Toast.tsx- Use TOKENScomponents/layout/FAB.tsx- Use TOKENSRollback Plan
If issues arise, simply revert to main:
🤖 Generated with Claude Code