From 63b72e5eceb6746a0d2e8e14b9c9096a732fe18a Mon Sep 17 00:00:00 2001
From: Oscar Martinez <oscar.martinez@ticketmaster.com>
Date: Tue, 14 Aug 2018 14:26:30 -0700
Subject: [PATCH] fix(HeaderWithImage): Padding for xlarge screen & breakpoint
 update

---
 src/components/Header/WithImage.js            |  8 +++--
 .../__snapshots__/WithImage.spec.js.snap      | 36 ++++++++++++++++---
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/components/Header/WithImage.js b/src/components/Header/WithImage.js
index 896afbcc5..3d648fdb4 100644
--- a/src/components/Header/WithImage.js
+++ b/src/components/Header/WithImage.js
@@ -6,7 +6,7 @@ import classNames from "classnames";
 import Gradient from "../Gradient";
 import Container from "../Grid/Container";
 import Row from "../Grid/Row";
-import { smallAndUp } from "../../theme/mediaQueries";
+import { mediumAndUp, xLargeAndUp } from "../../theme/mediaQueries";
 
 const GradientBackground = Gradient.extend`
   position: absolute;
@@ -37,10 +37,14 @@ const ContainerRow = styled(Row)`
   align-items: center;
   position: relative;
   z-index: 2;
+  ${xLargeAndUp`
+    padding-left: 72px;
+    padding-right: 72px;
+  `};
 `;
 
 const ImageWrapper = styled.div`
-  ${smallAndUp`
+  ${mediumAndUp`
       padding-top: 60px;
     `};
 `;
diff --git a/src/components/Header/__tests__/__snapshots__/WithImage.spec.js.snap b/src/components/Header/__tests__/__snapshots__/WithImage.spec.js.snap
index 087766807..16aae6398 100644
--- a/src/components/Header/__tests__/__snapshots__/WithImage.spec.js.snap
+++ b/src/components/Header/__tests__/__snapshots__/WithImage.spec.js.snap
@@ -152,7 +152,14 @@ exports[`WithImage renders header background image 1`] = `
   }
 }
 
-@media screen and (min-width:480px) {
+@media screen and (min-width:1440px) {
+  .c4 {
+    padding-left: 72px;
+    padding-right: 72px;
+  }
+}
+
+@media screen and (min-width:768px) {
   .c7 {
     padding-top: 60px;
   }
@@ -376,7 +383,14 @@ exports[`WithImage renders header background image correctly when a withOverlay
   }
 }
 
-@media screen and (min-width:480px) {
+@media screen and (min-width:1440px) {
+  .c4 {
+    padding-left: 72px;
+    padding-right: 72px;
+  }
+}
+
+@media screen and (min-width:768px) {
   .c7 {
     padding-top: 60px;
   }
@@ -600,7 +614,14 @@ exports[`WithImage renders header background image correctly when a withUnderlay
   }
 }
 
-@media screen and (min-width:480px) {
+@media screen and (min-width:1440px) {
+  .c4 {
+    padding-left: 72px;
+    padding-right: 72px;
+  }
+}
+
+@media screen and (min-width:768px) {
   .c7 {
     padding-top: 60px;
   }
@@ -822,7 +843,14 @@ exports[`WithImage renders header with image 1`] = `
   }
 }
 
-@media screen and (min-width:480px) {
+@media screen and (min-width:1440px) {
+  .c4 {
+    padding-left: 72px;
+    padding-right: 72px;
+  }
+}
+
+@media screen and (min-width:768px) {
   .c7 {
     padding-top: 60px;
   }