Navbar Edits/Dark Mode Toggle

[alairon]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe): Layout changes

What is the current behavior?

• The dark mode toggle was tucked away in a settings modal.
• The merchant server/time config panel was not vertically aligned in relation to its adjacent components

What is the new behavior?

• The toggle now also appears on the navbar, as suggested in the previous PR: Dark Mode Toggle #12 (comment)
  • The code responsible for toggling between light/dark mode has been uploaded to the navbar
• Modified the language selection dropdown appearance
• Modified the merchant config section to be more vertically centered

Does this introduce a breaking change?

• Yes
• No

Other information

Notes

The dark mode toggle that was in the modals is unmodified

Tested on:

• Microsoft Edge (Chromium) Version 101.0.1210.53 (Official build) (64-bit)
• Mozilla Firefox Version 101.0 (64-bit)

Screenshots

Current Live Navbar

Navbar in this PR (including the merchant spacing fixes)

Hover Behavior

Language Selection

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
lostarktimer	✅ Ready (Inspect)	Visit Preview	Jun 6, 2022 at 6:45AM (UTC)