Merge pull request #268 from newrelic/tabatha/align-catalog-headers

Align catalog headers and carousel margins
newrelic · Jul 12, 2022 · 31427bf · 31427bf
2 parents fbd4898 + 299d7ff
commit 31427bf
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/src/components/QuickstartDashboards.js b/src/components/QuickstartDashboards.js
@@ -25,9 +25,9 @@ const QuickstartDashboards = ({ quickstart }) => {
         css={css`
           width: 62px;
           height: 62px;
-          margin-left: -3.5rem;
+          margin-left: -2rem;
           @media screen and (max-width: ${MOBILE_BREAKPOINT}) {
-            margin-left: -1.5rem;
+            margin-left: -1.6rem;
           }
         `}
       />
@@ -38,9 +38,9 @@ const QuickstartDashboards = ({ quickstart }) => {
         css={css`
           width: 62px;
           height: 62px;
-          margin-right: -3.5rem;
+          margin-right: -2rem;
           @media screen and (max-width: ${MOBILE_BREAKPOINT}) {
-            margin-right: -2rem;
+            margin-right: -1.5rem;
           }
         `}
       />

diff --git a/src/components/styles.scss b/src/components/styles.scss
@@ -101,7 +101,7 @@ input[type='text'] {
 }
 
 .slick-list {
-  margin: 0 -2px !important;
+  margin: 0 -6.5px !important;
 }
 
 .slick-dots li button {
@@ -110,6 +110,10 @@ input[type='text'] {
 
 .slick-prev {
   z-index: 100;
+  left: -27px !important;
+}
+.slick-next {
+  right: -28px !important;
 }
 
 .slick-disabled .arrow-bg {
@@ -125,13 +129,14 @@ input[type='text'] {
   display: flex !important;
   margin-top: 2px;
   flex-direction: row;
-  column-gap: 15px;
+  column-gap: 0px;
   flex-wrap: nowrap;
   align-items: flex-start;
 }
 
 .slick-slide {
   height: inherit !important;
+  margin: 6.5px !important;
 }
 
 @media only screen and (max-width: 425px) {

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -30,7 +30,7 @@ const TRIPLE_COLUMN_BREAKPOINT = '1420px';
 const DOUBLE_COLUMN_BREAKPOINT = '1180px';
 const SINGLE_COLUMN_BREAKPOINT = '900px';
 const COLUMN_BREAKPOINT = '1131px';
-//used to set the height of the Spinner to reduce layout shift on page load
+// used to set the height of the Spinner to reduce layout shift on page load
 const TILE_HEIGHT = '362px';
 
 /**
@@ -384,7 +384,7 @@ const QuickstartsPage = ({ data, location }) => {
         >
           <div
             css={css`
-              padding: 32px 0 32px 32px;
+              padding: 24px 0 32px 32px;
               height: 100%;
               overflow: auto;
 
@@ -393,7 +393,7 @@ const QuickstartsPage = ({ data, location }) => {
                 font-size: 28px;
                 line-height: 36px;
                 font-weight: normal;
-                margin-bottom: 12px;
+                margin-bottom: 23px;
                 letter-spacing: -0.5px;
               }
               @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
@@ -589,7 +589,7 @@ const QuickstartsPage = ({ data, location }) => {
                       font-size: 16px;
                       color: var(--color-neutrals-800);
                       align-text: center;
-                      margin: 0 0 13px 4px;
+                      margin: 0 0 13px 0;
                       span {
                       }
                       strong {
@@ -641,7 +641,7 @@ const QuickstartsPage = ({ data, location }) => {
                   font-size: 16px;
                   color: var(--color-neutrals-800);
                   align-text: center;
-                  margin: 75px 0 13px 4px;
+                  margin: 75px 0 13px 0;
 
                   strong {
                     font-family: 'Söhne-Leicht';