fix: move subtask's styles of guideTile to parent

newrelic · Feb 7, 2022 · 840fd0c · 840fd0c
1 parent 5ded8f4
commit 840fd0c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 14 deletions.
diff --git a/src/components/GuideTile/GuideTile.js b/src/components/GuideTile/GuideTile.js
@@ -3,14 +3,7 @@ import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { Link, Icon, Surface } from '@newrelic/gatsby-theme-newrelic';
 
-const GuideTile = ({
-  duration,
-  title,
-  description,
-  className,
-  to,
-  procIdxIsInteger,
-}) => (
+const GuideTile = ({ duration, title, description, className, to }) => (
   <Surface
     as={Link}
     to={to}
@@ -20,8 +13,7 @@ const GuideTile = ({
     css={css`
       display: grid;
       grid-template-rows: auto 1fr auto;
-      width: ${procIdxIsInteger ? '100%' : '90%'};
-      margin-left: ${procIdxIsInteger ? '0' : '10%'};
+      width: 100%;
       border-radius: 0.25rem;
       position: relative;
       padding: 1rem;
@@ -31,7 +23,7 @@ const GuideTile = ({
     <h3
       css={css`
         font-size: 1rem;
-        margin-bottom: ${procIdxIsInteger ? '1rem' : '0.1rem'};
+        margin-bottom: 1rem;
       `}
     >
       {title}
@@ -43,7 +35,7 @@ const GuideTile = ({
         flex: 1;
         text-align: left;
         padding: 0;
-        margin-bottom: ${procIdxIsInteger ? '0.8rem' : '0.1rem'};
+        margin-bottom: 0.8rem;
       `}
     >
       {description}
@@ -74,7 +66,6 @@ GuideTile.propTypes = {
   description: PropTypes.string.isRequired,
   className: PropTypes.string,
   to: PropTypes.string.isRequired,
-  procIdxIsInteger: PropTypes.bool,
 };
 
 export default GuideTile;
diff --git a/src/templates/LabOverviewTemplate.js b/src/templates/LabOverviewTemplate.js
@@ -53,7 +53,21 @@ const LabOverviewTemplate = ({ data, location }) => {
                     );
                     return (
                       <GuideTile
-                        procIdxIsInteger={procIdxIsInteger}
+                        css={css`
+                          width: ${procIdxIsInteger ? '100%' : '90%'};
+                          margin-left: ${procIdxIsInteger ? '0' : '10%'};
+
+                          h3 {
+                            margin-bottom: ${procIdxIsInteger
+                              ? '1rem'
+                              : '0.1rem'};
+                          }
+                          p {
+                            margin-bottom: ${procIdxIsInteger
+                              ? '0.8rem'
+                              : '0.1rem'};
+                          }
+                        `}
                         className={labOverviewStyles.labGuideCard}
                         to={fields.slug}
                         key={index}