Update dashboard screenshots (#1791)

Co-authored-by: Flaviu Tamas <me@flaviutamas.com>

guides/contributing.rst

@@ -123,13 +123,13 @@ documents establish the following character order for better consistency.
 
   .. code-block:: rst
 
-      .. figure:: images/dashboard.png
+      .. figure:: images/dashboard_states.png
           :align: center
           :width: 40.0%
 
           Optional figure caption.
 
-  .. figure:: images/dashboard.png
+  .. figure:: images/dashboard_states.png
       :align: center
       :width: 40.0%
 
@@ -607,20 +607,20 @@ Standard for the esphome-core codebase:
 
         # Run lint only over changed files
         docker run --rm -v "${PWD}/":/esphome -it esphome/esphome-lint script/quicklint
-    
-    
+
+
     If you are using Windows and have docker installed the syntax is slightly different.
     If you have cloned esphome to ``c:\edev\esphome`` the volume format is ``c/edev/esphome``
-    
+
     .. code-block:: bash
 
         # convert the volume format
         $current_dir=(Get-Location).Path.ToLower().Replace(':','').Replace('\','/')
         # Run lint only over changed files from powershell
         docker run --rm -v "$($current_dir):/esphome" -it esphome/esphome-lint script/quicklint
-    
-    
-         
+
+
+
 
 ESPHome via Gitpod
 ******************

guides/getting_started_command_line.rst

@@ -189,7 +189,7 @@ To start the ESPHome dashboard, simply start ESPHome with the following command
 
 After that, you will be able to access the dashboard through ``localhost:6052``.
 
-.. figure:: images/dashboard.png
+.. figure:: images/dashboard_states.png
 
 See Also
 --------

guides/getting_started_hassio.rst

@@ -5,12 +5,10 @@ Getting Started with ESPHome and Home Assistant
     :description: Getting Started guide for installing ESPHome Dashboard as a Home Assistant add-on and creating a basic configuration.
     :image: home-assistant.svg
 
-ESPHome is the perfect solution for creating custom firmware for
-your ESP8266/ESP32 boards. In this guide we’ll go through how to setup a
-basic "node" using the ESPHome Dashboard, installed as a Home Assistant add-on.
+In this guide we’ll go through how to install ESPHome on a device using the ESPHome Dashboard, installed as a Home Assistant add-on.
 
 But first, here's a very quick introduction to how ESPHome works:
-ESPHome is a *tool* which aims to make managing your ESP boards as simple as possible. It reads in a YAML configuration file (just like Home Assistant) and creates custom firmware which it installs on your ESP device. Devices or sensors added in ESPHome's configuration will automatically show up in Home Assistant's UI.
+ESPHome is a *tool* which aims to make managing your ESP boards as simple as possible. It reads in a YAML configuration file and creates custom firmware which it installs on your ESP device. Devices or sensors added in ESPHome's configuration will automatically show up in Home Assistant's UI.
 
 Installing ESPHome Dashboard
 ----------------------------
@@ -30,30 +28,12 @@ After that, wait a bit until it is installed (this can take a while). Click "Sta
 You should now be greeted by a nice introduction wizard which will step you through
 creating your first configuration.
 
-.. figure:: images/hassio_start.png
+.. figure:: images/dashboard_empty.png
     :align: center
     :width: 95.0%
 
 The wizard will guide you through creating your first configuration and, depending on your browser, install it on your ESP device. You will need to name your configuration and enter your wireless network settings so that the ESP device can come online and can communicate with Home Assistant.
 
-.. raw:: html
-
-    <a name='webserial'></a>
-
-.. note::
-
-    The most difficult part of setting up a new ESPHome device is the initial installation. Installation requires that your ESP device is connected with a cable to a computer. Later updates can be installed wirelessly.
-
-    If you use `Microsoft Edge <https://www.microsoft.com/edge>`_ or `Google Chrome <https://www.google.com/chrome>`_, you will be able to install the initial configuration by connecting your ESP device to the computer that you're using to view the ESPHome Dashboard.
-    *You need to access the ESPHome Dashboard over HTTPS for this to work. This is a requirement of browsers to access your ESP device to ensure that we write the correct data.*
-
-    If you use another browser, you will have to connect the ESP devices to the machine running the ESPHome Dashboard and Home Assistant.
-
-    If the serial port is not showing up, you might not have the required drivers installed. These drivers work for most ESP devices:
-
-      * CP2102 (square chip): `driver <https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers>`__
-      * CH341: `driver <https://github.com/nodemcu/nodemcu-devkit/tree/master/Drivers>`__
-
 
 Dashboard Interface
 -------------------
@@ -61,24 +41,30 @@ Dashboard Interface
 Assuming you created your first configuration file with the wizard, let's take a quick
 tour of the ESPHome Dashboard interface.
 
-.. figure:: images/dashboard.png
+.. figure:: images/dashboard_states.png
     :align: center
     :width: 95.0%
 
 On the front page you will see all configurations for nodes you created. For each file,
-there are three basic actions you can perform:
+there are a few basic actions you can perform:
 
-- **INSTALL**: This compiles the firmware for your node and installs it. Installation happens wirelessy if you have enabled the :doc:`/components/ota` in your configuration. Alternatively you can install it from your browser or via a device connected to the machine running the ESPHome Dashboard.
+- **UPDATE**: This button will show up if the device has not been installed with the same ESPHome version currently running.
 
-- **SHOW LOGS**: With this command you can view all the logs the node is outputting. If a USB device is
-  connected, it will attempt to use the serial connection. Otherwise it will use the built-in OTA logs.
+- **EDIT**: This will open the configuration editor.
 
-- **COMPILE**: This command compiles the firmware and gives you the option of downloading the generated
-  binary so that you can install it yourself from your computer using :ref:`ESPHome-flasher <esphome-flasher>`.
+- **LOGS**: With this command you can view all the logs the node is outputting. If a USB device is
+  connected, you can choose to use the serial connection. Otherwise it will use the built-in OTA logs.
+
+- **Overflow menu**: This is a dropdown menu which allows you to perform more actions.
+
+  - **Validate**: This will validate the configuration file.
+  - **Install**: Opens the Install dialog.
+  - **Clean Build Files**: This will delete all of the generated build files and is a safe operation to perform. Sometimes old files are not removed and can cause compile issues later on.
+  - **Delete**: This will delete the configuration file.
 
 The configuration files for ESPHome can be found and edited under ``<HOME_ASSISTANT_CONFIG>/esphome/``.
-For example the configuration for the node in the picture above can be found
-in ``/config/esphome/livingroom.yaml``.
+For example the configuration for the ``garage-door`` node in the picture above can be found
+in ``/config/esphome/garage-door.yaml``.
 
 Now go ahead and use one of the :ref:`devices guides <devices>` to extend your configuration.