Update features section in documentation

Author: jahn96

Design/Code Snippet Extension Panel.png

@@ -1,41 +1,73 @@
 Features
 ========
 
+Code Snippet Explorer
+---------------------
+
+On the left side bar of the JupyterLab, you can click the snippet icon (</>) to open/close the code snippet explorer that contains all the saved snippets as below.
+You can scroll/resize code snippet explorer, order the snippets with drag and drop, and manage and search the snippets efficiently.
+.. image:: ../../Design/Code Snippet Extension Panel.png
+    :align: center
+
 Creation of a New Snippet
 -------------------------
 
+There are several ways to create a new snippet. 
+1. Highlight lines of code and right click (or use keyboard shortcut (cmd-shift-A or ctrl-shift-A)) to save the code as a snippet. Or, you can select cell(s) and right click (or use keyboard shortcut (cmd-shift-A or ctrl-shift-A)) to save content as a snippet. Then, you will see the "Save As Code Snippet" option in JupyterLab context menu as below:
 .. image:: ../../Design/right_click.png
+    :align: center
+Then, clicking the option will open the dialog as below where you can input name, description, language, tags, and codes of a snippet.
 .. image:: ../../Design/code_snippet_input_dialog.png
-
--  Right click (or use keyboard shortcut (cmd-shift-A or ctrl-shift-A)) and save highlighted lines of code
--  Drag cell into panel to save
--  Select cell(s) and right click to save content as snippet
--  Select cell(s) and use keyboard shortcut (cmd-shift-A or ctrl-shift-A) to save content as snippet
-
+    :align:center
+2. More easily, just drag notebook cell(s) to the code snippet explorer on the left to create a new snippet. It will also open the dialog as above for your inputs.
 .. image:: ../../Design/create_from_scratch.png
--  Plus button to create a new snippet from scratch
+    :align:center
+
+3. Hit the plus button next to the search bar (refer to `Search of Code Snippets`_) to create a new snippet if you want to create a snippet not from the notebook cell.
 
 Use of Code Snippets
 --------------------
 
-.. image:: ../../Design/code_snippet_menu.png
--  Copy, Insert, Edit, Download, Delete snippet
--  Drag snippet into any JupyterLab workspace
+Click the three dots or right click anywhere on the snippet you want to use. It will open code snippet menu as below to insert, copy, edit, download, or delete the snippet.
+.. image:: ../../Design/Code Snippet Menu.png
+    :align:center
+
+Insert
+^^^^^^
+Click the insert option to insert. It will warn you if the language is different from the kernel langauge. 
+Additionally, on hover with six dots on the left (refer to `Search of Code Snippets`_), drag snippet into any JupyterLab workspace to insert the snippet!
+
+Copy
+^^^^
+Click the copy option to copy. It will create a message on the bottom right corner as below.
+.. image:: ../../Design/copy_snippet.png
+    :align:center
+
+Edit
+^^^^
+Edit the saved snippets by clicking the edit option. It will open a code snippet editor as below.
+.. image:: ../../Design/code_snippet_edit.png
+    :align:center
+
+Download
+^^^^^^^^
+Download snippets and share them with others by clicking the download option. It will open a box as below to input **relative path** to download the snippets.
+.. image:: ../../Design/download_snippets_box.png
+    :align:center
+
+Delete
+^^^^^^
+Delete snippets by clicking delete option. It will open a warning box as below.
+.. image:: ../../Design/delete snippet.png
+    :align:center
 
 Search of Code Snippets
 -----------------------
 
+With the filter box as below, **search** snippets with name, language, and code with search bar or **filter** them with language/filter tags!  
 .. image:: ../../Design/code_snippet_filter_box.png
--  Scrollable/resizable snippet explorer panel displaying snippets
--  Move snippet within snippet explorer
--  Search bar for snippets
--  Filter tags for snippets
+    :align:center
 
+Furthermore, hover over snippets to see the preview of each snippet.
 .. image:: ../../Design/code_snippet_preview.png
--  Snippet preview (on the side)
-
-Edit of Existing Code Snippets
-------------------------------
-
-.. image:: ../../Design/code_snippet_edit.png
--  Code Snippet Editor
+    :align:center

Design/Code Snippet Menu.png

@@ -95,8 +95,7 @@ This script will concatenate and print out all of the json objects in a /snippet
 in a project. After running the script, copy the output and paste into the User Preferences
 panel in settings, similar to the single snippet upload.
 
-NOTE: If adding objects to existing list of snippets in user preferences, change counter variable
- to n+1 where n is the ID of the last snippet stored in user preferences.
+**NOTE: If adding objects to existing list of snippets in user preferences, change counter variable to n+1 where n is the ID of the last snippet stored in user preferences.**
 
 This script will print something like : 
 
@@ -138,17 +137,17 @@ After generating this dictionary, one can simply delete the current contents of
 This will delete the current snippets at the endpoint (will be default snippets if extension freshly updated)
 and replace them with the old snippets.
 
-NOTE: If adding objects onto an existing list of objects, make sure the ID numbers are all in sequential,
-ascending order.
+**NOTE: If adding objects onto an existing list of objects, make sure the ID numbers are all in sequential,
+ascending order.**
 
 Search and Tag Update
 ---------------------
 
 .. image:: ../../Design/smallUnselectedTags.png
    :align: center
 
-NOTE: Snippet tags function on an OR basis, as in when the "data analytics" tag and the "import statements" tag are selected together, 
-the panel displays any tags that are tagged as import statements OR tagged as "data analytics."
+**NOTE: Snippet tags function on an OR basis, as in when the "data analytics" tag and the "import statements" tag are selected together, 
+the panel displays any tags that are tagged as import statements OR tagged as "data analytics."**
 ex) Snippet tags selected together:
 
 .. image:: ../../Design/smallSnippetTagsSelected.png
@@ -159,17 +158,17 @@ ex) Language tags selected together:
 .. image:: ../../Design/smallLanguageTagsSelected.png
    :align: center
 
-NOTE 2: Language tags and snippets tags have an AND relationship. As in when the "Python" tag and the "data analytics" tags are selected together, 
-only snippets that are both in the language Python AND tagged as data analytics will appear.
+**NOTE 2: Language tags and snippets tags have an AND relationship. As in when the "Python" tag and the "data analytics" tags are selected together, 
+only snippets that are both in the language Python AND tagged as data analytics will appear.**
 
 .. image:: ../../Design/smallLangAndSnippetTag.png
    :align: center
 
-NOTE 3: When language tags are selected, only snippet tags in that language will appear for ease of selection.
+**NOTE 3: When language tags are selected, only snippet tags in that language will appear for ease of selection.**
 
 .. image:: ../../Design/smallPythonTagOnly.png
    :align: center
 
-NOTE 4: If 2 of the same language tags appear in the Language Tags section this indicates that one of the snippets
+**NOTE 4: If 2 of the same language tags appear in the Language Tags section this indicates that one of the snippets
 contains a snippet tag that matches the language name. To get rid of the duplicate tag, filter through snippets and
-untag any snippets that have that Language in their snippet tags.
+untag any snippets that have that Language in their snippet tags.**