Merge pull request #89 from ooHmartY/header-image-fix

fix(HeaderWithImage): Padding for xlarge screen & breakpoint update
ticketmaster · Aug 14, 2018 · d4a75b7 · d4a75b7
2 parents 23dbe6d + 63b72e5
commit d4a75b7
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 6 deletions.
diff --git 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
@@ -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;
   }