Modal Refinements Update

[RaymondDashWu]

Updated version of this PR. Previous PR was not merged and now touches parts of the codebase I didn't write.

Changelog

• Preview button changed from button to icon below map preview
• Aspect ratio added to constants.js
• Text from "Resolution" simplified by dropping aspect ratios. Ex: "Good 16:9 (720p)" to "Good (720p)"
• "Resolution" dropdown changed to "Quality"
• Aspect Ratio moved to Export Settings
• Aspect ratio option added. Only resolutions of selected aspect ratio will appear. In addition, map preview will change based on aspect ratio selected
• Refactored many styled div to styled components and put into styled-components.js
• Added styling changes to modal to look more consistent with Kepler's current modals
• Fixed bug where rendering feedback overlapped with spinner.
• Tabs renamed from Edit/Export to Animation/Settings. Filenames changed as well as references

[coveralls]

Pull Request Test Coverage Report for Build 1102875575

Warning: This coverage report may be inaccurate.

This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.

• For more information on this, see Tracking coverage changes with pull request builds.
• To avoid this issue with future PRs, see these Recommended CI Configurations.
• For a quick fix, rebase this PR at GitHub. Your next report should be accurate.

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 19.033%

---

Totals
Change from base Build 1102115473:	0.0%
Covered Lines:	161
Relevant Lines:	680

---

💛 - Coveralls

[macrigiuseppe]

@chrisgervang Few comments:

• if the default tab is settings, why isn't the first tab?
• The style for the active tab seems off. Check this out

I think the bottom border should go underneath the current active tab

[RaymondDashWu]

@chrisgervang Few comments:

• if the default tab is settings, why isn't the first tab?
• The style for the active tab seems off. Check this out

I think the bottom border should go underneath the current active tab

Sorry for the confusion. That note was from the previous PR that didn't get merged in. I removed it but the reason Export isn't the default anymore was that we decided that we wanted the flow to be to allow users to select the type of animation before picking settings like resolution and aspect ratio. The currently active tab in that screenshot is Animation. I think that addresses your concern but let me know if you have more questions.

[RaymondDashWu]

Added some new bugs that I previously didn't catch. Will work on fixing them over the weekend.