Refactor UI styles: update color scheme for consistency across components, enhance visual hierarchy, and improve accessibility.

src/components/gameplay/CacheCardItem.js

@@ -83,23 +83,23 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         marginBottom: 8,
     },
-    clue: {fontSize: 13, color: '#6c7086', marginTop: 2},
+    clue: {fontSize: 13, color: '#9ca3af', marginTop: 2},
-    departmentText: {fontSize: 13, color: '#89b4fa', marginTop: 2, fontWeight: '600'},
+    departmentText: {fontSize: 13, color: '#bd93f9', marginTop: 2, fontWeight: '600'},
     nameWrap: {flex: 1, marginRight: 8},
     name: {fontSize: 15, fontWeight: '600', color: '#cdd6f4'},
     claimedText: {color: '#6c7086'},
     status: {fontSize: 13, fontWeight: '600'},
     actions: {flexDirection: 'row', gap: 8},
     editBtn: {
-        backgroundColor: '#89b4fa',
+        backgroundColor: '#bd93f9',
-        borderColor: '#89b4fa',
+        borderColor: '#bd93f9',
         minHeight: 36,
         paddingHorizontal: 14,
         flex: 1,
     },
     deleteBtn: {
-        backgroundColor: '#f38ba8',
+        backgroundColor: '#D92800',
-        borderColor: '#f38ba8',
+        borderColor: '#D92800',
         minHeight: 36,
         paddingHorizontal: 14,
         flex: 1,
@@ -127,7 +127,7 @@ const styles = StyleSheet.create({
     },
     claimedBtnLabel: {color: '#6c7086', fontWeight: '600', fontSize: 13},
     selectedBtnLabel: {color: '#cdd6f4', fontWeight: '600', fontSize: 13},
-    selectedCard: {borderColor: '#89b4fa', borderWidth: 2},
+    selectedCard: {borderColor: '#bd93f9', borderWidth: 2},
     claimedCard: {opacity: 0.5},
     disabledCard: {opacity: 0.45},
     disabledText: {color: '#6c7086'},

src/components/layout/BottomNavbar.js

@@ -103,7 +103,6 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center',
         paddingVertical: 12,
-        borderRadius: 8,
         marginHorizontal: 4,
     },
     tabActive: {
@@ -122,7 +121,7 @@ const styles = StyleSheet.create({
         color: '#cdd6f4',
     },
     tabTextLeave: {
-        color: '#f38ba8',
+        color: '#D92800',
     },
 });
 

src/components/screens/DepartmentSettingsScreen.js

@@ -186,7 +186,7 @@ const styles = StyleSheet.create({
         borderRadius: 8,
     },
     codeLabel: {fontSize: 14, fontWeight: '600', color: '#bac2de'},
-    codeValue: {fontSize: 16, fontWeight: '700', color: '#89b4fa', letterSpacing: 2},
+    codeValue: {fontSize: 16, fontWeight: '700', color: '#bd93f9', letterSpacing: 2},
     toggleRow: {
         flexDirection: 'row',
         justifyContent: 'space-between',
@@ -213,10 +213,10 @@ const styles = StyleSheet.create({
     saveButton: {backgroundColor: '#a6e3a1', borderColor: '#a6e3a1'},
     saveLabel: {color: '#1e1e2e', fontWeight: '600'},
     mapWrap: {marginTop: 16},
-    mapButton: {backgroundColor: '#89b4fa', borderColor: '#89b4fa'},
+    mapButton: {backgroundColor: '#bd93f9', borderColor: '#bd93f9'},
     mapLabel: {color: '#1e1e2e', fontWeight: '600'},
     resetWrap: {marginTop: 30},
-    resetButton: {backgroundColor: '#f38ba8', borderColor: '#f38ba8'},
+    resetButton: {backgroundColor: '#86efac', borderColor: '#86efac'},
     resetLabel: {color: '#1e1e2e', fontWeight: '600'},
 });
 

src/components/screens/GameSettingsScreen.js

@@ -516,7 +516,7 @@ const styles = StyleSheet.create({
         borderRadius: 8,
     },
     codeLabel: {fontSize: 14, fontWeight: '600', color: '#bac2de'},
-    codeValue: {fontSize: 16, fontWeight: '700', color: '#89b4fa', letterSpacing: 2},
+    codeValue: {fontSize: 16, fontWeight: '700', color: '#bd93f9', letterSpacing: 2},
     saveWrap: {marginTop: 24},
     saveButton: {backgroundColor: '#a6e3a1', borderColor: '#a6e3a1'},
     saveLabel: {color: '#1e1e2e', fontWeight: '600'},
@@ -527,9 +527,9 @@ const styles = StyleSheet.create({
     deptCardActions: {flexDirection: 'row', gap: 6, flex: 0},
     deptInfoLabel: {fontSize: 12, fontWeight: '600', color: '#6c7086', marginBottom: 2},
     deptName: {fontSize: 15, fontWeight: '700', color: '#cdd6f4'},
-    deptCode: {fontSize: 13, fontWeight: '600', color: '#89b4fa', marginTop: 2, letterSpacing: 1},
+    deptCode: {fontSize: 13, fontWeight: '600', color: '#bd93f9', marginTop: 2, letterSpacing: 1},
-    deptDeleteButton: {backgroundColor: '#f38ba8', borderColor: '#f38ba8', minHeight: 36, flex: 0, paddingHorizontal: 10},
+    deptDeleteButton: {backgroundColor: '#D92800', borderColor: '#D92800', minHeight: 36, flex: 0, paddingHorizontal: 10},
-    deptOpenButton: {backgroundColor: '#89b4fa', borderColor: '#89b4fa', minHeight: 36, flex: 0, paddingHorizontal: 10},
+    deptOpenButton: {backgroundColor: '#bd93f9', borderColor: '#bd93f9', minHeight: 36, flex: 0, paddingHorizontal: 10},
     deptBtnLabel: {color: '#1e1e2e', fontWeight: '600', fontSize: 13},
     createDeptRow: {flexDirection: 'row', gap: 10, marginTop: 12, alignItems: 'center'},
     createDeptButton: {backgroundColor: '#a6e3a1', borderColor: '#a6e3a1', flex: 0, paddingHorizontal: 16},
@@ -545,11 +545,11 @@ const styles = StyleSheet.create({
     waitlistActions: {flexDirection: 'row', gap: 6},
     approveButton: {backgroundColor: '#a6e3a1', borderColor: '#a6e3a1', minHeight: 36, flex: 0, paddingHorizontal: 10},
     approveBtnLabel: {color: '#1e1e2e', fontWeight: '600', fontSize: 13},
-    rejectButton: {backgroundColor: '#f38ba8', borderColor: '#f38ba8', minHeight: 36, flex: 0, paddingHorizontal: 10},
+    rejectButton: {backgroundColor: '#D92800', borderColor: '#D92800', minHeight: 36, flex: 0, paddingHorizontal: 10},
     rejectBtnLabel: {color: '#1e1e2e', fontWeight: '600', fontSize: 13},
     resetSection: {marginTop: 30},
-    resetButton: {backgroundColor: '#f38ba8', borderColor: '#f38ba8'},
+    resetButton: {backgroundColor: '#D92800', borderColor: '#D92800'},
-    resetLabel: {color: '#1e1e2e', fontWeight: '600'},
+    resetLabel: {color: '#ffffff', fontWeight: '600'},
 });
 
 export default GameSettingsScreen;

src/components/screens/LeaderboardScreen.js

@@ -413,7 +413,7 @@ const styles = StyleSheet.create({
     container: {padding: 0},
     body: {color: '#bac2de', fontSize: 15},
     departmentTitle: {fontSize: 20, fontWeight: '700', color: '#cdd6f4', paddingHorizontal: 15, paddingTop: 15, marginBottom: 6},
-    openLabel: {fontSize: 13, fontWeight: '700', color: '#89b4fa'},
+    openLabel: {fontSize: 13, fontWeight: '700', color: '#bd93f9'},
     tabRow: {
         flexDirection: 'row',
         borderBottomWidth: 1,
@@ -426,10 +426,10 @@ const styles = StyleSheet.create({
     },
     tabButtonActive: {
         borderBottomWidth: 2,
-        borderBottomColor: '#89b4fa',
+        borderBottomColor: '#bd93f9',
     },
     tabLabel: {fontSize: 15, fontWeight: '600', color: '#6c7086'},
-    tabLabelActive: {color: '#89b4fa'},
+    tabLabelActive: {color: '#bd93f9'},
     listSection: {flex: 1, paddingHorizontal: 15, paddingTop: 10},
     rankRow: {
         flexDirection: 'row',
@@ -452,10 +452,10 @@ const styles = StyleSheet.create({
     emptyText: {color: '#6c7086', textAlign: 'center', marginTop: 30, fontSize: 14},
     deleteTeamWrap: {marginTop: 8, paddingLeft: 42, flexDirection: 'row', gap: 8},
     resetTeamButton: {backgroundColor: '#f4a460', borderColor: '#f4a460', minHeight: 36, flex: 1},
-    deleteTeamButton: {backgroundColor: '#f38ba8', borderColor: '#f38ba8', minHeight: 36, flex: 1},
+    deleteTeamButton: {backgroundColor: '#D92800', borderColor: '#D92800', minHeight: 36, flex: 1},
     deleteTeamLabel: {color: '#1e1e2e', fontWeight: '600', fontSize: 13},
     resetMiniButton: {
-        backgroundColor: '#f4a460',
+        backgroundColor: '#86efac',
         borderRadius: 6,
         paddingHorizontal: 10,
         paddingVertical: 4,

src/components/screens/LoginScreen.js

@@ -91,13 +91,13 @@ const styles = StyleSheet.create({
     backgroundColor: '#313244',
   },
   errorText: {
-    color: '#f38ba8',
+    color: '#D92800',
     textAlign: 'center',
     marginTop: 5,
   },
   submitButton: {
-    backgroundColor: '#89b4fa',
+    backgroundColor: '#bd93f9',
-    borderColor: '#89b4fa',
+    borderColor: '#bd93f9',
   },
   submitText: {
     color: '#1e1e2e',
@@ -105,7 +105,7 @@ const styles = StyleSheet.create({
   },
   linkText: {
     textAlign: 'center',
-    color: '#89b4fa',
+    color: '#bd93f9',
     fontWeight: '600',
     paddingVertical: 10,
   },

src/components/screens/MapScreen.js

@@ -751,7 +751,7 @@ const styles = StyleSheet.create({
     center: {justifyContent: 'center', alignItems: 'center'},
     containerMap: {padding: 0},
     mapContainer: {height: 200},
-    error: {color: '#f38ba8', fontSize: 15},
+    error: {color: '#D92800', fontSize: 15},
     loadingText: {color: '#6c7086', fontSize: 14, marginTop: 10},
     inputRow: {flexDirection: 'row', gap: 10, marginBottom: 15, width: '100%', paddingHorizontal: 20},
     fullRow: {width: '100%', paddingHorizontal: 20},
@@ -765,18 +765,17 @@ const styles = StyleSheet.create({
         fontSize: 16,
         color: '#cdd6f4',
         backgroundColor: '#313244',
-    },
+    }, joinButton: {backgroundColor: '#bd93f9', borderColor: '#bd93f9', flex: 0, paddingHorizontal: 20},
-    joinButton: {backgroundColor: '#89b4fa', borderColor: '#89b4fa', flex: 0, paddingHorizontal: 20},
     joinLabel: {color: '#1e1e2e', fontWeight: '600'},
     createButton: {backgroundColor: '#a6e3a1', borderColor: '#a6e3a1'},
     createLabel: {color: '#1e1e2e', fontWeight: '600'},
     bizTitle: {fontSize: 22, fontWeight: '700', color: '#cdd6f4', marginBottom: 6, textAlign: 'center'},
     bizSubtitle: {fontSize: 14, color: '#bac2de', textAlign: 'center', marginBottom: 20, paddingHorizontal: 20},
-    joinError: {color: '#f38ba8', textAlign: 'center', marginTop: 8, marginBottom: 4, fontSize: 14, paddingHorizontal: 20},
+    joinError: {color: '#D92800', textAlign: 'center', marginTop: 8, marginBottom: 4, fontSize: 14, paddingHorizontal: 20},
     backButton: {backgroundColor: '#6c7086', borderColor: '#6c7086'},
     backLabel: {color: '#cdd6f4', fontWeight: '600'},
     warning: {
-        color: '#f38ba8',
+        color: '#D92800',
         fontWeight: 'bold',
         textAlign: 'center',
         paddingVertical: 8,
@@ -802,7 +801,7 @@ const styles = StyleSheet.create({
         borderBottomWidth: 1,
         borderBottomColor: '#45475a',
     },
-    createCacheButton: {backgroundColor: '#89b4fa', borderColor: '#89b4fa', flex: 0},
+    createCacheButton: {backgroundColor: '#bd93f9', borderColor: '#bd93f9', flex: 0},
     createCacheLabel: {color: '#1e1e2e', fontWeight: '600'},
     cacheListWrap: {flex: 1, backgroundColor: '#1e1e2e'},
     cacheListContent: {paddingHorizontal: 12, paddingTop: 10, paddingBottom: 12},

src/components/screens/PlayersScreen.js

@@ -296,7 +296,7 @@ const styles = StyleSheet.create({
         paddingHorizontal: 15,
         paddingTop: 15,
     },
-    openLabel: {fontSize: 13, fontWeight: '700', color: '#89b4fa'},
+    openLabel: {fontSize: 13, fontWeight: '700', color: '#bd93f9'},
     listSection: {flex: 1, paddingHorizontal: 15},
     emptyText: {color: '#6c7086', textAlign: 'center', marginTop: 30, fontSize: 14},
     playerRow: {
@@ -307,18 +307,18 @@ const styles = StyleSheet.create({
     },
     playerName: {fontSize: 15, fontWeight: '600', color: '#cdd6f4', flex: 1},
     playerMeta: {flexDirection: 'row', alignItems: 'center', gap: 6},
-    leaderBadge: {fontSize: 11, color: '#89b4fa', fontWeight: '700'},
+    leaderBadge: {fontSize: 11, color: '#bd93f9', fontWeight: '700'},
     teamCodeBadge: {fontSize: 12, fontWeight: '700', color: '#a6e3a1', letterSpacing: 1},
-    adminBadge: {fontSize: 12, fontWeight: '700', color: '#f38ba8'},
+    adminBadge: {fontSize: 12, fontWeight: '700', color: '#D92800'},
     waitlistBadge: {fontSize: 11, fontWeight: '600', color: '#f4a460'},
     actionRow: {flexDirection: 'row', gap: 8},
-    resetButton: {backgroundColor: '#f4a460', borderColor: '#f4a460', minHeight: 36, flex: 1, paddingHorizontal: 10},
+    resetButton: {backgroundColor: '#86efac', borderColor: '#86efac', minHeight: 36, flex: 1, paddingHorizontal: 10},
-    removeButton: {backgroundColor: '#f38ba8', borderColor: '#f38ba8', minHeight: 36, flex: 1, paddingHorizontal: 10},
+    removeButton: {backgroundColor: '#D92800', borderColor: '#D92800', minHeight: 36, flex: 1, paddingHorizontal: 10},
     actionLabel: {color: '#1e1e2e', fontWeight: '600', fontSize: 13},
     departmentName: {fontSize: 14, color: '#6c7086', fontStyle: 'italic'},
-    waitlistCard: {backgroundColor: 'rgba(243, 139, 168, 0.15)', borderColor: '#f38ba8'},
+    waitlistCard: {backgroundColor: 'rgba(217, 40, 0, 0.15)', borderColor: '#D92800'},
     approveButton: {backgroundColor: '#a6e3a1', borderColor: '#a6e3a1', minHeight: 36, flex: 1, paddingHorizontal: 10},
-    denyButton: {backgroundColor: '#f38ba8', borderColor: '#f38ba8', minHeight: 36, flex: 1, paddingHorizontal: 10},
+    denyButton: {backgroundColor: '#D92800', borderColor: '#D92800', minHeight: 36, flex: 1, paddingHorizontal: 10},
 });
 
 export default PlayersScreen;

src/components/screens/RegisterScreen.js

@@ -145,8 +145,8 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
   },
   typeButtonActive: {
-    backgroundColor: '#89b4fa',
+    backgroundColor: '#bd93f9',
-    borderColor: '#89b4fa',
+    borderColor: '#bd93f9',
   },
   typeText: {
     color: '#bac2de',
@@ -156,13 +156,13 @@ const styles = StyleSheet.create({
     color: '#1e1e2e',
   },
   errorText: {
-    color: '#f38ba8',
+    color: '#D92800',
     textAlign: 'center',
     marginTop: 5,
   },
   submitButton: {
-    backgroundColor: '#89b4fa',
+    backgroundColor: '#bd93f9',
-    borderColor: '#89b4fa',
+    borderColor: '#bd93f9',
   },
   submitText: {
     color: '#1e1e2e',
@@ -170,7 +170,7 @@ const styles = StyleSheet.create({
   },
   linkText: {
     textAlign: 'center',
-    color: '#89b4fa',
+    color: '#bd93f9',
     fontWeight: '600',
     paddingVertical: 10,
   },

src/components/screens/TeamScreen.js

@@ -298,9 +298,9 @@ const styles = StyleSheet.create({
     center: {justifyContent: 'center', alignItems: 'center'},
     container: {padding: 0},
     disabledWrap: {paddingHorizontal: 30, alignItems: 'center', opacity: 0.45},
-    disabledTitle: {fontSize: 20, fontWeight: '700', color: '#6c7086', marginBottom: 10, textAlign: 'center'},
+    disabledTitle: {fontSize: 20, fontWeight: '700', color: '#ffffff', marginBottom: 10, textAlign: 'center'},
-    disabledBody: {fontSize: 15, color: '#6c7086', textAlign: 'center'},
+    disabledBody: {fontSize: 15, color: '#ffffff', textAlign: 'center'},
-    notInGameText: {color: '#6c7086', fontSize: 15, fontWeight: '600', marginBottom: 16, textAlign: 'center', paddingHorizontal: 20},
+    notInGameText: {color: '#ffffff', fontSize: 15, fontWeight: '600', marginBottom: 16, textAlign: 'center', paddingHorizontal: 20},
     inputDisabled: {backgroundColor: '#313244', opacity: 0.5},
     inputRow: {flexDirection: 'row', gap: 10, marginBottom: 15, width: '100%', paddingHorizontal: 20},
     fullRow: {width: '100%', paddingHorizontal: 20},
@@ -312,17 +312,17 @@ const styles = StyleSheet.create({
         paddingHorizontal: 12,
         paddingVertical: 10,
         fontSize: 16,
-        color: '#cdd6f4',
+        color: '#ffffff',
         backgroundColor: '#313244',
     },
-    joinButton: {backgroundColor: '#89b4fa', borderColor: '#89b4fa', flex: 0, paddingHorizontal: 20},
+    joinButton: {backgroundColor: '#bd93f9', borderColor: '#bd93f9', flex: 0, paddingHorizontal: 20},
     joinLabel: {color: '#1e1e2e', fontWeight: '600'},
     createButton: {backgroundColor: '#a6e3a1', borderColor: '#a6e3a1'},
     createLabel: {color: '#1e1e2e', fontWeight: '600'},
     waitlistText: {
         fontSize: 18,
         fontWeight: '700',
-        color: '#cdd6f4',
+        color: '#ffffff',
         textAlign: 'center',
         paddingHorizontal: 30,
     },
@@ -334,10 +334,10 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         gap: 8,
     },
-    teamCodeLabel: {color: '#bac2de', fontSize: 15, fontWeight: '600'},
+    teamCodeLabel: {color: '#ffffff', fontSize: 15, fontWeight: '600'},
-    teamCodeValue: {color: '#cdd6f4', fontSize: 17, fontWeight: '700', letterSpacing: 2},
+    teamCodeValue: {color: '#ffffff', fontSize: 17, fontWeight: '700', letterSpacing: 2},
     teamNameSection: {paddingHorizontal: 15, paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: '#45475a'},
-    teamNameText: {fontSize: 18, fontWeight: '700', color: '#cdd6f4', flex: 1},
+    teamNameText: {fontSize: 18, fontWeight: '700', color: '#ffffff', flex: 1},
     renameRow: {flexDirection: 'row', alignItems: 'center', gap: 8},
     renameInput: {
         flex: 1,
@@ -347,10 +347,10 @@ const styles = StyleSheet.create({
         paddingHorizontal: 12,
         paddingVertical: 8,
         fontSize: 16,
-        color: '#cdd6f4',
+        color: '#ffffff',
         backgroundColor: '#313244',
     },
-    renameButton: {backgroundColor: '#89b4fa', borderColor: '#89b4fa', flex: 0, minHeight: 36, paddingHorizontal: 14},
+    renameButton: {backgroundColor: '#bd93f9', borderColor: '#bd93f9', flex: 0, minHeight: 36, paddingHorizontal: 14},
     renameLabel: {color: '#1e1e2e', fontWeight: '600', fontSize: 13},
     renameSaveButton: {backgroundColor: '#a6e3a1', borderColor: '#a6e3a1', flex: 0, minHeight: 36, paddingHorizontal: 12},
     renameSaveLabel: {color: '#1e1e2e', fontWeight: '600', fontSize: 13},
@@ -363,24 +363,15 @@ const styles = StyleSheet.create({
         alignItems: 'center',
     },
     memberInfo: {flex: 1, flexDirection: 'row', alignItems: 'center', gap: 6},
-    memberName: {fontSize: 16, color: '#cdd6f4', fontWeight: '600'},
+    memberName: {fontSize: 16, color: '#ffffff', fontWeight: '600'},
-    leaderBadge: {fontSize: 12, color: '#89b4fa', fontWeight: '700'},
+    leaderBadge: {fontSize: 12, color: '#bd93f9', fontWeight: '700'},
-    kickButton: {backgroundColor: '#f38ba8', borderColor: '#f38ba8', minHeight: 36, flex: 0, paddingHorizontal: 14},
+    kickButton: {backgroundColor: '#D92800', borderColor: '#D92800', minHeight: 36, flex: 0, paddingHorizontal: 14},
     kickLabel: {color: '#1e1e2e', fontWeight: '600', fontSize: 13},
-    emptyText: {color: '#6c7086', textAlign: 'center', marginTop: 30, fontSize: 14},
+    emptyText: {color: '#ffffff', textAlign: 'center', marginTop: 30, fontSize: 14},
     leaveWrap: {paddingHorizontal: 0, paddingTop: 10, paddingBottom: 16},
-    leaveButton: {backgroundColor: '#f38ba8', borderColor: '#f38ba8'},
+    leaveButton: {backgroundColor: '#D92800', borderColor: '#D92800'},
     leaveLabel: {color: '#1e1e2e', fontWeight: '600'},
     selfCard: {backgroundColor: 'rgba(166, 227, 161, 0.15)', borderColor: '#a6e3a1'},
 });
-    kickButton: {backgroundColor: '#dc2626', borderColor: '#dc2626', minHeight: 36, flex: 0, paddingHorizontal: 14},
-    kickLabel: {color: '#ffffff', fontWeight: '600', fontSize: 13},
-    emptyText: {color: '#9ca3af', textAlign: 'center', marginTop: 30, fontSize: 14},
-    leaveWrap: {paddingHorizontal: 0, paddingTop: 10, paddingBottom: 16},
-    leaveButton: {backgroundColor: '#dc2626', borderColor: '#dc2626'},
-    leaveLabel: {color: '#ffffff', fontWeight: '600'},
-    // Current user self-highlight (light green card)
-    selfCard: {backgroundColor: '#dcfce7', borderColor: '#86efac'},
-});
 
 export default TeamScreen;