Skip to content
This repository has been archived by the owner on Dec 8, 2023. It is now read-only.

Commit

Permalink
fix: add import for QUICKSTARTS_REPO
Browse files Browse the repository at this point in the history 
* QUICKSTARTS_REPO was not being imported here, this did not break
  because a quickstart will never not have a packUrl.
* Some formatting fixes as well
  • Loading branch information
@aswanson-nr
aswanson-nr committed May 20, 2022
1 parent ea08da1 commit 671b51f
Showing 1 changed file with 84 additions and 82 deletions.
166 changes: 84 additions & 82 deletions src/components/LandingPageFooter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import { Link, Button, PageTools } from '@newrelic/gatsby-theme-newrelic';
import { css } from '@emotion/react';
import { quickstart } from '../types';
import { QUICKSTARTS_REPO } from '../data/constants';
import SupportSection from './SupportSection';
import ExternalLink from '@newrelic/gatsby-theme-newrelic/src/components/ExternalLink';
import RelatedResources from './RelatedResources';
Expand All @@ -18,58 +19,62 @@ const LandingPageFooter = ({
<>
<div
css={css`
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
grid-auto-rows: minmax(100px, auto);
font-size: 18px;
display: grid;
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);
h6{
margin-bottom: 15px;
margin-top: 45px;
}
}
@media (max-width: 760px) {
grid-template-columns: repeat(1, 1fr);
h6 {
margin-bottom: 15px;
margin-top: 45px;
}
}
@media (min-width: 760px) {
margin-top: 11px;
h6 {
line-height: 32px;
font-weight: 400;
}
}
@media (min-width: 760px) {
margin-top: 11px;
h6 {
line-height: 32px;
font-weight: 400;
}
}
@media not all and (min-resolution:.001dpcm) and max-width: 760px {
@media {
grid-template-columns: repeat(1, 1fr);
margin-left: 40px;
margin-right: 23px;
}}
`}>
@media not all and (min-resolution: 0.001dpcm) and max-width: 760px {
@media {
grid-template-columns: repeat(1, 1fr);
margin-left: 40px;
margin-right: 23px;
}
}
`}
>
<div>
<h6
css={css`
height: 32px;
margin-bottom: 66px;
`}>
height: 32px;
margin-bottom: 66px;
`}
>
Authors
</h6>
<p
css={css`
line-height: 28px;
`}>
line-height: 28px;
`}
>
{quickstart.authors.join(', ')}
</p>
</div>

<div>
<h6
css={css`
height: 32px;
margin-bottom: 58px;
`}>
height: 32px;
margin-bottom: 58px;
`}
>
Support
</h6>
<div>
Expand All @@ -83,28 +88,29 @@ const LandingPageFooter = ({
<div>
<h6
css={css`
height: 64px;
margin-bottom: 33px;
`} >
height: 64px;
margin-bottom: 33px;
`}
>
Collaborate on this quickstart
</h6>
<div>
<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;
font-weight: 400;
&:hover{
color: var(--white-hover-color);
}
background: var(--background-color);
color: var(--btn-text-color);
border-radius: 4px;
padding: 13.5px 20px 13.5px 22px;
column-gap: 14.45px;
font-weight: 400;
&:hover {
color: var(--white-hover-color);
}
@media (max-width: 760px) {
width: 100%;
}
`}
@media (max-width: 760px) {
width: 100%;
}
`}
as={Link}
variant={Button.VARIANT.OUTLINE}
to={quickstartUrl}
Expand All @@ -117,8 +123,8 @@ const LandingPageFooter = ({
</div>
<div
css={css`
margin-top: 14px;
`}
margin-top: 14px;
`}
>
<Button
as={ExternalLink}
Expand All @@ -130,55 +136,51 @@ const LandingPageFooter = ({
category: 'BuildYourOwnQuickstartClick',
}}
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;
font-weight: 400;
height: 48px;
&:hover{
color: var(--white-hover-color);
}
background: var(--background-color);
color: var(--btn-text-color);
border-radius: 4px;
padding: 13.5px 20px 13.5px 22px;
column-gap: 14.45px;
font-weight: 400;
height: 48px;
&:hover {
color: var(--white-hover-color);
}
@media (max-width: 760px) {
width: 100%;
}
`}
@media (max-width: 760px) {
width: 100%;
}
`}
>
<TickIconSVG
className="Tick" />
<TickIconSVG className="Tick" />
Build your own
</Button>
</div>
</div>

<div
css={
css`
margin-bottom: 68px;
`
}>
css={css`
margin-bottom: 68px;
`}
>
<h6
css={css`
height: 32px;
margin-bottom: 67px;
`}>
height: 32px;
margin-bottom: 67px;
`}
>
Related resources
</h6>
<RelatedResources
css={css`
padding: 0;
`}
padding: 0;
`}
resources={quickstart.relatedResources}
/>

</div>
</div>
</>

);

};

LandingPageFooter.propTypes = {
Expand Down

0 comments on commit 671b51f

Please sign in to comment.