From 6f3402e0e872b60c1c87e392baed0855ec9f9618 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Mon, 29 Jan 2024 03:45:49 -0700
Subject: [PATCH] [website-redesign] Change all website-redesign CTA button
 color to our new green: "emerald-green" (#16711)

* Change all website-redesign CTA button color to our new green: "emerald-green"

* Change `inline-green-link` color to `emerald-green`, also change the hover of `green-link` to `emerald-green-dark`

* reuse the `btn-primary` class for website-redesign pages with the new green primary color

GitOrigin-RevId: 63ba76efbb7e7e9d1a99ff9f6b426e94d86bbdf0
---
 .../stylesheets/app/website-redesign.less     | 19 ++++++++++++++++---
 .../stylesheets/components/navbar.less        |  2 +-
 .../stylesheets/variables/colors.less         |  1 +
 .../stylesheets/variables/css-variables.less  |  1 +
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/services/web/frontend/stylesheets/app/website-redesign.less b/services/web/frontend/stylesheets/app/website-redesign.less
index 0b646c3031..45610c922c 100644
--- a/services/web/frontend/stylesheets/app/website-redesign.less
+++ b/services/web/frontend/stylesheets/app/website-redesign.less
@@ -757,15 +757,19 @@
     color: var(--emerald-green);
 
     &:hover {
-      color: var(--green-60);
+      color: var(--emerald-green-dark);
       .right-arrow {
-        background: var(--green-60);
+        color: var(--emerald-green-dark);
       }
     }
   }
 
   .inline-green-link {
-    color: var(--green-50);
+    color: var(--emerald-green);
+
+    &:hover {
+      color: var(--emerald-green-dark);
+    }
     text-decoration: underline;
   }
 
@@ -783,6 +787,15 @@
     }
   }
 
+  .btn-primary {
+    background: var(--emerald-green);
+    color: var(--white);
+
+    &:hover {
+      background: var(--emerald-green-dark);
+    }
+  }
+
   .round-background {
     border-radius: 50%;
     font-size: 1.5rem;
diff --git a/services/web/frontend/stylesheets/components/navbar.less b/services/web/frontend/stylesheets/components/navbar.less
index a140eeb8a5..d8839911dd 100755
--- a/services/web/frontend/stylesheets/components/navbar.less
+++ b/services/web/frontend/stylesheets/components/navbar.less
@@ -673,7 +673,7 @@
       }
 
       > li.primary > a {
-        .btn-borderless();
+        .btn-borderless(@white, @emerald-green, @emerald-green-dark);
       }
 
       > li.secondary > a {
diff --git a/services/web/frontend/stylesheets/variables/colors.less b/services/web/frontend/stylesheets/variables/colors.less
index 5f5b167484..b50e53efca 100644
--- a/services/web/frontend/stylesheets/variables/colors.less
+++ b/services/web/frontend/stylesheets/variables/colors.less
@@ -94,6 +94,7 @@
 
 // == Website Redesign ==
 @emerald-green: #098842;
+@emerald-green-dark: #087a3b;
 @ceil: #9597c9;
 @caramel: #f9d38f;
 @dark-jungle-green: #0f271a;
diff --git a/services/web/frontend/stylesheets/variables/css-variables.less b/services/web/frontend/stylesheets/variables/css-variables.less
index a7326fe81b..0095ca7600 100644
--- a/services/web/frontend/stylesheets/variables/css-variables.less
+++ b/services/web/frontend/stylesheets/variables/css-variables.less
@@ -82,6 +82,7 @@
 
   // website-redesign
   --emerald-green: @emerald-green;
+  --emerald-green-dark: @emerald-green-dark;
   --mint-green: @mint-green;
   --ceil: @ceil;
   --caramel: @caramel;