Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style: 💄 restyle dashboard to match HA design #514

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

flixlix
Copy link

@flixlix flixlix commented Jul 26, 2023

Restyle of Esphome main Page 💄

  • Restyled the overall design
  • loosened up on some drop-shadows
  • corrected some spacings on the header/ footer
  • created new design for the device card

The changes were mainly applied to the main dashboard. Any subsequent pages have not been affected

Here are a few Screenshots to check the new Design:

New Front Page

Front Page

New Device Card matching HA Design:

Front Page Device Zoom

Offline Status with the new Design (all other statuses available):

Offline Status

New Buttons in the Header, icons and tooltips instead of icons and text:

Header Buttons

New Footer Credits:

Footer Credits

New FAB for adding devices (Primary Color instead of Green):

New FAB

New Empty State Page (no devices) with icon in grey:

Empty State - No Devices

New Empty State Page (Search no results):

Empty State - No Search Results

New Loading state with animation, instead of just empty page:

Loading State

Restyled the overall design, loosened up on some drop-shadows, corrected some spacings on the header/ footer and created new design for the device card

The changes were mainly applied to the main dashboard. Any subsequent pages have not been affected
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant