[ADF-3198] Index and tutorial content review (#3500)

* [ADF-3198] Fixed glitches in doc index files and tools

* [ADF-3198] Reviewed new tutorial content and fixed index glitches

* [ADF-3198] Fixed host settings component brief description

docs/tutorials/basic-theming.md

@@ -1,23 +1,24 @@
 ---
 Level: Beginner
 ---
+
 # Basic theming
 
-As introduced in the [user guide about theming](../user-guide/theming.md), the customisation of the [Cascading Style Sheets](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) is something straightforward into an ADF application. In this tutorial you will see how to change it, using a step-by-step approach. The focus of this tutorial is [ADF apps built using Yeoman](./creating-the-app-using-yeoman.md), but you can re-use the same principles to customise the themes in all the ADF applications.
+As detailed in the [user guide page about theming](../user-guide/theming.md), you can easily customize the [Cascading Style Sheets](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) used by an ADF application. In this tutorial you will see how to modify the CSS, using a step-by-step approach. The focus of this tutorial is [ADF apps built using Yeoman](./creating-the-app-using-yeoman.md), but you can use the same principles to customize the themes in any ADF application.
 
 ## About the `adf-core` theming 
 
-As described into the [user guide about theming](../user-guide/theming.md), all happens into the `src/custom-style.scss` file defining the *primary*, the *accent* and the *warn* set of palettes. For a detailed description of the different types of palettes, check the [user guide about theming](../user-guide/theming.md).
+As described in the [user guide about theming](../user-guide/theming.md), eveything happens in the `src/custom-style.scss` file defining the *primary*, the *accent* and the *warn* set of palettes. For a detailed description of the different types of palettes, check the [user guide about theming](../user-guide/theming.md).
 
-As you can see directly in the `css` file, the sets of palettes are defined by some predefined variables used in the source code as described below.
+As you can see directly in the `css` file, the sets of palettes are configured using some predefined variables used in the source code as described below.
 
     $primary: mat-palette($alfresco-accent-orange);
     $accent:  mat-palette($alfresco-accent-purple);
     $warn:    mat-palette($alfresco-warn);
 
-The `mat-palette` function is used to define the [Material Design](https://material.io/design/introduction/) Palettes from a collection of colours and `$alfresco-ecm-cyan`, `$alfresco-accent-purple` and `$alfresco-warn` are variables declared locally into the project to define the colours to be used in the application.
+The `mat-palette` function is used to define the [Material Design](https://material.io/design/introduction/) Palettes from a collection of colors and `$alfresco-ecm-cyan`, `$alfresco-accent-purple` and `$alfresco-warn` are variables declared locally in the project to define the colors to be used in the application.
 
-As you can easily imagine, changing the parameter of the `mat-palette` function, you will change the colours of the entire application in one action.
+As you would expect, changing the parameter of the `mat-palette` function will change the colours of the entire application together.
 
 All the available variables containing the set of palettes for the application can be found in the `node_modules/@alfresco/adf-core/_theming.css` file. In that file you can find:
 
@@ -29,7 +30,7 @@ All the available variables containing the set of palettes for the application c
  - `$alfresco-accent-purple`
  - `$alfresco-accent-orange`
 
-Check the `_theming.css` file to see the latest changes and how the variable are structured and defined in practice.
+Check the `_theming.css` file to see the latest changes and how the variables are structured and defined.
 
 ## Changing the palette of your application
 
@@ -37,11 +38,11 @@ As an example, let's change the set of palettes for the primary colours. In the
 
     $primary: mat-palette($alfresco-ecm-blue);
 
-Once done, save the `custom-style.scss` file and you will see the application refreshed with different colours. That's all.
+Once done, save the `custom-style.scss` file and you will see the application refreshed with different colours. That's all there is to it.
 
 ## Developing your own palette
 
-In some cases you might want to do something more "customised", and you might want to choose your preferred colours for your application. In this case you simply need to develop your own palette into a local variable and use it as primary, accent or warn.
+In some cases you might want to do something more "customized", and you might want to choose your preferred colours for your application. In this case you simply need to develop your own palette in a local variable and use it as the primary, accent or warn palette.
 
 As an example, let's edit the `src/custom-style.scss` file adding the following source code immediately before the definition of the `$primary` variable.
 
@@ -78,10 +79,10 @@ As an example, let's edit the `src/custom-style.scss` file adding the following
         )
     );
 
-Once done replace the `$primary` definition as follows and save the `custom-style.scss` file.
+When you have done this, replace the `$primary` definition as follows and save the `custom-style.scss` file:
 
     $primary: mat-palette($my-own-brown);
 
-After few seconds you will see the application refreshing with different colours in the upper menu. In the following screenshot you can see how the new palette looks like.
+After a few seconds you will see the application refreshing with different colours in the upper menu. In the following screenshot you can see how the new palette looks:
 
 ![theming_palette](../docassets/images/theming_palette.png)