At the moment the progress button which has slightly rounded corners
allows the "__bar" to overflow. This causes the corners to become
angular again which looks weird. I set the button's "overflow" to
"hidden" to fix this issue.
Changelog-Entry: Make sure the progress button is always rounded.
Change-Type: patch
We match the main page design to its updated style.
* Remove help icon text.
* 'Change' image/drive buttons are now violet blue.
* Remove step number icons and accompanying descriptions.
* Flash progress button now turns into a striking orange, from blue.
Changelog-Entry: Update main page design to its new style.
This is a big PR that extracts out a sensible set of SCSS color
variables that can be used to customise Etcher's look.
To achieve such goal, the following changes were introduced:
- Create a separate `lib/gui/scss/modules/_theme.scss` to conveniently
hold all SCSS color variables.
- Decouple button styles from Bootstrap's `.btn`.
- Stop configuring Bootstrap colors as a whole using the SCSS variables
it exposes and instead declare them directly in the modules that make
use of them.
- Normalize all modal layouts into one. We had like 3 different modal
layouts, each with their own title/body colors, etc. To simplify the
color palette, we make use of a single modal layout everywhere.
- Remove `.progress-button--primary`. `.progress-button` is now
"primary" by default.
- Be precise about `tick` foreground colors.
- Rename `.label-default` to `.label-inset`.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>
The progress button exhibits spiky diagonals when used it with the
"striped" modifier. This can be seen better when drastically reducing the animation
speed.
Turns out its a Webkit rendering bug. I've stumbled into dozens of
"workarounds" on the internet (mainly Stack Overflow), however none of
them fixed the issue.
After some crazy amount of experimentation, the issue is gone if we add
1% to certain stop positions. Weird stuff.
Fixes: https://github.com/resin-io/etcher/issues/472
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
Currently we disable pointer events on the "Flash" button once a flash
is in progress to prevent the user from clicking it, but we didn't
consider that if the user kept focus on the button, he can press the
"space" bar for the same effect.
Fixes: https://github.com/resin-io/etcher/issues/431
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
This refactoring will be useful on future changes, where there will be
a single application entry point that will execute the CLI or the GUI
version depending on the environment.
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>
