From 4301e935366f0a22191c14f52be2d0fbd5da8f99 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Wed, 17 Jan 2024 09:34:21 -0700
Subject: [PATCH] Merge pull request #16556 from overleaf/mf-fix-info-cards

Website-redesign - Update `info-cards` according to design (change border top & icon color to #4354a3; change box shadow)

GitOrigin-RevId: 6f7a3fd5b456a699a09196a9663f310acddacd56
---
 .../stylesheets/app/website-redesign.less     | 26 +++++++++----------
 .../stylesheets/variables/colors.less         |  2 ++
 .../stylesheets/variables/css-variables.less  |  2 ++
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/services/web/frontend/stylesheets/app/website-redesign.less b/services/web/frontend/stylesheets/app/website-redesign.less
index cd5187ef05..30ba457075 100644
--- a/services/web/frontend/stylesheets/app/website-redesign.less
+++ b/services/web/frontend/stylesheets/app/website-redesign.less
@@ -96,18 +96,12 @@
         border: 2px solid var(--neutral-20);
       }
 
-      // workaround for border that contains both linear-gradient and border radius
-      // https://stackoverflow.com/a/53037637
-      &.blue-gradient-highlighted {
-        border: double 2px transparent;
+      &.blue-border {
+        border: solid 2px var(--sapphire-blue);
         border-radius: 8px;
-        background-image: linear-gradient(var(--white), var(--white)),
-          var(--premium-gradient);
-        background-origin: border-box;
-        background-clip: content-box, border-box;
 
         .plans-card-inner-title {
-          color: var(--blue-60);
+          color: var(--sapphire-blue);
         }
       }
     }
@@ -129,8 +123,8 @@
       .info-card {
         border-radius: 8px;
         height: 100%;
-        box-shadow: 0px 2px 4px 0px rgba(30, 37, 48, 0.16);
-        border-top: 8px solid #2f4858;
+        box-shadow: 0px 2px 4px 0px #1e253014, 0px 4px 12px 0px #1e25301f;
+        border-top: 8px solid var(--sapphire-blue);
         padding: 32px 40px 32px 40px;
 
         &.info-card-big-text {
@@ -144,6 +138,10 @@
             line-height: 1.333;
           }
         }
+
+        i.material-symbols {
+          color: var(--sapphire-blue);
+        }
       }
     }
   }
@@ -567,12 +565,12 @@
     color: white;
   }
 
-  .btn-blue-gradient {
-    background: var(--premium-gradient);
+  .btn-blue {
+    background: var(--sapphire-blue);
     color: var(--white);
 
     &:hover {
-      background: var(--blue-70);
+      background: var(--sapphire-blue-dark);
     }
   }
 
diff --git a/services/web/frontend/stylesheets/variables/colors.less b/services/web/frontend/stylesheets/variables/colors.less
index 82c4318137..72c801776f 100644
--- a/services/web/frontend/stylesheets/variables/colors.less
+++ b/services/web/frontend/stylesheets/variables/colors.less
@@ -94,6 +94,8 @@
 
 // == website-redesign
 @emerald-green: #098842;
+@sapphire-blue: #4354a3;
+@sapphire-blue-dark: #3c4c93;
 
 // == ol-* legacy variables ==
 // These will eventually be removed and replaced with above names
diff --git a/services/web/frontend/stylesheets/variables/css-variables.less b/services/web/frontend/stylesheets/variables/css-variables.less
index f560707813..f4fdbb2f53 100644
--- a/services/web/frontend/stylesheets/variables/css-variables.less
+++ b/services/web/frontend/stylesheets/variables/css-variables.less
@@ -82,4 +82,6 @@
 
   // website-redesign
   --emerald-green: @emerald-green;
+  --sapphire-blue: @sapphire-blue;
+  --sapphire-blue-dark: @sapphire-blue-dark;
 }