update InstallFeedback styles to be more cohesive with site design

newrelic · May 8, 2024 · d0ef6a4 · d0ef6a4
1 parent 12aed16
commit d0ef6a4
Showing 1 changed file with 22 additions and 22 deletions.
diff --git a/src/components/InstallFeedback.js b/src/components/InstallFeedback.js
@@ -97,10 +97,16 @@ const InstallFeedback = () => {
     <Surface
       base={Surface.BASE.PRIMARY}
       css={css`
+        --product-blue: #0e74df;
+        --product-blue-hover: #0958a9;
         padding: 2rem;
+        margin: 1rem;
         margin-bottom: 2rem;
-        border: 1px solid #1dcad3;
-        background-color: #afe2e3;
+        border: none;
+        background: var(--system-text-primary-dark);
+        .dark-mode && {
+          background: var(--erno-black);
+        }
       `}
     >
       {!formSubmitted ? (
@@ -130,9 +136,10 @@ const InstallFeedback = () => {
             >
               <h2
                 css={css`
+                  font-weight: 500;
                   margin-bottom: 0;
                   text-align: center;
-                  color: #1d252c;
+                  color: var(--primary-text-color);
                 `}
               >
                 {t('strings.installFeedback.question')}
@@ -150,12 +157,12 @@ const InstallFeedback = () => {
                   onClick={() => handleClick()}
                   css={css`
                     font-size: 1.25rem;
-                    color: #00586f;
-                    border: 1px solid #00586f;
-                    border-radius: 0.5rem;
+                    font-weight: 500;
+                    color: var(--system-text-primary-dark);
+                    background: var(--product-blue);
+                    border-radius: 4px;
                     padding: 1rem 2rem;
                     margin-right: 0.5rem;
-                    transition: color 200ms, border-color 200ms;
                     @media screen and (max-width: 1500px) {
                       margin-top: 1rem;
                     }
@@ -175,18 +182,11 @@ const InstallFeedback = () => {
                     }
 
                     svg {
-                      transition: fill 200ms;
+                      fill: var(--system-text-primary-dark);
                     }
 
                     &:hover {
-                      border-color: #0095a9;
-                      color: #0095a9;
-                      transition: color 200ms, border-color 200ms;
-
-                      svg {
-                        fill: #0095a9;
-                        transition: fill 200ms;
-                      }
+                      background: var(--product-blue-hover);
                     }
                   `}
                 >
@@ -234,7 +234,7 @@ const InstallFeedback = () => {
                 }
                 flex-direction: column;
                 p {
-                  color: #1d252c;
+                  color: var(--primary-text-color);
                 }
 
                 p,
@@ -316,17 +316,17 @@ const InstallFeedback = () => {
                   css={css`
                     font-size: 1.25rem;
                     margin: 0.5rem auto 0;
-                    border-radius: 0.5rem;
+                    border-radius: 4px;
                     padding: 1rem 2rem;
                     height: 3rem;
-                    background: #00586f;
+                    background: var(--product-blue);
                     color: var(--system-text-primary-dark);
-                    &:hover {
-                      background: #0095a9;
-                    }
+                    &:hover,
                     .dark-mode &:hover {
                       color: var(--system-text-primary-dark);
+                      background: var(--product-blue-hover);
                     }
+
                     &:disabled,
                     .dark-mode &:disabled {
                       cursor: not-allowed;