From 9ce9a22750fb74ef8e6f644f82b9d75d8cf676ef Mon Sep 17 00:00:00 2001
From: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
Date: Wed, 3 Jul 2024 00:12:25 +0900
Subject: [PATCH] Website pricing tab switch order (#20146)

- Changed the tab switch order to lead with IT
- Changed tabs to have a consistent width (fixes a balance issue caused
by the re-ordering)
-
---
 website/assets/styles/pages/pricing.less | 21 +++++++++++----------
 website/views/pages/pricing.ejs          |  2 +-
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/website/assets/styles/pages/pricing.less b/website/assets/styles/pages/pricing.less
index ad11b643e3..05cdaeba84 100644
--- a/website/assets/styles/pages/pricing.less
+++ b/website/assets/styles/pages/pricing.less
@@ -33,7 +33,7 @@
     max-width: 1120px;
   }
   [purpose='pricing-switch'] {
-    width: 600px;
+    width: 660px;
     cursor: pointer;
     border: 1px solid #E2E4EA;
     border-radius: 28px;
@@ -50,29 +50,30 @@
       border: 1px solid #E2E4EA;
       border-radius: 28px;
       height: 58px;
-      min-width: 140px;
+      min-width: 220px;
       z-index: 1;
       transition: 0.25s all;
     }
     [purpose='pricing-switch-option'] {
-      padding: 16px 40px;
+      padding: 16px 24px;
       text-align: center;
       cursor: pointer;
       z-index: 3;
       user-select: none;
       white-space: nowrap;
+      min-width: 220px;
     }
     .Security-selected {
-      width: 251px;
-      transform: translateX(167px);
+      width: 220px;
+      transform: translateX(440px);
     }
     .IT-selected {
       left: 1px;
-      width: 183px;
-      transform: translateX(416px);
+      width: 220px;
+      transform: translateX(218px);
     }
     .all-selected {
-      width: 167px;
+      width: 220px;
     }
   }
 
@@ -451,12 +452,12 @@
       }
       .Security-selected {
         width: 100%;
-        transform: translateY(56px);
+        transform: translateY(114px);
       }
       .IT-selected {
         width: 100%;
         top: 1px;
-        transform: translateY(113px);
+        transform: translateY(55px);
       }
       .all-selected {
         width: 100%;
diff --git a/website/views/pages/pricing.ejs b/website/views/pages/pricing.ejs
index c0fe6b7584..99f35ad993 100644
--- a/website/views/pages/pricing.ejs
+++ b/website/views/pages/pricing.ejs
@@ -66,8 +66,8 @@
       </div>
       <div purpose="pricing-switch" class="d-flex flex-md-row flex-column justify-content-center mx-auto">
         <div purpose="pricing-switch-option" class="all" :class="[pricingMode === 'all' ? 'selected' : '']" @click="clickChangePricingMode('all')">All features</div>
-        <div purpose="pricing-switch-option" class="security" :class="[pricingMode === 'Security' ? 'selected' : '']" @click="clickChangePricingMode('Security')">For security engineers</div>
         <div purpose="pricing-switch-option" class="it" :class="[pricingMode === 'IT' ? 'selected' : '']" @click="clickChangePricingMode('IT')">For IT admins</div>
+        <div purpose="pricing-switch-option" class="security" :class="[pricingMode === 'Security' ? 'selected' : '']" @click="clickChangePricingMode('Security')">For security engineers</div>
         <div purpose="pricing-tier-switch" :class="pricingMode+'-selected'"></div>
       </div>
     </div>