From 3aef2077e5131e9f478272e5c763ccb01b8e2453 Mon Sep 17 00:00:00 2001
From: Vince Picone <Vincent.Patrick.Picone@ibm.com>
Date: Tue, 7 May 2019 13:37:59 -0500
Subject: [PATCH] fix: update callout shadows

---
 .../src/gatsby-theme-carbon/templates/Home.js      |  2 +-
 .../src/components/Homepage/Banner.js              |  3 ++-
 .../src/components/Homepage/Callout.js             | 14 ++++++--------
 .../gatsby-theme-carbon/src/templates/Default.js   |  1 -
 packages/gatsby-theme-carbon/src/templates/Home.js |  2 +-
 5 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/example/src/gatsby-theme-carbon/templates/Home.js b/packages/example/src/gatsby-theme-carbon/templates/Home.js
index 8b665d85c..ec7ef1bf8 100644
--- a/packages/example/src/gatsby-theme-carbon/templates/Home.js
+++ b/packages/example/src/gatsby-theme-carbon/templates/Home.js
@@ -58,7 +58,7 @@ const customProps = {
       leftText={SecondLeftText}
       rightText={SecondRightText}
       color="white"
-      backgroundColor="activePrimary"
+      backgroundColor="#061f80"
     />
   ),
 };
diff --git a/packages/gatsby-theme-carbon/src/components/Homepage/Banner.js b/packages/gatsby-theme-carbon/src/components/Homepage/Banner.js
index bf72f8620..8fa08ba00 100644
--- a/packages/gatsby-theme-carbon/src/components/Homepage/Banner.js
+++ b/packages/gatsby-theme-carbon/src/components/Homepage/Banner.js
@@ -7,6 +7,7 @@ const StyledGrid = styled(Grid)`
   background-size: cover;
   background-image: url(${props => props.image});
   height: 50vh;
+  max-height: 560px;
   width: 100%;
   background-position: left bottom;
   ${mq.lg} {
@@ -32,7 +33,7 @@ const StyledColumn = styled(Column)`
 const columCss = ({ typeStyles }) => typeStyles.quotation01;
 
 const HomepageBanner = ({ image, renderText }) => (
-  <StyledGrid style={{ maxWidth: '100%', width: '100%' }} image={image}>
+  <StyledGrid image={image}>
     <StyledRow>
       <StyledColumn css={columCss}>{renderText()}</StyledColumn>
     </StyledRow>
diff --git a/packages/gatsby-theme-carbon/src/components/Homepage/Callout.js b/packages/gatsby-theme-carbon/src/components/Homepage/Callout.js
index e876773f4..956f7cac8 100644
--- a/packages/gatsby-theme-carbon/src/components/Homepage/Callout.js
+++ b/packages/gatsby-theme-carbon/src/components/Homepage/Callout.js
@@ -7,11 +7,11 @@ const StyledGrid = styled(Grid)`
   background-color: ${props =>
     props.theme.colors[props.backgroundColor] ||
     props.backgroundColor ||
-    props.theme.colors.black100};
+    props.theme.colors.interactive02};
   color: ${props =>
     props.theme.colors[props.color] ||
     props.color ||
-    props.theme.colors.black100};};
+    props.theme.colors.inverse01}};
   width: 100%;
 `;
 
@@ -35,6 +35,7 @@ const firstColumn = ({ typeStyles, layout }) => [
     padding: '0 1rem',
     paddingBottom: layout[2],
     width: '100%',
+    fontSize: '1.5rem',
     [mq.md]: {
       width: '33%',
     },
@@ -45,6 +46,7 @@ const secondColumn = ({ typeStyles }) => [
   typeStyles.expressiveParagraph01,
   {
     padding: '0 1rem',
+    fontSize: '1.75rem',
     width: '100%',
     [mq.md]: {
       width: '66%',
@@ -55,12 +57,8 @@ const secondColumn = ({ typeStyles }) => [
 const Callout = ({ leftText, rightText, ...rest }) => (
   <StyledGrid {...rest}>
     <StyledRow>
-      <div style={{ fontSize: '1.5rem' }} css={firstColumn}>
-        {leftText()}
-      </div>
-      <div style={{ fontSize: '1.75rem' }} css={secondColumn}>
-        {rightText()}
-      </div>
+      <div css={firstColumn}>{leftText()}</div>
+      <div css={secondColumn}>{rightText()}</div>
     </StyledRow>
   </StyledGrid>
 );
diff --git a/packages/gatsby-theme-carbon/src/templates/Default.js b/packages/gatsby-theme-carbon/src/templates/Default.js
index aec1ba736..5b6b82991 100644
--- a/packages/gatsby-theme-carbon/src/templates/Default.js
+++ b/packages/gatsby-theme-carbon/src/templates/Default.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { WebsiteBackToTopBtn } from '@carbon/addons-website';
-import styled from '@emotion/styled';
 import Layout from '../components/Layout';
 import PageHeader from '../components/PageHeader';
 // import EditLink from '../components/EditLink';
diff --git a/packages/gatsby-theme-carbon/src/templates/Home.js b/packages/gatsby-theme-carbon/src/templates/Home.js
index b8d2f07be..49d14821a 100644
--- a/packages/gatsby-theme-carbon/src/templates/Home.js
+++ b/packages/gatsby-theme-carbon/src/templates/Home.js
@@ -36,7 +36,7 @@ Homepage.defaultProps = {
     />
   ),
   FirstCallout: <Callout />,
-  SecondCallout: <Callout color="white" backgroundColor="activePrimary" />,
+  SecondCallout: <Callout color="inverse01" backgroundColor="#061f80" />,
 };
 
 export default Homepage;