fix(NavBar): Adjust padding & spacing

src/components/NavBar/Buttons.js

@@ -8,11 +8,7 @@ import User from "../Icons/User";
 import colors from "../../theme/colors";
 import spacing from "../../theme/spacing";
 import typography from "../../theme/typography";
-import {
-  mediumAndUp,
-  largeAndUp,
-  xSmallAndDown
-} from "../../theme/mediaQueries";
+import { mediumAndUp, largeAndUp } from "../../theme/mediaQueries";
 import getRelByTarget from "../../utils/link";
 
 const BaseButton = styled.button`
@@ -26,9 +22,9 @@ const BaseButton = styled.button`
   outline: 0;
   appearance: none;
   padding-right: ${({ isLast }) =>
-    isLast ? spacing.gutters.small : parseInt(spacing.normal, 10) / 2}px;
+    isLast ? spacing.gutters.small : spacing.gutters.small / 2}px;
   padding-left: ${({ isFirst }) =>
-    isFirst ? spacing.gutters.small : parseInt(spacing.normal, 10) / 2}px;
+    isFirst ? spacing.gutters.small : spacing.gutters.small / 2}px;
   color: ${colors.white.base};
   font-size: ${typography.size.kilo};
   font-weight: ${typography.weight.semiBold};
@@ -91,9 +87,12 @@ Button.defaultProps = {
 };
 
 const LogoBtn = styled(Button)`
-  ${xSmallAndDown`
-    padding-left: 0;
-    padding-right: 0;
+  padding-left: ${spacing.gutters.small / 2}px;
+  padding-right: ${spacing.gutters.small / 2}px;
+
+  ${mediumAndUp`
+    padding-left: ${spacing.gutters.mediumAndUp / 2}px;
+    padding-right: ${spacing.gutters.mediumAndUp / 2}px;
   `} ${largeAndUp`
     padding-left: ${spacing.gutters.mediumAndUp}px;
   `};

src/components/NavBar/__tests__/__snapshots__/index.spec.js.snap

@@ -123,7 +123,7 @@ exports[`NavBar renders fixed 1`] = `
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  padding-right: 12px;
+  padding-right: 8px;
   padding-left: 16px;
   color: rgba(255,255,255,1);
   font-size: 16px;
@@ -156,8 +156,8 @@ exports[`NavBar renders fixed 1`] = `
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  padding-right: 12px;
-  padding-left: 12px;
+  padding-right: 8px;
+  padding-left: 8px;
   color: rgba(255,255,255,1);
   font-size: 16px;
   font-weight: 600;
@@ -168,6 +168,11 @@ exports[`NavBar renders fixed 1`] = `
   font-weight: 400;
 }
 
+.c3 {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
 .c0 {
   top: 0;
   left: 0;
@@ -237,10 +242,6 @@ exports[`NavBar renders fixed 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -268,10 +269,10 @@ exports[`NavBar renders fixed 1`] = `
   }
 }
 
-@media screen and (max-width:320px) {
+@media screen and (min-width:481px) {
   .c3 {
-    padding-left: 0;
-    padding-right: 0;
+    padding-left: 12px;
+    padding-right: 12px;
   }
 }
 
@@ -574,7 +575,7 @@ exports[`NavBar renders inverted 1`] = `
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  padding-right: 12px;
+  padding-right: 8px;
   padding-left: 16px;
   color: rgba(255,255,255,1);
   font-size: 16px;
@@ -607,8 +608,8 @@ exports[`NavBar renders inverted 1`] = `
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  padding-right: 12px;
-  padding-left: 12px;
+  padding-right: 8px;
+  padding-left: 8px;
   color: rgba(255,255,255,1);
   font-size: 16px;
   font-weight: 600;
@@ -619,6 +620,11 @@ exports[`NavBar renders inverted 1`] = `
   font-weight: 400;
 }
 
+.c3 {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
 .c0 {
   top: 0;
   left: 0;
@@ -688,10 +694,6 @@ exports[`NavBar renders inverted 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -719,10 +721,10 @@ exports[`NavBar renders inverted 1`] = `
   }
 }
 
-@media screen and (max-width:320px) {
+@media screen and (min-width:481px) {
   .c3 {
-    padding-left: 0;
-    padding-right: 0;
+    padding-left: 12px;
+    padding-right: 12px;
   }
 }
 
@@ -1041,7 +1043,7 @@ exports[`NavBar renders with defaults 1`] = `
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  padding-right: 12px;
+  padding-right: 8px;
   padding-left: 16px;
   color: rgba(255,255,255,1);
   font-size: 16px;
@@ -1074,8 +1076,8 @@ exports[`NavBar renders with defaults 1`] = `
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  padding-right: 12px;
-  padding-left: 12px;
+  padding-right: 8px;
+  padding-left: 8px;
   color: rgba(255,255,255,1);
   font-size: 16px;
   font-weight: 600;
@@ -1108,7 +1110,7 @@ exports[`NavBar renders with defaults 1`] = `
   -moz-appearance: none;
   appearance: none;
   padding-right: 16px;
-  padding-left: 12px;
+  padding-left: 8px;
   color: rgba(255,255,255,1);
   font-size: 16px;
   font-weight: 600;
@@ -1188,10 +1190,6 @@ exports[`NavBar renders with defaults 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;

src/components/NavBar/index.js

@@ -82,7 +82,6 @@ const Container = styled.div`
   height: 60px;
   position: relative;
   display: flex;
-  justify-content: space-between;
   flex-direction: row;
   align-items: center;
   align-content: center;
@@ -101,8 +100,6 @@ const Right = styled.div`
   flex: 1 0 auto;
   justify-content: flex-end;
   height: 60px;
-  ${mediumAndUp`width: 23%;`};
-  ${largeAndUp`width: 18%;`};
 `;
 
 const Left = styled.div`