Skip to content

UI Refresh: Dark-First Design System Implementation #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jeremyeder merged 8 commits into from
Jan 11, 2026
Merged

UI Refresh: Dark-First Design System Implementation #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ff54cbe
feat: Phase 1 - Add design system foundation and TOKENS
Jan 11, 2026
af02843
feat: Phase 2.1 - Update Dashboard screen
Jan 11, 2026
d48aceb
feat: Phase 2.2 - Update Sessions screens
Jan 11, 2026
18c4057
feat: Phase 2 & 3 - Update screens and components
Jan 11, 2026
3e03524
feat: Phase 3 - Update UI components to use TOKENS
Jan 11, 2026
1a55bcf
fix: Replace all legacy color properties with TOKENS equivalents
jeremyeder Jan 11, 2026
ce6c9e4
fix: Remove Animated color interpolations from SessionCard
jeremyeder Jan 11, 2026
6e076a0
Update mock data to use current dates and times
jeremyeder Jan 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 40 additions & 32 deletions app/(tabs)/explore.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default function SettingsScreen() {
return (
<ScrollView style={[styles.container, { backgroundColor: colors.bg }]}>
<View style={styles.header}>
<Text style={[styles.headerTitle, { color: colors.text }]}>Settings</Text>
<Text style={[styles.headerTitle, { color: colors.textPrimary }]}>Settings</Text>
<Text style={[styles.headerSubtitle, { color: colors.textSecondary }]}>
Manage your preferences
</Text>
Expand All @@ -27,7 +27,7 @@ export default function SettingsScreen() {

<View style={[styles.card, { backgroundColor: colors.card }]}>
<View style={styles.accountInfo}>
<View style={[styles.avatar, { backgroundColor: colors.accent }]}>
<View style={[styles.avatar, { backgroundColor: colors.primary }]}>
<Text style={styles.avatarText}>
{user?.name
?.split(' ')
Expand All @@ -36,11 +36,11 @@ export default function SettingsScreen() {
</Text>
</View>
<View style={styles.accountDetails}>
<Text style={[styles.accountName, { color: colors.text }]}>{user?.name}</Text>
<Text style={[styles.accountName, { color: colors.textPrimary }]}>{user?.name}</Text>
<Text style={[styles.accountEmail, { color: colors.textSecondary }]}>
{user?.email}
</Text>
<Text style={[styles.accountRole, { color: colors.accent }]}>{user?.role}</Text>
<Text style={[styles.accountRole, { color: colors.primary }]}>{user?.role}</Text>
</View>
</View>
</View>
Expand All @@ -53,8 +53,8 @@ export default function SettingsScreen() {
<View style={[styles.card, { backgroundColor: colors.card }]}>
<View style={styles.settingRow}>
<View style={styles.settingInfo}>
<IconSymbol name="moon.fill" size={20} color={colors.text} />
<Text style={[styles.settingLabel, { color: colors.text }]}>Dark Mode</Text>
<IconSymbol name="moon.fill" size={20} color={colors.textPrimary} />
<Text style={[styles.settingLabel, { color: colors.textPrimary }]}>Dark Mode</Text>
</View>
<Text style={[styles.settingValue, { color: colors.textSecondary }]}>
{themeMode === 'system' ? 'Auto' : themeMode === 'dark' ? 'On' : 'Off'}
Expand All @@ -65,45 +65,45 @@ export default function SettingsScreen() {
<TouchableOpacity
style={[
styles.themeOption,
themeMode === 'light' && { backgroundColor: colors.accent + '20' },
themeMode === 'light' && { backgroundColor: colors.primary + '20' },
]}
onPress={() => handleThemeChange('light')}
activeOpacity={0.7}
>
<IconSymbol name="sun.max.fill" size={24} color={colors.text} />
<Text style={[styles.themeOptionText, { color: colors.text }]}>Light</Text>
<IconSymbol name="sun.max.fill" size={24} color={colors.textPrimary} />
<Text style={[styles.themeOptionText, { color: colors.textPrimary }]}>Light</Text>
{themeMode === 'light' && (
<View style={[styles.activeIndicator, { backgroundColor: colors.accent }]} />
<View style={[styles.activeIndicator, { backgroundColor: colors.primary }]} />
)}
</TouchableOpacity>

<TouchableOpacity
style={[
styles.themeOption,
themeMode === 'dark' && { backgroundColor: colors.accent + '20' },
themeMode === 'dark' && { backgroundColor: colors.primary + '20' },
]}
onPress={() => handleThemeChange('dark')}
activeOpacity={0.7}
>
<IconSymbol name="moon.fill" size={24} color={colors.text} />
<Text style={[styles.themeOptionText, { color: colors.text }]}>Dark</Text>
<IconSymbol name="moon.fill" size={24} color={colors.textPrimary} />
<Text style={[styles.themeOptionText, { color: colors.textPrimary }]}>Dark</Text>
{themeMode === 'dark' && (
<View style={[styles.activeIndicator, { backgroundColor: colors.accent }]} />
<View style={[styles.activeIndicator, { backgroundColor: colors.primary }]} />
)}
</TouchableOpacity>

<TouchableOpacity
style={[
styles.themeOption,
themeMode === 'system' && { backgroundColor: colors.accent + '20' },
themeMode === 'system' && { backgroundColor: colors.primary + '20' },
]}
onPress={() => handleThemeChange('system')}
activeOpacity={0.7}
>
<IconSymbol name="sparkles" size={24} color={colors.text} />
<Text style={[styles.themeOptionText, { color: colors.text }]}>Auto</Text>
<IconSymbol name="sparkles" size={24} color={colors.textPrimary} />
<Text style={[styles.themeOptionText, { color: colors.textPrimary }]}>Auto</Text>
{themeMode === 'system' && (
<View style={[styles.activeIndicator, { backgroundColor: colors.accent }]} />
<View style={[styles.activeIndicator, { backgroundColor: colors.primary }]} />
)}
</TouchableOpacity>
</View>
Expand All @@ -117,55 +117,63 @@ export default function SettingsScreen() {
<View style={[styles.card, { backgroundColor: colors.card }]}>
<View style={styles.settingRow}>
<View style={styles.settingInfo}>
<Text style={[styles.settingLabel, { color: colors.text }]}>Blocking Alerts</Text>
<Text style={[styles.settingLabel, { color: colors.textPrimary }]}>
Blocking Alerts
</Text>
</View>
<Switch
value={user?.preferences.notifications.blockingAlerts}
trackColor={{ false: colors.border, true: colors.accent + '60' }}
trackColor={{ false: colors.border, true: colors.primary + '60' }}
thumbColor={
user?.preferences.notifications.blockingAlerts ? colors.accent : colors.card
user?.preferences.notifications.blockingAlerts ? colors.primary : colors.card
}
ios_backgroundColor={colors.border}
/>
</View>

<View style={[styles.settingRow, { borderTopColor: colors.border }]}>
<View style={styles.settingInfo}>
<Text style={[styles.settingLabel, { color: colors.text }]}>Review Requests</Text>
<Text style={[styles.settingLabel, { color: colors.textPrimary }]}>
Review Requests
</Text>
</View>
<Switch
value={user?.preferences.notifications.reviewRequests}
trackColor={{ false: colors.border, true: colors.accent + '60' }}
trackColor={{ false: colors.border, true: colors.primary + '60' }}
thumbColor={
user?.preferences.notifications.reviewRequests ? colors.accent : colors.card
user?.preferences.notifications.reviewRequests ? colors.primary : colors.card
}
ios_backgroundColor={colors.border}
/>
</View>

<View style={[styles.settingRow, { borderTopColor: colors.border }]}>
<View style={styles.settingInfo}>
<Text style={[styles.settingLabel, { color: colors.text }]}>Session Updates</Text>
<Text style={[styles.settingLabel, { color: colors.textPrimary }]}>
Session Updates
</Text>
</View>
<Switch
value={user?.preferences.notifications.sessionUpdates}
trackColor={{ false: colors.border, true: colors.accent + '60' }}
trackColor={{ false: colors.border, true: colors.primary + '60' }}
thumbColor={
user?.preferences.notifications.sessionUpdates ? colors.accent : colors.card
user?.preferences.notifications.sessionUpdates ? colors.primary : colors.card
}
ios_backgroundColor={colors.border}
/>
</View>

<View style={[styles.settingRow, { borderTopColor: colors.border }]}>
<View style={styles.settingInfo}>
<Text style={[styles.settingLabel, { color: colors.text }]}>Features & News</Text>
<Text style={[styles.settingLabel, { color: colors.textPrimary }]}>
Features & News
</Text>
</View>
<Switch
value={user?.preferences.notifications.featuresAndNews}
trackColor={{ false: colors.border, true: colors.accent + '60' }}
trackColor={{ false: colors.border, true: colors.primary + '60' }}
thumbColor={
user?.preferences.notifications.featuresAndNews ? colors.accent : colors.card
user?.preferences.notifications.featuresAndNews ? colors.primary : colors.card
}
ios_backgroundColor={colors.border}
/>
Expand All @@ -178,11 +186,11 @@ export default function SettingsScreen() {
<Text style={[styles.sectionTitle, { color: colors.textSecondary }]}>ACCOUNT</Text>

<TouchableOpacity
style={[styles.card, styles.dangerButton, { backgroundColor: colors.error + '10' }]}
style={[styles.card, styles.dangerButton, { backgroundColor: colors.danger + '10' }]}
onPress={logout}
activeOpacity={0.7}
>
<Text style={[styles.dangerButtonText, { color: colors.error }]}>Sign Out</Text>
<Text style={[styles.dangerButtonText, { color: colors.danger }]}>Sign Out</Text>
</TouchableOpacity>
</View>

Expand Down
2 changes: 1 addition & 1 deletion app/(tabs)/inbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function InboxScreen() {
<ScrollView
style={[styles.container, { backgroundColor: colors.bg }]}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={colors.accent} />
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={colors.primary} />
}
showsVerticalScrollIndicator={false}
>
Expand Down
30 changes: 12 additions & 18 deletions app/(tabs)/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import { useOffline } from '@/hooks/useOffline'
import { useRealtimeSession } from '@/hooks/useRealtimeSession'
import { useNotifications } from '@/hooks/useNotifications'
import { Header } from '@/components/layout/Header'
import { FAB } from '@/components/layout/FAB'
import { SessionCard } from '@/components/session/SessionCard'
import { ErrorMessage } from '@/components/ui/ErrorMessage'
import { OfflineBanner } from '@/components/ui/OfflineBanner'
Expand Down Expand Up @@ -49,7 +48,7 @@ const QuickActionButton = memo<QuickActionButtonProps>(
<TouchableOpacity
style={[
styles.quickActionButton,
{ backgroundColor: action.disabled ? colors.card : colors.accent },
{ backgroundColor: action.disabled ? colors.card : colors.primary },
]}
onPress={action.onPress}
activeOpacity={0.8}
Expand Down Expand Up @@ -159,18 +158,14 @@ export default function DashboardScreen() {
count: unreadCount > 0 ? unreadCount : undefined,
onPress: () => router.push('/notifications'),
},
{ id: 'lucky', icon: 'dice.fill', text: "I'm Feeling Lucky" },
{ id: 'inspire', icon: 'lightbulb.fill', text: 'Inspire Me' },
{ id: 'invent', icon: 'sparkles', text: 'Go Invent' },
{ id: 'add', icon: 'plus.circle.fill', text: 'Add Action', disabled: true, badge: 'Soon' },
],
[runningSessions.length, unreadCount, router]
)

if (authLoading) {
return (
<View style={[styles.container, { backgroundColor: colors.bg }]}>
<Text style={[styles.loadingText, { color: colors.text }]}>Loading...</Text>
<Text style={[styles.loadingText, { color: colors.textPrimary }]}>Loading...</Text>
</View>
)
}
Expand Down Expand Up @@ -201,20 +196,20 @@ export default function DashboardScreen() {
<View
style={[
styles.connectionBanner,
{ backgroundColor: isError ? colors.error + '20' : colors.warning + '20' },
{ backgroundColor: isError ? colors.danger + '20' : colors.warning + '20' },
]}
>
<View style={styles.connectionContent}>
<View
style={[
styles.connectionDot,
{
backgroundColor: isError ? colors.error : colors.warning,
backgroundColor: isError ? colors.danger : colors.warning,
},
]}
/>
<Text
style={[styles.connectionText, { color: isError ? colors.error : colors.warning }]}
style={[styles.connectionText, { color: isError ? colors.danger : colors.warning }]}
>
{isError ? 'Real-time updates unavailable' : 'Connecting to updates...'}
</Text>
Expand All @@ -227,15 +222,15 @@ export default function DashboardScreen() {
accessibilityLabel="Retry connection"
accessibilityHint="Double tap to retry real-time connection"
>
<Text style={[styles.retryText, { color: colors.error }]}>Retry</Text>
<Text style={[styles.retryText, { color: colors.danger }]}>Retry</Text>
</TouchableOpacity>
)}
</View>
)}

{/* Quick Actions - 2 rows of 3 */}
<View style={styles.section}>
<Text style={[styles.sectionTitle, { color: colors.text }]}>Quick Actions</Text>
<Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>Quick Actions</Text>
<View style={styles.quickActionsGrid}>
{quickActions.map((action) => (
<View key={action.id} style={styles.quickActionWrapper}>
Expand All @@ -249,7 +244,7 @@ export default function DashboardScreen() {
{awaitingReview.length > 0 && (
<View style={styles.section}>
<View style={styles.sectionHeader}>
<Text style={[styles.sectionTitle, { color: colors.text }]}>My Reviews</Text>
<Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>My Reviews</Text>
<View
style={[
styles.badge,
Expand Down Expand Up @@ -278,15 +273,17 @@ export default function DashboardScreen() {
{/* Active Sessions */}
<View style={styles.section}>
<View style={styles.sectionHeader}>
<Text style={[styles.sectionTitle, { color: colors.text }]}>Active Sessions</Text>
<Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>
Active Sessions
</Text>
{runningSessions.length > 0 && (
<TouchableOpacity
onPress={handleViewAllSessions}
accessibilityRole="button"
accessibilityLabel="View all sessions"
accessibilityHint="Double tap to view all active sessions"
>
<Text style={[styles.viewAllText, { color: colors.accent }]}>View All</Text>
<Text style={[styles.viewAllText, { color: colors.primary }]}>View All</Text>
</TouchableOpacity>
)}
</View>
Expand Down Expand Up @@ -319,9 +316,6 @@ export default function DashboardScreen() {

<View style={{ height: 40 }} />
</ScrollView>

{/* Floating Action Button */}
<FAB />
</View>
)
}
Expand Down
2 changes: 1 addition & 1 deletion app/_layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ function RootLayoutNav() {
headerStyle: {
backgroundColor: colors.bg,
},
headerTintColor: colors.text,
headerTintColor: colors.textPrimary,
headerShadowVisible: false,
headerBackTitle: '',
contentStyle: {
Expand Down
16 changes: 9 additions & 7 deletions app/announcements/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,19 +90,21 @@ export default function AnnouncementsScreen() {
styles.announcementCard,
{
backgroundColor: colors.card,
borderColor: unread ? colors.accent : colors.border,
borderColor: unread ? colors.primary : colors.border,
},
]}
onPress={() => handleAnnouncementPress(item)}
activeOpacity={0.7}
>
<View style={styles.cardHeader}>
<View style={styles.titleRow}>
<Text style={[styles.title, { color: colors.text }, unread && styles.titleUnread]}>
<Text
style={[styles.title, { color: colors.textPrimary }, unread && styles.titleUnread]}
>
{item.title}
</Text>
{unread && (
<View style={[styles.newBadge, { backgroundColor: colors.accent }]}>
<View style={[styles.newBadge, { backgroundColor: colors.primary }]}>
<Text style={styles.newBadgeText}>NEW</Text>
</View>
)}
Expand All @@ -124,7 +126,7 @@ export default function AnnouncementsScreen() {
if (isLoading) {
return (
<View style={[styles.container, styles.centered, { backgroundColor: colors.bg }]}>
<ActivityIndicator size="large" color={colors.accent} />
<ActivityIndicator size="large" color={colors.primary} />
</View>
)
}
Expand All @@ -133,8 +135,8 @@ export default function AnnouncementsScreen() {
<View style={[styles.container, { backgroundColor: colors.bg }]}>
{/* Header */}
<View style={styles.header}>
<IconSymbol name="gift.fill" size={28} color={colors.accent} />
<Text style={[styles.headerTitle, { color: colors.text }]}>Announcements</Text>
<IconSymbol name="gift.fill" size={28} color={colors.primary} />
<Text style={[styles.headerTitle, { color: colors.textPrimary }]}>Announcements</Text>
</View>

{/* Announcements List */}
Expand All @@ -146,7 +148,7 @@ export default function AnnouncementsScreen() {
ListEmptyComponent={
<View style={[styles.emptyState, { backgroundColor: colors.card }]}>
<IconSymbol name="gift" size={48} color={colors.textSecondary} />
<Text style={[styles.emptyStateText, { color: colors.text }]}>
<Text style={[styles.emptyStateText, { color: colors.textPrimary }]}>
No announcements yet
</Text>
<Text style={[styles.emptyStateSubtext, { color: colors.textSecondary }]}>
Expand Down
6 changes: 4 additions & 2 deletions app/chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,13 +78,15 @@ export default function ChatModal() {
{/* Loading state */}
{isLoading ? (
<View style={styles.centerContent}>
<ActivityIndicator size="large" color={colors.accent} />
<ActivityIndicator size="large" color={colors.primary} />
</View>
) : messages.length === 0 ? (
/* Empty state */
<View style={styles.centerContent}>
<IconSymbol name="message.fill" size={56} color={colors.textSecondary} />
<Text style={[styles.emptyText, { color: colors.text }]}>Ask Claude anything</Text>
<Text style={[styles.emptyText, { color: colors.textPrimary }]}>
Ask Claude anything
</Text>
<Text style={[styles.emptySubtext, { color: colors.textSecondary }]}>
Your conversation will be saved locally
</Text>
Expand Down
Loading
Loading