All the information in the other answer about colors, contrast, etc. is valid from a general design perspective. But words matter a lot. In particular, users may get very confused about "this dialog". The original "Edit content" box is a dialog. But so is the popup "You have unsaved changes" box. The popup needs to be clear what ...
Actually, the content of the question should be understandable just by looking at the two images and without any explanation. But, personally, it took me a while to understand the images were related and then I understood their content. Why?
In the first instance there is too much visual information in just two windows:
Highly saturated colors
Too many ...
The dialog isn't using proper wording. When the dialog has text saying "close this dialog" in it, it's referring to the dialog, not the Edit Content screen. The buttons say "don't close" and "close" which sound like window controls. The dialog asks about closing while the Edit Content window says cancel. The buttons on the ...
Another option here is to modify the original cancel button in some way (I’ve had success in the past with turning it red, and replacing the text with “Are you sure?”), and requiring a second click for confirmation. You’d probably also want a timeout so a double click doesn’t accidentally trigger the confirmation.
Try to minimize unexpected popups
Since a Popup will stop the user in their tracks and breaks their train of thought, you can try to minimize these dialogs. Alternatively you could immediately close the editor, but diplay a small notification:
Your changes will be discarded.
So the user has a way to get back to the editor if he closed the ...
Try to work with a single window. Have the buttons say:
Save edited content
Discard changed content
Or something like that. Much less thought required.
You could add additional hover info on the button if someone can't figure it out, stating "You will discard all changed made on the content" and "You will save the changes to the content"...