Update documentation

docs/labimotion/design-principles.mdx

@@ -6,6 +6,7 @@ sidebar_position: 1
 ---
 
 import { FigCaption, SubTitle } from "@site/src/js/layout";
+import designBase from "@site/static/img/labimotion/design-base.png";
 
 # Template Guidelines
 
@@ -19,7 +20,24 @@ Generic **[Elements](./guides/designer/elements/)**, **[Segments](./guides/desig
   src={require("@site/static/img/labimotion/labimotion_modules.png").default}
   alt="labimotion_modules"
 />
-<FigCaption text="labimotion_modules" />
+<FigCaption text="Generic Elements, Segments, and Datasets are structured using Components" />
+
+:::info
+
+**What is Element, Segement, Dataset?**
+
+In case you are not familiar with the terms **Element**, **Segment**, and **Dataset**, here is a brief overview:
+
+- **Element**: An element is a fundamental enetity which represent an essential aspect within your domain. For example, the sample element or reaction element in Chemotion ELN.
+- **Segment**: A segment is a distinct section that usually has its own identifiable characteristics. You can use it to represent a specific subset of an element.
+- **Dataset**: Within the system, a predefined segment named "Analyses" is provided to capture analysis results. The dataset of the analysis comprises individual data points. Additionally, through **[integration with the ChemConverter service](./guides/user/datasets/converter-metadata)**, metadata extraction from raw files is automatically triggered, facilitating mapping into the dataset.
+
+<p align="center">
+  <img src={designBase} alt="LabIMotion - Generic Element, Segement, and Dataset" />
+  <FigCaption text="Generic Element, Segement, and Dataset" />
+</p>
+
+:::
 
 ## Roles and Resources
 

docs/labimotion/guides/designer/elements/index.mdx

@@ -5,7 +5,7 @@ sidebar_position: 1
 ---
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faList } from "@fortawesome/free-solid-svg-icons";
+import { faList, faPlus, faReply, faTableCells, faTableCellsLarge } from "@fortawesome/free-solid-svg-icons";
 import {
   FigCaption,
   SubTitle,
@@ -46,9 +46,9 @@ Four main areas for different functions:
 
 **1. Toolbar:**
 
-- `Fetch from LabIMotion Hub`: Retrieve public templates from the template hub.
-- `New Element`: Create a new element template.
-- `Large Grid Size` or `Small Grid Size`: Select your preferred grid view.
+- **Fetch from LabIMotion Hub** <FontAwesomeIcon icon={faReply} />: Retrieve public templates from the template hub.
+- **New Element** <FontAwesomeIcon icon={faPlus} /> : Create a new element template.
+- **Large Grid Size** <FontAwesomeIcon icon={faTableCellsLarge} /> or **Small Grid Size** <FontAwesomeIcon icon={faTableCells} />: Select your preferred grid view.
 
 **2. Action:**
 Within this section, you'll find actions that can modify or delete data. These actions include copying an element, editing element attributes, and deleting an element.