doc: update overview and ui-tour designer

.github/styles/config/vocabularies/Doc/accept.txt

@@ -27,4 +27,5 @@ Proficy
 Exton
 Gantt
 sitewide
-Unselect
+Unselect
+pulldown

.github/styles/config/vocabularies/docs/accept.txt

@@ -27,4 +27,5 @@ Proficy
 Exton
 Gantt
 sitewide
-Unselect
+Unselect
+pulldown

visual-kpi-docs/docs/visual-kpi-design/installation-and-setup/basic-setup.mdx

@@ -9,51 +9,84 @@ import StylizedImage from '@site/src/components/StylizedImage/StylizedImage';
 import SvgFont from '@site/src/components/SvgFont/SvgFont';
 import PngFont from '@site/src/components/PngFont/PngFont';
 
-The Visual KPI Designer is already set up with basic configuration when you start it. However, in  few minutes you can configure your Visual KPI website with your company branding and details, add a few KPIs and have your website ready.
+When you start, visual KPI Designer is already set up with basic configuration. However, setting the branding and details for your site takes only a few minutes. In addition, you can quickly add a few KPIs and have your website ready.
 
-Of course, there are many configurations you can control using the Visual KPI Designer, but this page will help you  to make the basic configurations. In addition to configurations instructions, you also find some explanations about available features.
+Of course, there are many configurations you can control using the Visual KPI Designer. However, this page will help you make the basic configurations and explain available features.
 
 ## Contextual help
 
-Tooltips and descriptions are designed to help you use the worksheet. For example, in the Web Site configuration worksheet, the description for Site Title, tells you that whatever you enter here will show up in the title bar on the website.
+In the Visual KPI Designer, each worksheet includes headers that indicate the data to be entered in a cell. Click in any header cell to see a tooltip with an explanation of the data in that column.
+
+<StylizedImage
+  imgURL="img/docs/designer/getting-started/contextual-helper.png"
+  alt="Visual KPI Designer contextual help"
+/>
+
+In addition, some configuration worksheets have **Description** columns to add context to the current parameter. It tells you exactly what that item means and helps you know what kind of value to enter. For example, in the **Website Configuration** worksheet, the description for Site Title tells you that whatever you enter here will show up in the title bar on the website.
+
+<StylizedImage
+  imgURL="img/docs/designer/getting-started/site-title-configuration.png"
+  alt="Site title contextual help"
+/>
 
 ## Website worksheet
 
-The Visual KPI Designer Web Site Configuration worksheet is used to edit basic, default settings to configure your Visual KPI sites. Click the Site Settings icon (add icon) under Document Actions to access the sitewide settings menu to access **Profiles & Dashboards** and **Website**. You can choose to keep any of the default settings, but here we will present some basics configurations you may want to set up immediately:
+On the Visual KPI Designer toolbar, you have access to site settings. To configure you site, select site settings (<PngFont name='options28' />) &#8594; **Features & Config** &#8594; **Website** to open the **Website Configuration worksheet**. You can choose to keep any of the default settings, but here we will present some basics configurations you may want to set up immediately:
 
 ### Site title
 
 The default Value is Transpara Visual KPI. Change this to reflect your website's name as displayed in the title bar.
 
 1. In the Site Title row of the worksheet, click the Value column.
 2. Enter your site's title.
-3. Click the Save icon (add icon) in the Web Site configuration toolbar.
+3. Click the Save icon (<PngFont name='save28' />) in the Visual KPI Designer toolbar.
+
+### Admin information
+
+Choose the contact for your Visual KPI site. This will appear in some System Configuration pages on your site. It will also be used for cache server error notifications.
+
+1. In the **Site Administrator Contact** row, select the Value cell.
+2. Use the pulldown menu to select the appropriate contact.
+
+<StylizedImage
+  imgURL="img/docs/designer/getting-started/site-administrator-contact.png"
+  alt="Site Administrator Contact"
+/>
+
+### Cache warning
+
+To receive notifications of issues relating to cache errors, follow the instructions below:
+
+1. Use the pulldown menu to select a notification method in the **Cache Alert Notification Protocol** field. When set to None, notifications won't be sent out.
+2. Enter a value in the **Cache Alert Reminder Interval** (minutes) field indicating the frequency to be used for sending out cache alert reminders. When the value is 0, the Cache Alert Reminders won't be sent.
+3. Enter a value in the **Cache Warning Interval** (minutes) field. When the value is 0, the Cache Warning is disabled.
+
+<StylizedImage
+  imgURL="img/docs/designer/getting-started/cache-alert.png"
+  alt="Cache alart configuration"
+/>
 
 ### Site logo
 
