Merge branch 'master' into M-DEV-1/replace-images-on-colors-page

Author: M-DEV-1

.github/workflows/kanvas.yml

@@ -19,7 +19,7 @@ import importDesignImage from "../../../../src/assets/images/learning-path/creat
 import configuringImportedDesignImage from "../../../../src/assets/images/learning-path/creating-designs/configuring-imported-design.png";
 import mesheryHelmChartImage from "../../../../src/assets/images/learning-path/creating-designs/meshery-helm-chart.png";
 import cloneDesignImage from "../../../../src/assets/images/learning-path/creating-designs/clone-design.png";
-import listOfDesignsImage from "../../../../src/assets/images/learning-path/creating-designs/list-of-designs.png";
+import renderedDesign from "../../../../src/assets/images/learning-path/creating-designs/rendered-design.png";
 import catalogImage from "../../../../src/assets/images/learning-path/creating-designs/catalog.png";
 import openInPlaygroundImage from "../../../../src/assets/images/learning-path/creating-designs/open-in-playground.png";
 import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js";
@@ -117,15 +117,13 @@ When working with Kanvas, you can effortlessly integrate various design files to
 
 2. Enter a name for the design in the **Design File Name** field.
 
-3. Choose the appropriate **Design Type** for the file you want to import (Helm Chart, Kubernetes, Manifest, etc).
-
-4. Select your preferred import method: either **URL** or **File Upload**.
+3. Select your preferred import method: either **URL** or **File Upload**.
 
 <a href={configuringImportedDesignImage}>
   <img src={configuringImportedDesignImage} width="100%" align="center" />
 </a>
 
-5. **Example:** Use the Meshery Server Helm chart at [Meshery Helm Chart](https://meshery.github.io/meshery.io/charts/meshery-v0.7.48.tgz).
+4. **Example:** Use the Meshery Server Helm chart at [Meshery Helm Chart](https://meshery.github.io/meshery.io/charts/meshery-v0.7.48.tgz).
 
 <a href={mesheryHelmChartImage}>
   <img src={mesheryHelmChartImage} width="100%" align="center" />
@@ -139,7 +137,7 @@ When working with Kanvas, you can effortlessly integrate various design files to
 
 1. Switch to Kanvas Designer mode, if not already in it. 
 
-2. In the left navigation panel, click the **“Catalog”** menu tab.
+2. From the canvas, click the **“Start From Template”** tab.
 
 3. Select a design from the list that appears in the panel.
 
@@ -151,12 +149,12 @@ When working with Kanvas, you can effortlessly integrate various design files to
 
 5. Click **“clone”** and a copy of the design will appear on your Kanvas canvas. You can then configure the design to suit your purposes.
 
-6. Find your newly cloned design in the list of designs in the left navigation panel.
-
-<a href={listOfDesignsImage}>
-  <img src={listOfDesignsImage} width="100%" align="center" />
+<a href={renderedDesign}>
+  <img src={renderedDesign} width="100%" align="center" />
 </a>
 
+6. Find your newly cloned design in the list of designs in your workspace.
+
 <h2 class="chapter-sub-heading">Github Integrations</h2>
 
 Integrating your GitHub account with Meshery unlocks the ability to import files as designs directly from your repositories, enhancing your collaboration and version control processes. This integration allows you to streamline your workflow, ensuring that your design infrastructure is always up-to-date and aligned with your source code. To get started with integrating GitHub into Meshery, follow the comprehensive guide available [here](https://docs.layer5.io/cloud/getting-started/github-integration/).