fix: Update sign-up buttons in footer

This will update the buttons in the "Get started today" footer to use the semantic-token-style class names and colors for the "primary" and "primary-accent" buttons.
newrelic · May 9, 2022 · e99fba6 · e99fba6
1 parent ef6b1e3
commit e99fba6
Showing 1 changed file with 35 additions and 9 deletions.
diff --git a/src/components/GetStartedFooter.js b/src/components/GetStartedFooter.js
@@ -10,8 +10,16 @@ const GetStartedFooter = () => {
   return (
     <div
       css={css`
-        --nr-green: #1ce783;
-        --nr-black: #1d252c;
+        --nr1--color--accent: #1ce783;
+        --nr1--color--text--primary: #293338;
+
+        --nr1--color--background--button--primary--enabled: #293338;
+        --nr1--color--background--button--primary--hover: #000;
+        --nr1--color--text--buttton--primary: #fafbfb;
+
+        --nr1--color--background--button--primary-accent--enabled: #1CE78;
+        --nr1--color--background--button--primary-accent--hover: #00ce7c;
+        --nr1--color--text--buttton--primary-accent: #000;
 
         width: 100%;
         height: 120px;
@@ -22,10 +30,10 @@ const GetStartedFooter = () => {
 
         font-size: 33px;
 
-        background-color: var(--nr-green);
+        background-color: var(--nr1--color--accent);
 
         > h3 {
-          color: var(--nr-black);
+          color: var(--nr1--color--text--primary);
 
           font-family: Söhne-Buch;
           font-size: 44px;
@@ -91,8 +99,17 @@ const GetStartedFooter = () => {
           as={ExternalLink}
           href={SIGNUP_LINK}
           css={css`
-            background-color: var(--nr-black);
-            color: var(--nr-green);
+            background-color: var(
+              --nr1--color--background--button--primary--enabled
+            );
+            color: var(--nr1--color--text--buttton--primary);
+
+            &:hover {
+              background-color: var(
+                --nr1--color--background--button--primary--hover
+              );
+              color: var(--nr1--color--text--buttton--primary);
+            }
           `}
         >
           Sign Up
@@ -101,9 +118,18 @@ const GetStartedFooter = () => {
           as={ExternalLink}
           href={DEMO_LINK}
           css={css`
-            background-color: var(--nr-green);
-            color: var(--nr-black);
-            border: 1px solid var(--nr-black);
+            background-color: var(
+              --nr1--color--background--button--primary-accent--enabled
+            );
+            color: var(--nr1--color--text--buttton--primary-accent);
+            border: 1px solid var(--nr1--color--text--buttton--primary-accent);
+
+            &:hover {
+              background-color: var(
+                --nr1--color--background--button--primary-accent--hover
+              );
+              color: var(--nr1--color--text--buttton--primary-accent);
+            }
           `}
         >
           Get Demo