From 50561ff009f43fa652f27c6c088ce9ba3a7fe2f1 Mon Sep 17 00:00:00 2001
From: Juri <juri.strumpflohner@gmail.com>
Date: Tue, 25 Mar 2025 15:59:38 +0100
Subject: [PATCH] fix(nx-dev): adjust alignment on the pricing addon
 descriptions

---
 nx-dev/ui-pricing/src/lib/plans-display.tsx | 32 ++++++++++-----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/nx-dev/ui-pricing/src/lib/plans-display.tsx b/nx-dev/ui-pricing/src/lib/plans-display.tsx
index 8254281cbb..0330a3cf55 100644
--- a/nx-dev/ui-pricing/src/lib/plans-display.tsx
+++ b/nx-dev/ui-pricing/src/lib/plans-display.tsx
@@ -105,7 +105,7 @@ export function PlansDisplay(): ReactElement {
                       </Link>
                     </span>
                   </li>
-                  <li className="flex items-start justify-start gap-x-2 py-2.5">
+                  <li className="flex items-center justify-start gap-x-2 py-2.5">
                     <CheckCircleIcon
                       aria-hidden="true"
                       className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
@@ -178,28 +178,28 @@ export function PlansDisplay(): ReactElement {
                 <li className="py-2.5">
                   <span className="font-medium">Included for free</span>
                 </li>
-                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                <li className="flex items-center justify-start gap-x-2 py-2.5">
                   <CheckCircleIcon
                     aria-hidden="true"
                     className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
                   />
                   <span>5 active contributors¹</span>
                 </li>
-                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                <li className="flex items-center justify-start gap-x-2 py-2.5">
                   <CheckCircleIcon
                     aria-hidden="true"
                     className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
                   />
                   <span>50,000 monthly credits</span>
                 </li>
-                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                <li className="flex items-center justify-start gap-x-2 py-2.5">
                   <CheckCircleIcon
                     aria-hidden="true"
                     className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
                   />
                   <span>10 concurrent CI connections</span>
                 </li>
-                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                <li className="flex items-center justify-start gap-x-2 py-2.5">
                   <CheckCircleIcon
                     aria-hidden="true"
                     className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
@@ -220,7 +220,7 @@ export function PlansDisplay(): ReactElement {
                     AI integrations
                   </Link>
                 </li>
-                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                <li className="flex items-center justify-start gap-x-2 py-2.5">
                   <CheckCircleIcon
                     aria-hidden="true"
                     className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
@@ -230,21 +230,21 @@ export function PlansDisplay(): ReactElement {
                 <li className="py-2.5">
                   <span className="font-medium">Add-ons</span>
                 </li>
-                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                <li className="flex items-center justify-start gap-x-2 py-2.5">
                   <PlusIcon
                     aria-hidden="true"
                     className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
                   />
                   <span>$19 per active contributor¹ / month</span>
                 </li>
-                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                <li className="flex items-center justify-start gap-x-2 py-2.5">
                   <PlusIcon
                     aria-hidden="true"
                     className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
                   />
                   <span>$5.50 per 10,000 credits</span>
                 </li>
-                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                <li className="flex items-center justify-start gap-x-2 py-2.5">
                   <PlusIcon
                     aria-hidden="true"
                     className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
@@ -297,21 +297,21 @@ export function PlansDisplay(): ReactElement {
                 <li className="py-2.5">
                   <span className="font-medium">Includes</span>
                 </li>
-                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                <li className="flex items-center justify-start gap-x-2 py-2.5">
                   <CheckCircleIcon
                     aria-hidden="true"
                     className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
                   />
                   <span>Volume discounts on credits available</span>
                 </li>
-                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                <li className="flex items-center justify-start gap-x-2 py-2.5">
                   <CheckCircleIcon
                     aria-hidden="true"
                     className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
                   />
                   <span>White glove onboarding</span>
                 </li>
-                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                <li className="flex items-center justify-start gap-x-2 py-2.5">
                   <CheckCircleIcon
                     aria-hidden="true"
                     className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
@@ -335,7 +335,7 @@ export function PlansDisplay(): ReactElement {
                     : a suite of premium extensions for the Nx CLI
                   </span>
                 </li>
-                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                <li className="flex items-center justify-start gap-x-2 py-2.5">
                   <CheckCircleIcon
                     aria-hidden="true"
                     className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
@@ -344,7 +344,7 @@ export function PlansDisplay(): ReactElement {
                     Work hand-in-hand with the Nx team for continual improvement
                   </span>
                 </li>
-                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                <li className="flex items-center justify-start gap-x-2 py-2.5">
                   <CheckCircleIcon
                     aria-hidden="true"
                     className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
@@ -354,14 +354,14 @@ export function PlansDisplay(): ReactElement {
                     self-contained, on-prem
                   </span>
                 </li>
-                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                <li className="flex items-center justify-start gap-x-2 py-2.5">
                   <CheckCircleIcon
                     aria-hidden="true"
                     className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"
                   />
                   <span>SSO / SAML Login</span>
                 </li>
-                <li className="flex items-start justify-start gap-x-2 py-2.5">
+                <li className="flex items-center justify-start gap-x-2 py-2.5">
                   <CheckCircleIcon
                     aria-hidden="true"
                     className="h-6 w-5 flex-none text-blue-600 dark:text-sky-500"