Added UI components page

docs/source/ui_components.rst

@@ -0,0 +1,32 @@
+UI Components
+=============
+When opening bug reports or sending emails to the Jupyter mailing list, it is
+useful to know the names of different UI component so that other developers
+and users have an easier time helping you diagnose your problems. This section
+of the documentation is designed to familiarize you with the different names
+of UI elements and the different states that UI elements can be in.
+
+When you launch ``jupyter notebook`` the first page that you encounter is the
+Notebook Dashboard.
+
+.. image:: /_static/images/jupyter-notebook-dashboard.png
+
+Once you've selected a Notebook to edit, the Notebook will open in the Notebook
+Editor.
+
+.. image:: /_static/images/jupyter-notebook-default.png
+
+If you would like to learn more about the specific elements within the Notebook
+Editor, you can go through the User Interface Tour by selecting Help in the
+menubar then selecting User Interface Tour.
+
+When a cell is in edit mode, the Cell Mode Indicator will change to reflect
+the cell's state.
+
+.. image:: /_static/images/jupyter-notebook-edit.png
+
+Now let's say that you've chosen to open a Markdown file instead of a Notebook
+file whilst in the Notebook Dasboard. If so, the file will be opened in the
+File Editor.
+
+.. image:: /_static/images/jupyter-file-editor.png