-The default Logo is from Transpara Visual KPI, but you can easily change it.
+The default logo is from Transpara Visual KPI, but you can easily change it following the steps bellow:
 
-1. Click the Upload Logo icon (add icon) in the Web Site Configuration toolbar.
+1. On the Visual KPI Designer toolbar, click the Upload Logo icon (<PngFont name='selecticon28' />) in the Web Site Configuration toolbar. 
 2. Browse and select an image file (JPG or PNG) of your logo. Click Open.
 3. Click the Save icon (add icon) in the Web Site configuration toolbar.
 
-:::note Logo Size
-
-If the logo file does not match the required size (140 x 40 pixels), the image will be forced into the specified size, causing some distortion in the image's appearance.
-
-:::
+<StylizedImage
+  imgURL="img/docs/designer/getting-started/logo-selection.png"
+  alt="Company logo selection"
+/>
 
-### Admin information
+:::note Dark mode
 
-Choose the contact for your Visual KPI site. This will appear in some System Configuration pages on your site. It will also be used for cache server error notifications.
+You can add different logos for light and dark modes.
 
-1. In the Site Administrator Contact row, select the Value cell.
-2. Use the pulldown menu to select the appropriate contact.
+:::
 
-### Cache warning
+:::note Logo size
 
-If you want to receive notifications of issues relating to the Cache, follow the instructions below.
+If the logo file doesn't match the required size (140 x 40 pixels), the image will be forced into the specified size, causing some distortion in the image's appearance.
 
-1. Use the pulldown menu to select a notification method in the Cache Alert Notification Protocol field. When set to None, notifications will not be sent out.
-2. Enter a value in the Cache Alert Reminder Interval (minutes) field indicating the frequency to be used for sending out cache alert reminders. When the value is 0, the Cache Alert Reminders will not be sent.
-3. Enter a value in the Cache Warning Interval (minutes) field. When the value is 0, the Cache Warning is disabled.
+:::

visual-kpi-docs/docs/visual-kpi-design/installation-and-setup/overview.mdx

@@ -116,7 +116,6 @@ If you're running an older version of Visual KPI Server, you need to find the co
 <StylizedImage
   imgURL="img/docs/designer/getting-started/installation-downloadbutton.png"
   alt="Installation Download Button"
-  wSize="800px"
 />
 
 3. Run the **Visual-KPI-Designer-Setup.exe** installer when the download is complete. The file name may vary depending on the current software version.

visual-kpi-docs/docs/visual-kpi-design/installation-and-setup/ui-tour.mdx

@@ -9,7 +9,7 @@ import StylizedImage from '@site/src/components/StylizedImage/StylizedImage';
 import SvgFont from '@site/src/components/SvgFont/SvgFont';
 import PngFont from '@site/src/components/PngFont/PngFont';
 
