Merge pull request #1054 from newrelic/develop

release
newrelic · May 7, 2024 · 0bd9cf2 · 0bd9cf2
2 parents 4a25741 + 455e799
commit 0bd9cf2
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 39 deletions.
diff --git a/demo/src/templates/basic.js b/demo/src/templates/basic.js
@@ -11,6 +11,7 @@ import {
   RelatedResources,
   SimpleFeedback,
   TableOfContents,
+  ComplexFeedback,
 } from '@newrelic/gatsby-theme-newrelic';
 import GitHubSlugger from 'github-slugger';
 import toString from 'mdast-util-to-string';
@@ -71,12 +72,18 @@ const BasicTemplate = ({ data, location }) => {
         </Layout.Content>
 
         <Layout.PageTools>
-          <SimpleFeedback pageTitle="Demo Site" />
+          <TableOfContents
+            headings={headings}
+            css={css`
+              margin-bottom: -1rem;
+            `}
+          />
+          <ComplexFeedback pageTitle={frontmatter.title} />
           <ContributingGuidelines
             fileRelativePath={fields.fileRelativePath}
             pageTitle={frontmatter.title}
           />
-          <TableOfContents headings={headings} />
+          <SimpleFeedback pageTitle="Demo Site" />
           <RelatedResources resources={relatedResources} />
         </Layout.PageTools>
       </Layout.Main>

diff --git a/packages/gatsby-theme-newrelic/src/components/ComplexFeedback.js b/packages/gatsby-theme-newrelic/src/components/ComplexFeedback.js
@@ -12,7 +12,7 @@ import useThemeTranslation from '../hooks/useThemeTranslation';
 import { addPageAction } from '../utils/nrBrowserAgent.js';
 import { FEEDBACK_FORM_TYPE } from '../utils/constants';
 
-const ComplexFeedback = ({ pageTitle }) => {
+const ComplexFeedback = ({ className, pageTitle }) => {
   const [feedbackType, setfeedbackType] = useState(null);
   const [userComments, setUserComments] = useState('');
   const [userEmail, setUserEmail] = useState('');
@@ -97,24 +97,31 @@ const ComplexFeedback = ({ pageTitle }) => {
 
   return (
     <PageTools.Section
+      className={className}
       css={css`
         display: flex;
         border: none;
+        border-radius: 0;
         flex-direction: column;
         max-width: 320px;
-        background: #afe2e3;
+        margin: 0;
+        background: var(--system-text-primary-dark);
+        .dark-mode && {
+          background: var(--erno-black);
+        }
         gap: 1rem;
         p {
-          color: var(--system-text-primary-light);
+          color: var(--primary-text-color);
           margin: 0;
           font-size: 14px;
+          font-weight: 400;
         }
         input::placeholder {
-          color: var(--system-text-primary-light);
+          color: var(--primary-text-color);
         }
         h5,
         h4 {
-          color: var(--system-text-primary-light);
+          color: var(--primary-text-color);
         }
       `}
     >
@@ -140,14 +147,14 @@ const ComplexFeedback = ({ pageTitle }) => {
         </h5>
       ) : (
         <>
-          <h4
+          <p
             css={css`
               margin-bottom: 0;
               text-align: center;
             `}
           >
             {t('feedback.question')}
-          </h4>
+          </p>
           <div
             css={css`
               display: flex;
@@ -157,8 +164,16 @@ const ComplexFeedback = ({ pageTitle }) => {
 
               button {
                 width: 45%;
-                font-size: 14px;
+                font-size: 0.875rem;
+                font-weight: 400;
                 border: none;
+                border-radius: 3px;
+                color: var(--primary-text-color);
+                background: var(--system-text-secondary-dark);
+
+                .dark-mode & {
+                  background: var(--primary-hover-color);
+                }
               }
 
               @supports not (gap: 0.5rem) {
@@ -175,14 +190,6 @@ const ComplexFeedback = ({ pageTitle }) => {
               css={css`
                 height: 3rem;
                 margin-bottom: 0.5rem;
-                color: var(--system-text-primary-light);
-                background: var(--system-background-app-light);
-
-                ${feedbackType === 'yes' &&
-                css`
-                  background: var(--system-text-primary-light);
-                  color: var(--system-text-primary-dark);
-                `}
               `}
             >
               <div
@@ -202,14 +209,6 @@ const ComplexFeedback = ({ pageTitle }) => {
               css={css`
                 height: 3rem;
                 margin-bottom: 0.5rem;
-                color: var(--system-text-primary-light);
-                background: var(--system-background-app-light);
-
-                ${feedbackType === 'no' &&
-                css`
-                  background: var(--system-text-primary-light);
-                  color: var(--system-text-primary-dark);
-                `}
               `}
             >
               <div
@@ -236,7 +235,7 @@ const ComplexFeedback = ({ pageTitle }) => {
                   font-size: 0.75rem;
                   padding: 0.5rem;
                   min-height: 100px;
-                  border-radius: 4px;
+                  border-radius: 3px;
                   border: none;
                 `}
               />
@@ -262,7 +261,7 @@ const ComplexFeedback = ({ pageTitle }) => {
                 css={css`
                   font-size: 0.75rem;
                   padding: 0.5rem;
-                  border-radius: 4px;
+                  border-radius: 3px;
                   border: none;
                 `}
               />
@@ -309,6 +308,7 @@ const ComplexFeedback = ({ pageTitle }) => {
 };
 
 ComplexFeedback.propTypes = {
+  className: PropTypes.string,
   pageTitle: PropTypes.string.isRequired,
 };
 

diff --git a/packages/gatsby-theme-newrelic/src/components/TableOfContents.js b/packages/gatsby-theme-newrelic/src/components/TableOfContents.js
@@ -9,7 +9,7 @@ import useThemeTranslation from '../hooks/useThemeTranslation';
 
 const prop = (name) => (obj) => obj[name];
 
-const TableOfContents = ({ headings }) => {
+const TableOfContents = ({ className, headings }) => {
   const { t } = useThemeTranslation();
   const headingIds = useDeepMemo(() => headings.map(prop('id')), [headings]);
   const activeHash = useActiveHash(headingIds);
@@ -22,10 +22,24 @@ const TableOfContents = ({ headings }) => {
 
   return headings.length === 0 ? null : (
     <PageTools.Section
+      className={className}
       css={css`
         display: flex;
         flex-direction: column;
         min-height: 150px;
+        border: none;
+        border-radius: 0;
+        margin-bottom: 0;
+        background: var(--system-text-primary-dark);
+        border-bottom: 1px solid var(--system-text-disabled-dark);
+
+        .dark-mode && {
+          background: var(--erno-black);
+          border-bottom: 1px solid var(--system-background-hover-dark);
+        }
+        h4 {
+          font-weight: 500;
+        }
       `}
     >
       <PageTools.Title>{t('tableOfContents.title')}</PageTools.Title>
@@ -62,23 +76,25 @@ const TableOfContents = ({ headings }) => {
                     display: flex;
                     align-items: center;
                     font-size: 0.875rem;
-                    padding: 0.5rem 1rem;
+                    padding: 0.5rem 1rem 0.5rem 1.25rem;
                     color: var(--primary-text-color);
                     transition: background-color 0.2s ease-out,
                       color 0.2s ease-out;
                     text-decoration: none;
                     position: relative;
-                    border-left: 4px solid transparent;
+                    font-weight: 400;
+
+                    &:hover {
+                      color: #0E74DF;
+
+                    }
+
 
                     &.active {
-                      background: var(--primary-hover-color);
-                      border-left-color: var(
-                        --system-text-secondary-inverted-light
-                      );
-                      .dark-mode & {
-                        border-left-color: var(
-                          --system-background-selected-low-contrast-dark
-                        );
+                      background: #0E74DF;
+                      color: var(--system-background-app-light);
+                      font-weight: 500;
+                     
                       }
                     }
                   `}
@@ -95,6 +111,7 @@ const TableOfContents = ({ headings }) => {
 };
 
 TableOfContents.propTypes = {
+  className: PropTypes.string,
   headings: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string.isRequired,