Night mode modal styling

Issue Description

Both the “Bug” and “Challenge Success” modals still have mostly “day mode” styling when in night mode.

I’ve already attempted messing around with this a bit, but it’s not so straightforward, since the two modals are set up differently. Here’s what happens by adding a new color to .night .modal-body:

Success Modal, ok, not perfect with the white lines, but not terrible

Now same styling on the Bug modal:

After inspecting, it would appear that in both day mode and night mode, the .modal-bodal body is always extending over .modal-header, its just that in day mode, .modal-body has no fill. If you attempt to accommodate this by adding a top-margin to the modal content, it looks ok for the bug modal, but leaves giant white spaces in the success modal. And I couldn’t figure out how to style those spaces without affecting other things.

Since you guys were on the dropdown thread, do any of you have any ideas @raisedadead, @hallaathrad, @systimotic?

[no-stack-dub-sack]

@systimotic Ok, cool - the specificity is what I was missing. Thanks! I’ll fix both issues and make a PR a bit later

[systimotic]

@no-stack-dub-sack Yeah, that should work, as long as you put the .modal-content in there. Keep in mind that the original colour is set later in the file than the night colour, so with equal specificity the default colour will stay visible. I believe putting .model-dialog .modal-content inside of .night should do the trick for more specificity.

As @hallaathrad mentioned, the lines are caused by a border, which is set by Bootstrap. The top border is on .modal-header, the bottom border is on .modal-footer.