Mobile: Fixes #13437: Fix conflicts notebook has low contrast when selected

Author: personalizedrefrigerator

packages/app-mobile/components/side-menu-content.tsx

@@ -117,10 +117,6 @@ const useStyles = (themeId: number) => {
 			sidebarIcon: sidebarIconStyle,
 			folderButton: folderButtonStyle,
 			folderButtonText: folderButtonTextStyle,
-			conflictFolderButtonText: {
-				...folderButtonTextStyle,
-				color: theme.colorError,
-			},
 			folderButtonSelected: {
 				...folderButtonStyle,
 				backgroundColor: theme.selectedColor,
@@ -197,6 +193,12 @@ const FolderItem: React.FC<FolderItemProps> = props => {
 				paddingRight: 10,
 				backgroundColor: props.selected ? theme.selectedColor : undefined,
 			},
+			conflictFolderButtonText: {
+				color: theme.colorError,
+			},
+			conflictFolderButtonSelectedText: {
+				color: theme.colorErrorSelected,
+			},
 		});
 	}, [props.selected, props.depth, props.themeId]);
 	const baseStyles = props.styles;
@@ -268,7 +270,18 @@ const FolderItem: React.FC<FolderItemProps> = props => {
 	// depth is specified with an accessibilityLabel:
 	const folderDepthDescription = props.depth > 0 ? _('(level %d)', props.depth) : '';
 	const accessibilityLabel = `${folderTitle}  ${folderDepthDescription}`.trim();
-	const folderButtonTextStyle = props.folder.id === Folder.conflictFolderId() ? baseStyles.conflictFolderButtonText : baseStyles.folderButtonText;
+	const isConflictFolder = props.folder.id === Folder.conflictFolderId();
+	const textStyle = useMemo(() => {
+		const result: TextStyle[] = [baseStyles.folderButtonText];
+		if (isConflictFolder) {
+			result.push(styles.conflictFolderButtonText);
+			if (props.selected) {
+				result.push(styles.conflictFolderButtonSelectedText);
+			}
+		}
+		return result;
+	}, [styles, props.selected, isConflictFolder, baseStyles.folderButtonText]);
+
 	return (
 		<View key={props.folder.id} style={styles.buttonWrapper}>
 			<TouchableRipple
@@ -284,7 +297,7 @@ const FolderItem: React.FC<FolderItemProps> = props => {
 					{renderFolderIcon(props.folder.id, folderIcon)}
 					<Text
 						numberOfLines={1}
-						style={folderButtonTextStyle}
+						style={textStyle}
 						accessibilityLabel={accessibilityLabel}
 					>
 						{folderTitle}

packages/lib/services/style/themeToCss.test.ts

@@ -11,6 +11,7 @@ const input: Theme = {
 	oddBackgroundColor: '#eeeeee',
 	color: '#32373F', // For regular text
 	colorError: 'red',
+	colorErrorSelected: '#d00000',
 	colorCorrect: 'green',
 	colorWarn: 'rgb(228,86,0)',
 	colorWarnUrl: '#155BDA',

packages/lib/themes/dark.ts

@@ -21,6 +21,7 @@ const theme: Theme = {
 	dividerColor: '#555555',
 	selectedColor: '#616161',
 	urlColor: 'rgb(166,166,255)',
+	colorErrorSelected: '#FFD7D7',
 
 	// Color scheme "2" is used for the sidebar. It's white text over
 	// dark blue background.

packages/lib/themes/light.ts

@@ -18,6 +18,7 @@ const theme: Theme = {
 	dividerColor: '#dddddd',
 	selectedColor: '#e5e5e5',
 	urlColor: '#155BDA',
+	colorErrorSelected: '#d00000',
 
 	// Color scheme "2" is used for the sidebar. It's white text over
 	// dark blue background.

packages/lib/themes/type.ts

@@ -13,6 +13,7 @@ export interface Theme {
 	oddBackgroundColor: string;
 	color: string; // For regular text
 	colorError: string;
+	colorErrorSelected: string; // On a selectedColor background
 	colorCorrect: string;
 	colorWarn: string;
 	colorWarnUrl: string; // For URL displayed over a warningBackgroundColor