[x] I documented the TypeScript code using JSDoc style.
[x] I added multiple screenshots/screencasts of my UI changes
[x] I translated all the newly inserted strings into German and English
Motivation and Context
When scrolling between the elements of the switches in the control panel, there is no border on the left side of the middle elements.
When switching between Light and Dark Mode there is the obvious indicator of the change, which is the editor changing its color. However, there is no indication on the Light/Dark switch buttons itself.
Description
By removing the "border-left" property from the switch styles, the left border of the element is normal and the change between switch elements looks cleaner.
By clicking one of the Light/Dark switches, the setThemings() function is called, which takes a string of the button that was clicked. The function then adds the "selected" style property to the selected button and removes the "selected" style property from the unselected one.
Steps for Testing
Run Apollon locally.
Open Apollon in Chrome.
Check if the borders transition well on the switches when moving between them.
Check if the button is selected when changing between light and dark mode.
down the line, perhaps the control panel should be switched from static HTML / JS to a proper React component, but I feel that falls beyond the scope of this PR.
Checklist
Motivation and Context
Description
setThemings()
function is called, which takes a string of the button that was clicked. The function then adds the "selected" style property to the selected button and removes the "selected" style property from the unselected one.Steps for Testing
Screenshots
Before:
After: