Merge pull request wso2#4561 from divyaamunugama/guides-updates

improved iProov docs

en/asgardeo/docs/guides/authentication/mfa/add-iproov-login.md

@@ -1,7 +1,7 @@
 # Add iProov login
 
-[iProov](https://www.iproov.com/) is a passwordless authentication method that allows users to log in to applications using facial biometrics. 
-iProov's patented Flashmark biometric technology ensures that the user is a real person and not a spoof or a replay. 
+[iProov](https://www.iproov.com/) is a passwordless authentication method that allows users to log in to applications using facial biometrics.
+iProov's patented Flashmark biometric technology ensures that the user is a real person and not a spoof or a replay.
 
 This guide explains how you can use iProov to add passwordless login to applications registered in your Asgardeo organization.
 
@@ -13,9 +13,8 @@ You need to configure the iProov environment and have access to the iProov porta
 
 Follow the steps below to register your service provider in the iPortal.
 
-::: info
-You can follow the [iProov documentation](https://docs.iproov.com/docs/Content/ImplementationGuide/iportal/create-service-providers.htm) for detailed instructions.
-:::
+!!! note
+    You can follow the [iProov documentation](https://docs.iproov.com/docs/Content/ImplementationGuide/iportal/create-service-providers.htm) for detailed instructions.
 
 1. Log into [iPortal](https://portal.iproov.com/) and click **Service providers**.
 
@@ -42,7 +41,8 @@ Follow the steps below to register HYPR as a connection in Asgardeo.
 1. On the Asgardeo Console, go to **Connections**.
 
 2. Click **Create Connection** and select **iProov**.
-   <img :src="$withBase('/assets/img/guides/mfa/iproov/iproov-add-connection.png')" alt="Create iproov connection">
+
+    ![Create iproov connection]({{base_path}}/assets/img/guides/mfa/iproov/iproov-add-connection.png){: style="display: block; margin: 0; border: 0.3px solid lightgrey;"}
 
 3. Enter the following details and click **Finish**:
 
@@ -52,63 +52,64 @@ Follow the steps below to register HYPR as a connection in Asgardeo.
         <th>Description</th>
       </tr>
       <tr>
-        <td>Name</td>
+        <td><b>Name</b></td>
         <td>A unique name to identify the connection.</td>
       </tr>
       <tr>
-          <td>Base URL</td>
+          <td><b>Base URL</b></td>
           <td>Provide the base URL of your iProov server deployment.</td>
       </tr>
       <tr>
-          <td>OAuth Username</td>
+          <td><b>OAuth Username</b></td>
           <td>Provide the OAuth Username from the service provider created in iProov.</td>
       </tr>
       <tr>
-          <td>OAuth Password</td>
+          <td><b>OAuth Password</b></td>
           <td>Provide the OAuth password from the service provider created in iProov.</td>
       </tr>
       <tr>
-          <td>API Key</td>
+          <td><b>API Key</b></td>
           <td>Provide the API key obtained from the service provider created in iProov.</td>
       </tr>
       <tr>
-          <td>API Secret</td>
+          <td><b>API Secret</b></td>
           <td>Provide the API secret obtained from the service provider created in iProov.</td>
       </tr>
       <tr>
-          <td>Enable Progressive Enrollment</td>
+          <td><b>Enable Progressive Enrollment</b></td>
           <td>Enable this to allow users to enroll with iProov during login.</td>
       </tr>
     </table>
 
 ## Enable iProov login
 
-::: info Before you begin
-You need to <a :href="$withBase('/guides/applications/')">register an application with Asgardeo</a>. You can register your own application or use one of the <a :href="$withBase('/get-started/try-samples/')">sample applications</a> provided.
-:::
+!!! note "Before you begin"
+    You need to [register an application with Asgardeo]({{base_path}}/guides/applications/). You can register your own application or use one of the [sample applications]({{base_path}}/get-started/try-samples/) provided.
 
 To enable iProov login for your application:
+
 1. On the Asgardeo Console, go to **Applications**.
 
 2. Go to the **Sign-in Method** tab of the application and add iProov login from your preferred editor:
 
-   ::: details Using the Classic Editor
-   - If you haven't already configured an authentication flow,
-     1. Click **Start with default configuration** to begin.
-     2. Add a second authentication step by clicking the **+** icon and add your iProov connection to this step.
+    === "Visual Editor"
+        To add iProov login using the Visual Editor:
+
+        1. Switch to the **Visual Editor** tab. 
+        2. Add a second authentication step by clicking the **+** icon and add your iProov connection to this step.
+            
+            ![Customize login flow]({{base_path}}/assets/img/guides/mfa/iproov/iproov-login-flow-with-visual-editor.png){: style="display: block; margin: 0; border: 0.3px solid lightgrey;"}
 
-   - If you have an already customized login flow, you can add a second authentication step by clicking the **+** icon and add your iProov connection to this step.
-     <img :src="$withBase('/assets/img/guides/mfa/iproov/customize-steps.png')" alt="Customize login flow">
+    === "Classic Editor"
+        - If you haven't already configured an authentication flow,
 
-   :::
+            1. Click **Start with default configuration** to begin.
+            2. Add a second authentication step by clicking the **+** icon and add your iProov connection to this step.
+
+        - If you have an already customized login flow, you can add a second authentication step by clicking the **+** icon and add your iProov connection to this step.
+
+            ![Customize login flow]({{base_path}}/assets/img/guides/mfa/iproov/customize-steps.png){: style="display: block; margin: 0; border: 0.3px solid lightgrey;"}
 
-   ::: details Using the Visual Editor
-      To add iProov login using the Visual Editor:
-
-      1. Switch to the **Visual Editor** tab. 
-
-      2. Add a second authentication step by clicking the **+** icon and add your iProov connection to this step.
-         <img :src="$withBase('/assets/img/guides/mfa/iproov/iproov-login-flow-with-visual-editor.png')" alt="Customize login flow">
 
 3. Click **Update** to save the sign-in flow.
 
@@ -123,6 +124,7 @@ Follow the steps given below:
 3. Complete the preceding authentication steps.
 
 4. Grant camera access for iProov to authenticate the user.
-   <img :src="$withBase('/assets/img/guides/mfa/iproov/grant-camera-access.png')" alt="Grant camera access for iProov">
+
+    ![Grant camera access for iProov]({{base_path}}/assets/img/guides/mfa/iproov/grant-camera-access.png){: style="display: block; margin: 0; border: 0.3px solid lightgrey;"}
 
 5. Click **Scan Face with iProov** , and complete the iProov authentication process by starting the face scan.