ezl / todo

0 stars 0 forks source link

Updated color scheme + UI #7

Closed Watson-B closed 2 years ago

Watson-B commented 2 years ago

@yassinya the light and dark designs of the app were using different color schemes as @ezl and I were experimenting the feel of things. We have have decided use coral #fd4b30 as the default interaction color going forward.

FD4B30

As a result, I've updated the UI to go along with these changes. I'll call out any changes here, but the designs can also be found in Figma here.

The goal is to keep to UI minimal with mainly grayscale, using the interaction color only on focused, hovered, or special elements. Here are the updated default Task states with nothing hovered or focused. We'd like the checkbox for the placeholder list item ("Start typing to create a list item...") to be 60% opacity, so that it is visually distinct from the other checkboxes for created list items. dark-scheme light-scheme

Watson-B commented 2 years ago

When clicking typing a list item, updating the styling to make it clear that it is an active input field. focused-text-field-light focused-text-field-dark

Currently the overall settings/menu displays the hover state constantly. It should only display the gray background on hover/focus. menu-hover-dark menu-hover-light

The list items' actions currently change to the interaction color on hover with the exception of the checkbox. Lets update this to apply the same rule to the checkbox on hover. checkbox-hover-dark checkbox-hover-light

And use the interaction color for checking an item completed. (potential idea -->) With the option to clear items on refresh, there is the opportunity to include a visual distinction between current completed items and and previously completed items. (previous = gray checkbox)

checkbox-checked-dark checkbox-checked-light