Merge pull request #17235 from newrelic/tabatha/feedback-styles

Update feedback and PageTools styles
newrelic · May 8, 2024 · de52d6d · de52d6d
2 parents b3a888e + 24320a7
commit de52d6d
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "@emotion/styled": "^11.3.0",
     "@mdx-js/mdx": "2.0.0-next.8",
     "@mdx-js/react": "2.0.0-next.8",
-    "@newrelic/gatsby-theme-newrelic": "9.5.3",
+    "@newrelic/gatsby-theme-newrelic": "9.5.6",
     "@splitsoftware/splitio-react": "^1.2.4",
     "ansi-colors": "^4.1.3",
     "cockatiel": "^3.0.0-beta.0",

diff --git a/src/components/InstallFeedback.js b/src/components/InstallFeedback.js
@@ -98,9 +98,13 @@ const InstallFeedback = () => {
       base={Surface.BASE.PRIMARY}
       css={css`
         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 +134,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 +155,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 +180,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 +232,7 @@ const InstallFeedback = () => {
                 }
                 flex-direction: column;
                 p {
-                  color: #1d252c;
+                  color: var(--primary-text-color);
                 }
 
                 p,
@@ -316,17 +314,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;

diff --git a/src/pages/attribute-dictionary.js b/src/pages/attribute-dictionary.js
@@ -2,7 +2,6 @@ import React, { memo, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import {
-  ContributingGuidelines,
   Layout,
   Link,
   Tag,
@@ -23,7 +22,7 @@ import ErrorBoundary from '../components/ErrorBoundary';
 
 import events from '../data/attribute-dictionary.json';
 
-const AttributeDictionary = ({ pageContext, location }) => {
+const AttributeDictionary = ({ location }) => {
   const [filteredEvents, setFilteredEvents] = useState([]);
   const [filteredAttribute, setFilteredAttribute] = useState(null);
   const [searchedAttribute, setSearchedAttribute] = useState(null);
@@ -150,18 +149,13 @@ const AttributeDictionary = ({ pageContext, location }) => {
         >
           <DataDictionaryFilter events={events} location={location} />
           <ComplexFeedback pageTitle="Attribute dictionary" />
-          <ContributingGuidelines
-            fileRelativePath={pageContext.fileRelativePath}
-            issueLabels={['feedback', 'feedback-issue']}
-          />
         </Layout.PageTools>
       </div>
     </ErrorBoundary>
   );
 };
 
 AttributeDictionary.propTypes = {
-  pageContext: PropTypes.object.isRequired,
   location: PropTypes.shape({
     pathname: PropTypes.string.isRequired,
   }).isRequired,

diff --git a/src/pages/install/{installConfig.agentName}.js b/src/pages/install/{installConfig.agentName}.js
@@ -285,6 +285,7 @@ const InstallPage = ({ data, location }) => {
         </Layout.Content>
         <Layout.PageTools
           css={css`
+            gap: 0;
             @media (max-width: 1240px) {
               display: none;
             }

diff --git a/src/templates/docPage.js b/src/templates/docPage.js
@@ -134,6 +134,7 @@ const BasicDoc = ({ data, location, pageContext }) => {
           <Layout.PageTools
             css={css`
               background: var(--primary-background-color);
+              gap: 0;
               top: calc(var(--global-header-height) + 3rem);
               &.page-tools-transition-enter {
                 translate: calc(var(--sidebar-width) - 50px);
@@ -168,6 +169,20 @@ const BasicDoc = ({ data, location, pageContext }) => {
               pageTitle={title}
               fileRelativePath={fileRelativePath}
               issueLabels={['feedback', 'feedback-issue']}
+              css={css`
+                margin-top: 1rem;
+                background: var(--system-text-primary-dark);
+
+                .dark-mode && {
+                  background: var(--erno-black);
+                }
+                a {
+                  color: var(--primary-system-text);
+                  font-size: 1rem;
+                  border-radius: 3px;
+                  border: none;
+                }
+              `}
             />
           </Layout.PageTools>
         </CSSTransition>

diff --git a/yarn.lock b/yarn.lock
@@ -3629,10 +3629,10 @@
     eslint-plugin-promise "^4.2.1"
     eslint-plugin-react "^7.14.3"
 
-"@newrelic/gatsby-theme-newrelic@9.5.3":
-  version "9.5.3"
-  resolved "https://registry.yarnpkg.com/@newrelic/gatsby-theme-newrelic/-/gatsby-theme-newrelic-9.5.3.tgz#8abe60c90654199d21b57f3f5ca79484aea71a5f"
-  integrity sha512-02+5/lbYueDxcnrUfPVOpg8EBRoKv2/DZwMd1Y+bCi4f8KGR+eFXb4AUORpHWAtTPjGK7+fSJkkoUObn5wotvg==
+"@newrelic/gatsby-theme-newrelic@9.5.6":
+  version "9.5.6"
+  resolved "https://registry.yarnpkg.com/@newrelic/gatsby-theme-newrelic/-/gatsby-theme-newrelic-9.5.6.tgz#9a72bd30524845eab5ce2b5f6938036c5ad4e3ae"
+  integrity sha512-oVglC8G/Q/suEi6gWjVWQhY+Yqb6azJAqUwh9+hpA0IzMysuxc3bPd4CDRUY6Ppkb50XkLThxI9dusQqKdWFFQ==
   dependencies:
     "@segment/analytics-next" "1.63.0"
     "@wry/equality" "^0.4.0"