Find and replace UI&UX MVP2

[oleq]

Provide a description of the task

Let's keep all UI/UX-related issues in this epic.

[Reinmar]

List of resolved issues:

• \Cut down the search time by X by not using model.change() to mark each result - Cut down the search time by X by not using model.change() to mark each result #10302
• The find and replace does not support ctrl/cmd+g to go to next match (and reversed with shift) - The find and replace does not support ctrl/cmd+g to go to next match (and reversed with shift) #10012 
• The find and replace view looks un-styled when there is not enough space (responsive design) - The find and replace view looks un-styled when there is not enough space (responsive design) #10019
• The find and replace unexpected behavior on toggling "match case" - The find and replace unexpected behavior on toggling "match case" #10021
• Visually refine find and replace panel - Visually refine find and replace panel #10229
• Changing the search text should reset the results - Changing the search text should reset the results #10304
• "Whole words only" checkbox does not work correctly when searching for query with 'space' - "Whole words only" checkbox does not work correctly when searching for query with 'space' #10131
• The contrast between selected and unselected find and replace result is too low - The contrast between selected and unselected find and replace result is too low #10242
• Find & replace: Match case and whole words do not work after recent merges - Find & replace: Match case and whole words do not work after recent merges #10188
• The find and replace behaves in an unexpected way while pressing enter in the replace with input field - the find and replace behaves in an unexpected way while pressing enter in the replace with input field #10020