Merge pull request #60 from pipeops-dev/feature/docs-revamp

Update doc images to reflect new UI

Author: 9trocode

docs/Collaboration/teams.md

@@ -12,23 +12,26 @@ Welcome to PipeOps Teams, a robust feature designed to help you efficiently mana
 
 Begin by clicking on your profile in the navigation bar. This action will reveal a dropdown menu. From the dropdown, select "Teams," and you will be redirected to the Teams page, where all available teams can be accessed.
 
-Below is an example of the Teams page in PipeOps:
+![Accessing Teams](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/access-teams.png)
 
-![Teams View](https://pub-30c11acc143348fcae20835653c5514d.r2.dev//20/39/access_teams_f126d3e595.png)
+Alternatively, click the ‘’New” button on the top right corner of your screen. Select “Team” from the dropdown menu.
 
-## Viewing Team Members
+![Accessing Teams](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/create-team-nav.png)
 
-To view the members of a team, simply click on the desired team. The image below provides a visual representation of the members of a specific team:
 
-![Team Members View](https://pub-30c11acc143348fcae20835653c5514d.r2.dev//20/39/view_team_6d8d5dc5bd.png)
+Below is an example of the Teams page in PipeOps:
+
+![Teams Page Overview](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/teams-page.png)
+
 
 ## Creating a New Team
 
 Creating a new team is a straightforward process:
 
-1. Click on the "+ New" button in the upper-right corner of the dashboard.
+1. On the **teams** page, click the "+ New team" button at the top-right of your screen. If you haven't created any teams yet, you'll also see a "+ create a new team" button at the center of the page.
+
+![Create Team](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/create-team.png)
 
-2. Select "Team" from the dropdown.
 
 3. In the new page that appears, fill out the necessary information, including:
 
@@ -44,17 +47,11 @@ Creating a new team is a straightforward process:
 4. Click "Create Team" to finalize the setup.
 
 
+![Create Team](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/create-team-overview-page.png)
 
-Refer to the images below, which illustrate the step-by-step process of creating a new team:
-
-![Create New Team 1](https://pub-30c11acc143348fcae20835653c5514d.r2.dev//20/39/creating_team_e5af5b7751.png)
-
-![Create New Team 2](https://pub-30c11acc143348fcae20835653c5514d.r2.dev//20/39/team_cluster_7d4831ea3b.png)
-
-![Create New Team 3](https://pub-30c11acc143348fcae20835653c5514d.r2.dev//20/39/team_project_ac64eeed27.png)
 
+**Note:** You can invite team members before you create a team. Navigate to the **Invite Team Member** section on the right side of the page to add collaborators. Alternatively, you can follow the instructions below to add team members.
 
-Note: Team members can be invited after the team is created. Navigate to the **Invite Team Member** section on the right side of the page to add collaborators. Alternatively, you can follow the instructions below to add team members.
 
 
 ## Adding Team Members
@@ -66,7 +63,16 @@ Adding a team member to a specific team is quick and easy:
 
 Take a look at the image below, which displays the form for adding a new team member:
 
-<!--![Add Team Member](https://pub-30c11acc143348fcae20835653c5514d.r2.dev//20/39/add_team_member_150fa719f9.png)-->
+![Invite Member](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/teams-invite-member.png)
+
+
+
+## Viewing Team Members
+
+To view the members of a team, simply click on the desired team. The image below provides a visual representation of the members of a specific team:
+
+![Team Members View](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/teams-view%20members.png)
+
 
 
 ## Team Audit Trail
@@ -79,6 +85,8 @@ The **Audit Trail** feature in PipeOps provides a detailed record of all actions
 2. Click on the specific team whose audit logs you wish to view.
 3. At the top of the page, select the Audit Trail tab.
 
+![Team Audit](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/teams-audit.png)
+
 ### Audit Trail Features
 
 The audit trail displays key details such as:

docs/Collaboration/workspaces.md

@@ -15,7 +15,8 @@ To view the list of available workspaces and switch between them, follow these s
 1. Click on the "Workspace" tab in the navbar.
 2. A dropdown menu will appear, displaying the list of workspaces available to you.
 
-![Workspace Dropdown](https://pub-30c11acc143348fcae20835653c5514d.r2.dev//20/40/workspace_7606f4a4a4.png)
+![Access Workspace](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/create-workspace-dropdown.png)
+
 
 The image above provides an example of the workspace dropdown, allowing you to choose from the available workspaces associated with your account.
 
@@ -26,7 +27,9 @@ In addition to switching between existing workspaces, PipeOps also empowers you
 1. Click on the "Create New Workspace" button located in the workspace list dropdown.
 2. A form will be displayed, prompting you to provide the necessary information for the new workspace.
 
-![Create New Workspace Form](https://pub-30c11acc143348fcae20835653c5514d.r2.dev//20/40/create_workspace_1aa307b151.png)
+
+![Create New Workspace](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/create-workspace-modal.png)
+
 
 The image above illustrates the form that will appear when creating a new workspace. Ensure to fill in the required details, such as a descriptive name for the workspace.
 

docs/Integrations/aws-on-pipeops.md

@@ -4,7 +4,6 @@ sidebar_position: 1
 title: Connect AWS to PipeOps
 ---
 
-
 # Connecting AWS Account to PipeOps
 
 ## Overview
@@ -17,25 +16,23 @@ To connect your AWS account to PipeOps, follow these steps:
 
 1. On the left menu, click on the "Integrations" tab.
 
-![PipeOps Cloud Integration Tab](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/PipeOpsCloudIntegrationTab.png)
+![Connect Cloud Provider](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/integrations-page.png)
 
-2. Click on the AWS button among the list of cloud providers shown.
+2. Select AWS from the list of cloud providers shown and click the "Connect" button.
 
-![PipeOps Cloud Providers List](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/PipeOpsConnectCloudProviderList.png)
+![Connect Cloud Provider](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/integrations-page.png)
 
-3. On the "Connect AWS" screen, you can provide an optional name to identify your AWS account. The optional field is useful in scenarios when you want to connect more than one(1) AWS account on PipeOps.
+3. On the "Connect AWS" screen, you can provide an optional name to identify your AWS account. The optional field is useful in scenarios where you want to connect more than one(1) AWS account on PipeOps.
 
-![PipeOps AWS Connection screen](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/PipeOpsAWSConnectionTab.png)
+![PipeOps AWS Connection screen](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/connect-aws.png)
 
 4. Fill in your AWS Account ID found at the top-right corner of your AWS account and an optional name.
 
-![PipeOps AWS Connection screen filled](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/PipeOpsAWSConnectionFormFilled.png)
-
 5. After filling out the form, click on the "Add" button. A spinner loads, enabling the "Authorize IAM" button.
 
-6. Click on the "Authorize IAM" button. It should open a new tab to the right, opening a "Create Stacks" page on your AWS account which would need you to acknowledge "that AWS CloudFormation might create IAM resources with customised names" on the bottom of the page. 
+6. Click on the "Authorize IAM" button. It should open a "Create Stacks" page in a new tab in your AWS account, which will prompt you to acknowledge "that AWS CloudFormation might create IAM resources with customised names" on the bottom of the page.
 
-Then click on the "Create stack" button at the bottom right of the page.
+Click on the "Create stack" button at the bottom right of the page.
 
 ![PipeOps AWS Create Cloud Formation Stacks Page](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/PipeOpsAWSCreateStacksPage.png)
 
@@ -45,7 +42,6 @@ Then click on the "Create stack" button at the bottom right of the page.
 
 8. You can switch back to your PipeOps tab to the left and wait for a few seconds and your AWS account will automatically get connected.
 
-![PipeOps AWS Create Cloud Formation Stack In Progess Page](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/PipeOpsAWSAccountConnected.png)
-
-Now that you've connected your AWS account to PipeOps, you can create a server on your connected AWS account using this guide [here](/docs/servers/server-provisioning).
+![PipeOps AWS Create Cloud Formation Stack In Progess Page](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/connected-aws.png)
 
+Now that you've connected your AWS account to PipeOps, you can create a server on your connected AWS account using this [guide](/docs/servers/server-provisioning).

docs/Integrations/azure-on-pipeops.md

@@ -6,33 +6,41 @@ title: Connect Azure to PipeOps
 
 # Connecting Azure Account to PipeOps
 
-
 ## Overview
 
 This documentation will guide you through the process of connecting your Azure account to PipeOps. By following these steps, you’ll be able to create an Azure server on PipeOps and deploy projects on the server directly from your PipeOps dashboard.
 
-
 ## Steps to follow
 
 To connect your Azure account to PipeOps, follow these steps:
 
-1. Ensure you have your Azure credentials. If not, you can follow this guide [here](/docs/how-to-guides/tutorials/generate-azure-credentials).
+1. Ensure you have your Azure credentials. If not, you can follow the guide [here](/docs/how-to-guides/tutorials/generate-azure-credentials).
 
 2. On the left menu, click on the "Integrations" tab.
 
-3. Select "Azure" from the list of cloud providers and click the "Proceed" button at the bottom right.
+![PipeOps Integration Screen](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/connect-azure.png)
+
+3. Select "Azure" from the list of cloud providers and click the "Connect" button.
+
+4. An instruction screen appears, outlining the steps required to create your Azure credentials.
+   You can follow this guide [here](/docs/how-to-guides/tutorials/generate-azure-credentials) for a detailed walkthrough.
+
+![Azure Instruction Screen](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/connect-azure-step-one.png)
+
+5. On the "Enter Access Credentials" screen, you can provide an optional name to identify your Azure account. The optional field is useful in scenarios where you want to connect more than one Azure account on PipeOps.
 
-4. On the "Enter Access Credentials" screen, you can provide an optional name to identify your Azure account. The optional field is useful in scenarios when you want to connect more than one Azure account on PipeOps.
+![Enter Azure Credentials](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/connect-azure-step-two.png)
 
-5. Fill in the required fields with your credentials:
+Fill in the required fields with your credentials:
 
-    - Resource Group Name
-    - Tenant ID
-    - Client ID
-    - Client Secret
-    - Subscription ID
+- Resource Group Name
+- Tenant ID
+- Client ID
+- Client Secret
+- Subscription ID
 
 6. Click the submit button. If the credentials are correct, PipeOps will successfully integrate with Azure.
 
+![Connected Azure Screen](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/connected-azure-screen.png)
 
-Now that you've connected your Azure account to PipeOps, you can create a server on your connected Azure account using this guide [here](/docs/servers/server-provisioning).
+Now that you've connected your Azure account to PipeOps, you can create a server on your connected Azure account using this [guide](/docs/servers/server-provisioning).

docs/Integrations/do-on-pipeops.md

@@ -16,13 +16,18 @@ To connect your Digital Ocean account to PipeOps, follow these steps:
 
 1. In the PipeOps Dashboard, click on the "Integrations" tab from the left menu.
 
-2. Select "Digital Ocean" from the list of cloud providers and click "Connect" to proceed. 
+2. Select "Digital Ocean" from the list of cloud providers and click "Connect" to proceed.
+
+![PipeOps Cloud Providers List](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/connect-do-main-page.png)
 
 3. On the **Authorize DigitalOcean** screen, click the "Authorize my Digital Ocean" button. This will open a new tab to the right.
 
+![PipeOps Cloud Providers List](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/connect-digital-ocean.png)
+
 4. You will be redirected to DigitalOcean’s authorization page, as shown below. Click the "**Authorize Authorization**" button to grant PipeOps the necessary permissions.
 
 5. After authorization, you will be redirected back to PipeOps. If successful, you'll see DigitalOcean listed as a connected provider.
 
+![Connected Digital Ocean Screen](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/connected-do-screen.png)
 
-Now that you've connected your Digital Ocean account to PipeOps, you can create a server on your connected account using this guide [here](/docs/servers/server-provisioning).
+Now that you've connected your Digital Ocean account to PipeOps, you can create a server on your connected account using this [guide](/docs/servers/server-provisioning).

docs/Integrations/gcp-on-pipeops.md

@@ -10,28 +10,30 @@ title: Connect GCP to PipeOps
 
 This documentation will guide you through the process of connecting your GCP account to PipeOps. By following these steps, you’ll be able to create a GCP server on PipeOps and deploy projects on the server directly from your PipeOps dashboard.
 
-
 ## Steps to follow
 
 To connect your GCP account to PipeOps, follow these steps:
 
-1. Ensure you have downloaded your GCP JSON credentials. If not, you can follow this guide [here](/docs/how-to-guides/tutorials/generate-gcp-json-credentials).
+1. Ensure you have downloaded your GCP JSON credentials. If not, you can follow the guide [here](/docs/how-to-guides/tutorials/generate-gcp-json-credentials).
 
 2. On the left menu, click on the "Integrations" tab.
 
-![PipeOps Cloud Integration Tab](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/PipeOpsCloudIntegrationTab.png)
+![PipeOps Cloud Integration Tab](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/connect-gcp.png)
+
+3. Select "Google Cloud Platform" from the list of cloud providers shown and click the "Connect" button.
+
 
-3. Select "Google Cloud Platform" from the list of cloud providers shown and click the "Proceed" button at the bottom right.
+4. An instruction screen appears, outlining the steps required to generate your GCP credentials.
+   You can follow this guide [here](/docs/how-to-guides/tutorials/generate-gcp-json-credentials) for a detailed walkthrough.
 
-![PipeOps Cloud Providers List](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/PipeOpsConnectCloudProviderList.png)
+![GCP Instruction Screen](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/connect-gcp-step-one.png)
 
 
-4. On the "Upload Credentials JSON" screen, you can provide an optional name to identify your uploaded GCP JSON credentials. The optional field is useful in scenarios when you want to connect more than one(1) GCP account on PipeOps.
+5. On the "Upload Credentials JSON" screen, you can provide an optional name to identify your uploaded GCP JSON credentials. The optional field is useful in scenarios where you want to connect more than one GCP account on PipeOps.
 
-![PipeOps GCP JSON Credentials Upload Screen](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/PipeOpsGCPJSONCredentialsFilled.png)
+![PipeOps GCP JSON Credentials Upload Screen](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/connect-gcp-step-two.png)
 
-5. Click on the submit button at the bottom right, and if the JSON credentials are valid, your GCP Account is successfully connected.
+6. Click on the submit button at the bottom right. If the JSON credentials are valid, your GCP account will be successfully connected.
 
-![PipeOps GCP Connection screen](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/PipeOpsGCPCredentialsUploaded.png)
 
-Now that you've connected your GCP account to PipeOps, you can create a server on your connected GCP account using this guide [here](/docs/servers/server-provisioning).
+Now that you've connected your GCP account to PipeOps, you can create a server on your connected GCP account using this [guide](/docs/servers/server-provisioning).

docs/Integrations/huawei-on-pipeops.md

@@ -10,29 +10,27 @@ title: Connect Huawei to PipeOps
 
 This documentation will guide you through the process of connecting your Huawei account to PipeOps. By following these steps, you’ll be able to create a Huawei server on PipeOps and deploy projects on the server directly from your PipeOps dashboard.
 
-
 ## Steps to follow
 
 To connect your Huawei account to PipeOps, follow these steps:
 
-1. Ensure you have downloaded your Huawei credentials (a CSV file). If not, you can follow this guide [here](/docs/how-to-guides/tutorials/generate-huawei-credentials).
+1. Ensure you have downloaded your Huawei credentials (a CSV file). If not, you can follow the guide [here](/docs/how-to-guides/tutorials/generate-huawei-credentials).
 
 2. On the left menu, click on the "Integrations" tab.
 
-![PipeOps Cloud Integration Tab](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/PipeOpsCloudIntegrationTab.png)
-
-3. Click on the Huawei button among the list of cloud providers shown and click the "Proceed" button at the bottom right of the page.
-
-![PipeOps Cloud Providers List](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/PipeOpsConnectCloudProviderList.png)
+![PipeOps Cloud Integration Tab](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/connect-huawei.png)
 
-4. On the "Enter Access Credentials" screen, you can provide an optional name to identify your Huawei account. The optional field is useful in scenarios when you want to connect more than one(1) Huawei account on PipeOps. Then provide your "Access Key" and "Secret Key" from the CSV file you downloaded. 
+3. Click on the Huawei button among the list of cloud providers shown and click the "Connect" button.
 
+4. An instruction screen appears, outlining the steps required to generate your Huawei credentials.
+   You can follow this guide [here](/docs/how-to-guides/tutorials/generate-huawei-credentials) for a detailed walkthrough.
 
-![PipeOps Huawei Credentials Input Screen](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/PipeOpsHuaweiCloudCredentialsForm.png)
+![Huwawei Instruction Screen](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/connect-huawei-step-one.png)
 
-5. Click on the submit button at the bottom right and if the Huawei credentials are valid, then your Huawei Account is successfully connected.
+5. On the "Enter Access Credentials" screen, you can provide an optional name to identify your Huawei account. The optional field is useful in scenarios where you want to connect more than one Huawei account on PipeOps. Then provide your "Access Key" and "Secret Key" from the CSV file you downloaded.
 
-![PipeOps Huawei Connection screen](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/HuaweiConnectionScreen.png)
+![PipeOps Huawei Credentials Input Screen](https://pub-950943fa1bc54978bed46ef104f9d81a.r2.dev/Documentation%20Images/connect-huawei-step-two.png)
 
-Now that you've connected your Huawei account to PipeOps, you can create a server on your connected Huawei account using this guide [here](/docs/servers/server-provisioning).
+6. Click on the submit button at the bottom right. If the Huawei credentials are valid, your Huawei account will be successfully connected.
 
+Now that you've connected your Huawei account to PipeOps, you can create a server on your connected Huawei account using this [guide](/docs/servers/server-provisioning).