From 840fd0c826af96b677d1cf0e01ad34e951c6f08f Mon Sep 17 00:00:00 2001
From: kisielewskik <k.kisielewski.k@gmail.com>
Date: Mon, 7 Feb 2022 08:25:28 +0100
Subject: [PATCH] fix: move subtask's styles of guideTile to parent

---
 src/components/GuideTile/GuideTile.js | 17 ++++-------------
 src/templates/LabOverviewTemplate.js  | 16 +++++++++++++++-
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/components/GuideTile/GuideTile.js b/src/components/GuideTile/GuideTile.js
index 0590a2165..b3755ad95 100644
--- 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
index db9fe5469..26592f6e6 100644
--- 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}