fix(NavBar): Ensure buttons display correctly in iOS

ticketmaster · Jul 2, 2018 · e3d5a3c · e3d5a3c
1 parent fb9fcbc
commit e3d5a3c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/src/components/NavBar/Buttons.js b/src/components/NavBar/Buttons.js
@@ -8,7 +8,11 @@ import User from "../Icons/User";
 import colors from "../../theme/colors";
 import spacing from "../../theme/spacing";
 import typography from "../../theme/typography";
-import { mediumAndUp, largeAndUp } from "../../theme/mediaQueries";
+import {
+  mediumAndUp,
+  largeAndUp,
+  xSmallAndDown
+} from "../../theme/mediaQueries";
 import getRelByTarget from "../../utils/link";
 
 const BaseButton = styled.button`
@@ -19,6 +23,8 @@ const BaseButton = styled.button`
   text-decoration: none;
   border: 0;
   height: 60px;
+  outline: 0;
+  appearance: none;
   padding-right: ${({ isLast }) =>
     isLast ? spacing.gutters.small : parseInt(spacing.normal, 10) / 2}px;
   padding-left: ${({ isFirst }) =>
@@ -85,7 +91,10 @@ Button.defaultProps = {
 };
 
 const LogoBtn = styled(Button)`
-  ${largeAndUp`
+  ${xSmallAndDown`
+    padding-left: 0;
+    padding-right: 0;
+  `} ${largeAndUp`
     padding-left: ${spacing.gutters.mediumAndUp}px;
   `};
 `;

diff --git a/src/components/NavBar/__tests__/__snapshots__/index.spec.js.snap b/src/components/NavBar/__tests__/__snapshots__/index.spec.js.snap
@@ -268,7 +268,7 @@ exports[`NavBar renders fixed 1`] = `
   }
 }
 
-@media screen and (min-width:320px) {
+@media screen and (max-width:320px) {
   .c3 {
     padding-left: 0;
     padding-right: 0;
@@ -719,7 +719,7 @@ exports[`NavBar renders inverted 1`] = `
   }
 }
 
-@media screen and (min-width:320px) {
+@media screen and (max-width:320px) {
   .c3 {
     padding-left: 0;
     padding-right: 0;