fix: NavBar styling issues

quid · Mar 18, 2019 · c80702b · c80702b
1 parent b9d06e4
commit c80702b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 8 deletions.
diff --git a/packages/react-layouts/src/NavBar/__snapshots__/index.test.js.snap b/packages/react-layouts/src/NavBar/__snapshots__/index.test.js.snap
@@ -17,11 +17,9 @@ exports[`renders the expected markup 1`] = `
 }
 
 .emotion-0 {
-  padding-top: calc(3px + 5px);
+  padding-top: 5px;
   padding-left: 5px;
   padding-bottom: 5px;
-  min-width: 0;
-  height: 100%;
 }
 
 .emotion-2 {
@@ -30,6 +28,7 @@ exports[`renders the expected markup 1`] = `
 
 .emotion-4 {
   margin-left: auto;
+  padding-left: calc(5px * 3);
   padding-right: 5px;
 }
 

diff --git a/packages/react-layouts/src/NavBar/index.js b/packages/react-layouts/src/NavBar/index.js
@@ -7,22 +7,20 @@
 // @flow
 import * as React from 'react';
 import styled from '@emotion/styled/macro';
-import { sizes } from '@quid/theme';
+import { withFallback as wf } from '@quid/theme';
 
 type Props = {
   logo?: React.Node,
   breadcrumb?: React.Node,
   tools?: React.Node,
 };
 
-const PADDING = sizes.small;
+const PADDING = wf(({ theme }) => theme.sizes.small);
 
 const Left = styled.div`
-  padding-top: calc(3px + ${PADDING});
+  padding-top: ${PADDING};
   padding-left: ${PADDING};
   padding-bottom: ${PADDING};
-  min-width: 0;
-  height: 100%;
 `;
 
 const Middle = styled.div`
@@ -31,6 +29,7 @@ const Middle = styled.div`
 
 const Right = styled.div`
   margin-left: auto;
+  padding-left: calc(${PADDING} * 3);
   padding-right: ${PADDING};
 `;