feat: NR3156 - Heading tags updated

newrelic · Apr 29, 2022 · ae92a4e · ae92a4e
1 parent 5acb0cc
commit ae92a4e
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 66 deletions.
diff --git a/src/components/EmptyTab.js b/src/components/EmptyTab.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { Button, Icon, Link } from '@newrelic/gatsby-theme-newrelic';
 import { QUICKSTARTS_REPO } from '../data/constants';
+import GitHubIconSVG from '../components/Icons/GitHubIconSVG';
 
 const EmptyTab = ({
   quickstartName,
@@ -39,20 +40,32 @@ const EmptyTab = ({
       `}
     >
       <Button
+        css={css`
+              background: var(--background-color);
+              color: var(--btn-text-color);
+              border-radius: 4px;
+              padding: 13.5px 20px 13.5px 22px;
+              column-gap: 14.45px; 
+              
+              &:hover{
+                color: var(--white-hover-color);
+                background-color: var(--background-color);
+                }
+
+                @media (max-width: 760px) {
+                    width: 100%;
+                }
+            `}
         as={Link}
         variant={Button.VARIANT.PRIMARY}
         to={quickstartUrl}
         rel="noopener noreferrer"
         instrumentation={{ quickstartName }}
       >
-        <Icon
-          name="fe-github"
-          css={css`
-            margin-right: 7px;
-          `}
-        />
+        <GitHubIconSVG className="ViewRepo" />
         View repo
       </Button>
+
     </div>
   </div>
 );

diff --git a/src/components/LandingPageFooter.js b/src/components/LandingPageFooter.js
@@ -26,6 +26,7 @@ const LandingPageFooter = ({
                     grid-template-columns: repeat(4, 1fr);
                     gap: 10px;
                     grid-auto-rows: minmax(100px, auto);
+                    font-size: 18px;
 
                     @media (max-width: 760px) {
                         grid-template-columns: repeat(1, 1fr);
@@ -36,24 +37,27 @@ const LandingPageFooter = ({
                     @media (min-width: 760px) {
                       margin-left: 156px;
                         margin-right: 155px;
-                      h3 {
-                          margin-bottom: 58px
+                      h6 {
+                          margin-bottom: 66px;
+                      }
+                      .collaborate-section {
+                          margin-bottom: 34px !important;
                       }
                     }
           `}>
                 <PageTools.Section>
-                    <h3>
+                    <h6>
                         Authors
-                    </h3>
+                    </h6>
                     <p>
                         {quickstart.authors.join(', ')}
                     </p>
                 </PageTools.Section>
 
                 <PageTools.Section>
-                    <h3>
+                    <h6>
                         Support
-                    </h3>
+                    </h6>
                     <div>
                         <SupportSection
                             supportLevel={quickstart.level}
@@ -63,9 +67,9 @@ const LandingPageFooter = ({
                 </PageTools.Section>
 
                 <PageTools.Section>
-                    <h3>
+                    <h6 className='collaborate-section'>
                         Collaborate on this quickstart
-                    </h3>
+                    </h6>
                     <div>
                         <Button
                             css={css`
@@ -130,9 +134,9 @@ const LandingPageFooter = ({
                 </PageTools.Section>
 
                 <PageTools.Section>
-                    <h3>
+                    <h6>
                         Related Resources
-                    </h3>
+                    </h6>
                     <RelatedResources
                         css={css`
                             padding: 0;

diff --git a/src/components/QuickstartAlerts.js b/src/components/QuickstartAlerts.js
@@ -53,13 +53,14 @@ const QuickstartAlerts = ({ quickstart }) => (
       
           `}
           />
-          <h3
+          <p
             css={css`
+            font-family: 'Söhne-Kräftig';
           margin-top: 16px;
           margin-bottom: 16px;
           `}>
             {alert.name}
-          </h3>
+          </p>
           {alert.details && <p>{alert.details}</p>}
         </Surface>
       ))}

diff --git a/src/components/QuickstartDashboards.js b/src/components/QuickstartDashboards.js
@@ -65,34 +65,39 @@ const QuickstartDashboards = ({ quickstart }) => (
     {quickstart.dashboards.map((dashboard) => (
       <div key={dashboard.name}>
         <div>
-          <h3>{dashboard.name}</h3>
+          <p
+          css={css`
+          font-weight: 700 !important;
+          font-family: 'Söhne-Kräftig';
+
+          `}>
+            {dashboard.name}
+            </p>
           {dashboard.description && <p>{dashboard.description}</p>}
           <Slider {...settings}>
             {dashboard.screenshots.map((imgUrl) => {
               return (
                 <div>
-                  <h3>
-                    <animated.div
-                      css={css`
+                  <animated.div
+                    css={css`
                       display: flex;
                       height: 100%;
                       align-items: center;
                     `}
-                    >
-                      <a href={imgUrl} target="_blank" rel="noreferrer">
-                        <img
-                          src={imgUrl}
-                          css={css`
+                  >
+                    <a href={imgUrl} target="_blank" rel="noreferrer">
+                      <img
+                        src={imgUrl}
+                        css={css`
                             width: 100%;
                             max-height: 400px;
                             border-radius: 4px;
                             border: solid 1px var(--divider-color);
                             padding: 0.25rem;
                           `}
-                        />
-                      </a>
-                    </animated.div>
-                  </h3>
+                      />
+                    </a>
+                  </animated.div>
                 </div>
               );
             })}

diff --git a/src/components/QuickstartDataSources.js b/src/components/QuickstartDataSources.js
@@ -72,13 +72,14 @@ const QuickstartDataSources = ({ quickstart }) => {
              
            `}
             />
-            <h3
+            <p
               css={css`
+                font-family: 'Söhne-Kräftig';
                 margin-top: 16px;
                 margin-bottom: 16px;
                 `}>
               {doc.name}
-            </h3>
+            </p>
 
             {doc.description &&
               <p>

diff --git a/src/components/QuickstartHowToUse.js b/src/components/QuickstartHowToUse.js
@@ -33,29 +33,35 @@ const QuickstartHowToUse = ({
         }
         `}>
         <PageTools.Section>
-          <div
+          <h3
             css={css`
             top: 0;
             padding-top: 0.5rem;
             height: 2.5rem;
             width: 100%;
+            font-weight: 400;
+
+            @media screen and (min-width: 760px){
+            line-height: 50px;
+            margin-bottom: 35px !important;
+            }
+
             @media screen and (max-width: 760px){
               padding-bottom: 58px !important;
+              margin-bottom: 24px !important;
+              line-height: 40px ;
             }
           `}
-          > 
-              <h1
-                css={css`
-                  `}>
-                How to use this quickstart
-              </h1>
-          </div>
+          >
+            How to use this quickstart
+          </h3>
         </PageTools.Section>
 
         <PageTools.Section>
           <ul
-          css={css`
+            css={css`
           color: var(--black-text-color);
+          font-size: 18px;
           `}>
             <li
               css={css`
@@ -121,6 +127,7 @@ const QuickstartHowToUse = ({
             css={css`
                             background: var(--background-color);
                             padding: 13px 20px 14px 20px;
+                            font-weight: 400;
                           `} />
         </PageTools.Section>
       </div>

diff --git a/src/components/QuickstartOverview.js b/src/components/QuickstartOverview.js
@@ -44,10 +44,12 @@ const QuickstartOverview = ({ quickstart }) => {
             skipHtml
             allowedElements={allowedElements}
             css={css`
+            @media screen and (max-width: 760px){
               width: fit-content;
-              margin: 40px;
-              @media screen and (min-width: 1440px) {
-                margin: 104px 156px;
+              margin: 40px 70px 40px 58px;
+            }
+              @media screen and (min-width: 760px) {
+                margin: 104px 155px 104px  168px;
               }
             `}
           >

diff --git a/src/components/WhatsIncluded/Alerts.js b/src/components/WhatsIncluded/Alerts.js
@@ -14,7 +14,6 @@ const Alerts = ({ quickstart }) => {
 
         @media (min-width: 760px) {
           margin-left: 156px;
-            // margin-right: 155px;
         }
 
         @media (max-width: 760px) {
@@ -24,18 +23,19 @@ const Alerts = ({ quickstart }) => {
         `}
         >
             <PageTools.Section>
-                <h2>
+                <h6>
                     Alerts &nbsp;
                     <div
                         css={css`
                         display: inline-block;
-                        background: #D6D6D6;
-                        padding: 4px 6px 4px 6px;
+                        background: var(--background-grey-color);
+                        margin: 0px 8px;
+                        padding: 1px 4px;
                         border-radius: 3px;
                     `}
                     >
                         {quickstart.alerts.length}</div>
-                </h2>
+                </h6>
                 {quickstart.alerts?.length > 0 ? (
                     <QuickstartAlerts quickstart={quickstart} />
                 ) : (

diff --git a/src/components/WhatsIncluded/Dashboards.js b/src/components/WhatsIncluded/Dashboards.js
@@ -9,7 +9,7 @@ const Dashboards = ({ quickstart }) => {
     return (
         <div
             css={css`
-        h1 {
+        h3 {
             margin-bottom: 58px;
         }
 
@@ -26,22 +26,23 @@ const Dashboards = ({ quickstart }) => {
         `}
         >
             <PageTools.Section>
-                <h1>
+                <h3>
                     What&apos;s included?
-                </h1>
-                <h2>
+                </h3>
+                <h6>
                     Dashboard
                     &nbsp;
                     <div
                         css={css`
                         display: inline-block;
-                        background: #D6D6D6;
-                        padding: 4px 6px 4px 6px;
+                        background: var(--background-grey-color);
+                        margin: 0px 8px;
+                        padding: 1px 4px;
                         border-radius: 3px;
                     `}
                     >
                         {quickstart.dashboards.length}</div>
-                </h2>
+                </h6>
                 {quickstart.dashboards?.length > 0 ? (
                     <QuickstartDashboards quickstart={quickstart} />
                 ) : (

diff --git a/src/components/WhatsIncluded/DataSources.js b/src/components/WhatsIncluded/DataSources.js
@@ -22,18 +22,19 @@ const DataSources = ({ quickstart }) => {
         `}
         >
             <PageTools.Section>
-                <h2>
+                <h6>
                     Data Sources &nbsp;
                     <div
                         css={css`
                         display: inline-block;
-                        background: #D6D6D6;
-                        padding: 4px 6px 4px 6px;
+                        background: var(--background-grey-color);
+                        margin: 0px 8px;
+                        padding: 1px 4px;
                         border-radius: 3px;
                     `}
                     >
                         {quickstart.documentation.length}</div>
-                </h2>
+                </h6>
                 {quickstart.documentation?.length > 0 ? (
                     <QuickstartDataSources quickstart={quickstart} />
                 ) : (

diff --git a/src/components/styles.scss b/src/components/styles.scss
@@ -1,12 +1,13 @@
 :root {
   --height-mobile-nav-bar: 60px;
   --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  --link-font-color: black;
+  --link-font-color: #1D252C;
   --hover-color: #1D252C;
   --white-hover-color: #F9FAFA;
   --background-color: #1D252C;
-  --btn-text-color: white;
+  --btn-text-color: #F9FAFA;;
   --black-text-color : #1D252C;
+  --background-grey-color : #D6D6D6;
 }
 h1,h2,h3{
   font-family: 'Söhne-Kräftig';
@@ -96,5 +97,5 @@ input[type='text'] {
 }
 
 .e132irl20 {
-  font-weight: none;
+  font-weight: 400;
 }
diff --git a/src/layouts/QuickStartLayout.js b/src/layouts/QuickStartLayout.js
@@ -7,10 +7,9 @@ import {
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import '../components/styles.scss';
-import '../components/fonts.scss';
 import { QUICKSTARTS_COLLAPSE_BREAKPOINT } from '../data/constants';
-import '../components/fonts.scss';
 import Layout from '../components/Layout';
+import '../components/fonts.scss';
 
 const QuickStartLayout = ({ children }) => {
   return (