ls1intum / Apollon

UML Modeling Editor written in React
https://apollon-library.readthedocs.io
MIT License
65 stars 22 forks source link

UI Changes to Control Panel #298

Closed AlexanderG2207 closed 11 months ago

AlexanderG2207 commented 1 year ago

Checklist

Motivation and Context

  1. When scrolling between the elements of the switches in the control panel, there is no border on the left side of the middle elements.
  2. 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

  1. 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.
  2. 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

  1. Run Apollon locally.
  2. Open Apollon in Chrome.
  3. Check if the borders transition well on the switches when moving between them.
  4. Check if the button is selected when changing between light and dark mode.

Screenshots

Before:

Before

After:

After

loreanvictor commented 11 months ago

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.