From f894726d736042aa670a7f5df84c317fa1784cb2 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Fri, 15 Sep 2023 18:37:19 -0500
Subject: [PATCH] Website: Update pricing page styles (#13833)

Closes: #13776
Closes: #13781
Closes: #13782


Changes:
- Fixed a bug where Pricing tier names were not being shown when the
page is in "security" mode.
- Removed a CSS property that was creating a double border on tables on
older versions of Chrome and Opera.
- Updated page styles to match wireframes.
---
 website/assets/styles/pages/pricing.less | 17 ++++++++++++--
 website/views/pages/pricing.ejs          | 30 ++++++++++++------------
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/website/assets/styles/pages/pricing.less b/website/assets/styles/pages/pricing.less
index cb2a7ac8ce..941b9ba278 100644
--- a/website/assets/styles/pages/pricing.less
+++ b/website/assets/styles/pages/pricing.less
@@ -282,13 +282,19 @@
       border-top-right-radius: 8px;
       border-top: none;
     }
+    div:last-of-type {
+      border-bottom-left-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
     div {
       border-top: 1px solid #E2E4EA;
     }
     [purpose='striped-row'] {
       background-color: #F9FAFC;
     }
-
+    strong {
+      color: @core-fleet-black-75;
+    }
   }
   [purpose='premium-price-linebreak'] {
     display: none;
@@ -297,6 +303,9 @@
     height: 16px;
     width: 16px;
   }
+  [purpose='table-checkmark'] {
+    width: 175px;
+  }
   [purpose='pricing-categories-table'] {
     margin-bottom: 40px;
     thead {
@@ -315,7 +324,6 @@
       color: #515774;
       border-radius: 8px;
       outline: 1px solid #E2E4EA;
-      box-shadow: 0 0 0 1px #E2E4EA;
       td {
         padding: 12px 24px;
         vertical-align: middle;
@@ -346,6 +354,7 @@
       font-size: 24px;
       line-height: 32px;
       color: #192147;
+      margin-bottom: 24px;
     }
   }
 
@@ -396,7 +405,11 @@
     [purpose='premium-card'] {
       width: 100%;
     }
+    [purpose='premium-tier-card'] {
+      margin-left: 0px;
+    }
   }
+
   @media (max-width: 575px) {
     // >575px:
     //   - The Premium Cloud card switches to a column layout
diff --git a/website/views/pages/pricing.ejs b/website/views/pages/pricing.ejs
index acb7d71789..9224b7c24f 100644
--- a/website/views/pages/pricing.ejs
+++ b/website/views/pages/pricing.ejs
@@ -133,7 +133,7 @@
       <h2 class="text-center pb-3 mb-4">Compare plans</h2>
       <div class="d-flex flex-column justify-content-center p-0">
         <%// Desktop IT-focused features tables %>
-        <div class="d-none d-sm-block">
+        <div class="d-none d-md-block">
           <% for(let category of pricingTable) {%>
             <table purpose="pricing-categories-table" class="table">
              <thead>
@@ -158,13 +158,13 @@
               <tbody>
                 <% for( let feature of category.features){ %>
                   <tr>
-                    <td purpose="feature-name" class="w-50"><%- feature.name %><%- feature.comingSoon ? '*' : '' %></td>
+                    <td purpose="feature-name"><%- feature.name %><%- feature.comingSoon ? '*' : '' %></td>
                     <%if(feature.tier === 'Free') {%>
-                      <td><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
+                      <td purpose="table-checkmark"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
                     <%} else {%>
-                      <td></td>
+                      <td purpose="table-checkmark"></td>
                     <%}%>
-                    <td><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
+                    <td purpose="table-checkmark"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
                   </tr>
                 <% }%>
               </tbody>
@@ -174,7 +174,7 @@
         </div>
         <%// Mobile IT-focused features tables %>
         <% for(let category of pricingTable) {%>
-          <div purpose="mobile-feature-table-section" class="d-block d-sm-none">
+          <div purpose="mobile-feature-table-section" class="d-block d-md-none">
             <h4><%- category.categoryName %></h4>
             <% for( let feature of category.features){ %>
               <div purpose="mobile-features-table" class="d-flex flex-column">
@@ -195,7 +195,7 @@
             <% }%>
           </div>
         <% }%>
-          <p style="color: #515774;" class="d-block d-sm-none mb-0 w-100">* Coming soon</p>
+          <p style="color: #515774;" class="d-block d-md-none mb-0 w-100">* Coming soon</p>
       </div>
     </div>
     <%// Security-focused features table %>
@@ -203,20 +203,20 @@
       <h2 class="text-center pb-3 mb-4">Compare plans</h2>
       <div class="d-flex flex-column justify-content-center p-0">
         <%// Desktop security-focused features tables %>
-        <div class="d-none d-sm-block">
+        <div class="d-none d-md-block">
           <% for(let category of pricingTableForSecurity) {%>
             <table purpose="pricing-categories-table" class="table">
              <thead>
                 <tr>
                   <td><h4><%- category.categoryName %></h4></td>
-                  <%if(pricingTable.indexOf(category) === 0) {%>
+                  <%if(pricingTableForSecurity.indexOf(category) === 0) {%>
                   <td class="text-center">
                     <strong>Free</strong>
                   </td>
                   <%}else {%>
                   <td ></td>
                   <%}%>
-                  <%if(pricingTable.indexOf(category) === 0) {%>
+                  <%if(pricingTableForSecurity.indexOf(category) === 0) {%>
                   <td class="text-center">
                     <strong>Premium</strong>
                   </td>
@@ -230,11 +230,11 @@
                   <tr>
                     <td purpose="feature-name" class="w-50"><%- feature.name %><%- feature.comingSoon ? '*' : '' %></td>
                     <%if(feature.tier === 'Free') {%>
-                      <td><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
+                      <td purpose="table-checkmark"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
                     <%} else {%>
-                      <td></td>
+                      <td purpose="table-checkmark"></td>
                     <%}%>
-                    <td><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
+                    <td purpose="table-checkmark"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></td>
                   </tr>
                 <% }%>
               </tbody>
@@ -244,7 +244,7 @@
         </div>
         <%// Mobile security-focused features tables %>
         <% for(let category of pricingTableForSecurity) {%>
-          <div purpose="mobile-feature-table-section" class="d-block d-sm-none">
+          <div purpose="mobile-feature-table-section" class="d-block d-md-none">
             <h4><%- category.categoryName %></h4>
             <% for( let feature of category.features){ %>
               <div purpose="mobile-features-table" class="d-flex flex-column">
@@ -265,7 +265,7 @@
             <% }%>
           </div>
         <% }%>
-          <p style="color: #515774;" class="d-block d-sm-none mb-0 w-100">* Coming soon</p>
+          <p style="color: #515774;" class="d-block d-md-none mb-0 w-100">* Coming soon</p>
       </div>
     </div>
     <%// FAQ %>