-Once installed and connected, Visual KPI Designer appears as an extra set of tools within Excel, tailored for creating and managing KPIs, charts, and tables for your Visual KPI website. 
+Once installed and connected, Visual KPI Designer appears as an extra set of tools within Excel, tailored for creating and managing KPIs, charts, and tables for your Visual KPI website. While the [Visual KPI Designer toolbar](/docs/visual-kpi-design/installation-and-setup/ui-tour#visual-kpi-designer-toolbar) makes the tools and actions available, you will configure the system by working on the [worksheets](/docs/visual-kpi-design/installation-and-setup/ui-tour#visual-kpi-designer-worksheets).
 
 ## Using Excel features
 
@@ -23,26 +23,6 @@ When working with Visual KPI Designer, you won't use the Excel save button to st
 
 When you open Visual KPI Designer in Excel, you're not just working on a spreadsheet. Instead, the Visual KPI Designer fetches data from the Visual KPI Server and presents it in a spreadsheet-like format. You can manipulate this data, make changes, and create new elements within the Designer interface. When you save your work using the Visual KPI add-in, it packages the changes and sends them back to the server for runtime use. Excel is only involved during the design phase.
 
-## Visual KPI Designer worksheets
-
-Worksheets are all spreadsheets you use to configure your Visual KPI site.
-
-If you are using a new installation of Visual KPI Designer, you'll notice that much of the setup has already been added for you. You can just start adding KPIs, which will show up immediately on your Visual KPI website.
-
-When working with worksheets, you'll see tabs at the bottom of Excel showing any open worksheets. You always have a Visual KPI Designer worksheet open. If you just opened Excel, a blank spreadsheet will be available, which allows you to start entering KPI data immediately. Or you can open existing data using the Visual KPI Tab Tools.
-
-
-<StylizedImage
-  imgURL="img/docs/designer/getting-started/worksheet.png"
-  alt="Worksheet example"
-/>
-
-When entering data, you can enter text like in any Excel worksheet. You simply type the data into a cell.
-
-Rows in Excel represent Visual KPI items or objects. Each column represents an attribute. You enter a new KPI, for example, on a row. As you scroll along the columns, you set its attributes. This concept applies to every type of worksheet in the Visual KPI Designer. For example, if you are working on profiles, each row is a profile, and each column represents an attribute for that profile.
-
-Depending on the attribute, you can select data from a list. When you select a cell, if it supports a selection list, it shows a drop-down arrow indicating you can choose from a list. Click the drop-down arrow to display the contents of the list. Make a selection from the list to place the text in the cell.
-
 ## Visual KPI Designer toolbar
 
 When you open Excel after installing the Visual KPI Designer, you'll notice a new section or toolbar dedicated to Visual KPI functions, indicating that it's ready to use. The worksheet toolbar in Visual KPI Designer provides specific controls to manage data within your Excel sheets, which will affect the active worksheet or all open worksheets:
@@ -90,4 +70,28 @@ Make sure you select only the desired objects before using the Delete option. Be
 <StylizedImage
   imgURL="img/docs/designer/getting-started/object-icons-designer.png"
   alt="Basic Icons Visual Designer"
-/>
+/>
+
+## Visual KPI Designer worksheets
+
+Worksheets are all spreadsheets you use to configure your Visual KPI site.
+
+If you are using a new installation of Visual KPI Designer, you'll notice that much of the setup has already been added for you. You can just start adding KPIs, which will show up immediately on your Visual KPI website.
+
+When working with worksheets, you'll see tabs at the bottom of Excel showing any open worksheets. You always have a Visual KPI Designer worksheet open. If you just opened Excel, a blank spreadsheet will be available, which allows you to start entering KPI data immediately. Or you can open existing data using the Visual KPI Tab Tools.
+
+
+<StylizedImage
+  imgURL="img/docs/designer/getting-started/worksheet.png"
+  alt="Worksheet example"
+/>
+
+When entering data, you can enter text like in any Excel worksheet. You simply type the data into a cell.
+
+Rows in Excel represent Visual KPI items or objects. Each column represents an attribute. You enter a new KPI, for example, on a row. As you scroll along the columns, you set its attributes. This concept applies to every type of worksheet in the Visual KPI Designer. For example, if you are working on profiles, each row is a profile, and each column represents an attribute for that profile.
+
+Depending on the attribute, you can select data from a list. When you select a cell, if it supports a selection list, it shows a drop-down arrow indicating you can choose from a list. Click the drop-down arrow to display the contents of the list. Make a selection from the list to place the text in the cell.
+
+## What's next?
+
+After understanding more about the disposition of Visual KPI Designer parts, you can start configuring the basics information for your site by accessing [Basic Setup](/docs/visual-kpi-design/installation-and-setup/basic-setup).