spacing and sizing

frontend/src/metabase/components/BrowseApp.jsx

@@ -109,7 +109,7 @@ export class TableBrowser extends React.Component {
           {({ tables, loading, error }) => {
             return (
               <Box>
-                <Box my={2}>
+                <Box mt={3} mb={2}>
                   <BrowserCrumbs
                     crumbs={[
                       { title: t`Our data`, to: "browse" },

frontend/src/metabase/components/CollectionLanding.jsx

@@ -414,7 +414,7 @@ class CollectionLanding extends React.Component {
     return (
       <Box>
         <Box>
-          <Flex align="center" mt={2} mb={3} mx={4}>
+          <Flex align="center" mt={3} mb={3} mx={4}>
             <Box>
               <Box mb={1}>
                 <BrowserCrumbs
@@ -430,7 +430,7 @@ class CollectionLanding extends React.Component {
                   ]}
                 />
               </Box>
-              <h1 style={{ fontWeight: 900 }}>{currentCollection.name}</h1>
+              <h2 style={{ fontWeight: 900 }} className="pt1">{currentCollection.name}</h2>
             </Box>
 
             <Flex ml="auto">

frontend/src/metabase/components/EntityItem.jsx

@@ -12,7 +12,7 @@ import Icon from "metabase/components/Icon";
 import colors from "metabase/lib/colors";
 
 const EntityItemWrapper = Flex.extend`
-  border-bottom: 1px solid ${colors["bg-light"]};
+  border-bottom: 1px solid ${colors["bg-medium"]};
   /* TODO - figure out how to use the prop instead of this? */
   align-items: center;
   &:hover {
@@ -52,10 +52,10 @@ const EntityItem = ({
   ].filter(action => action);
 
   return (
-    <EntityItemWrapper py={2} className="hover-parent hover--visibility">
+    <EntityItemWrapper pb={1} pt={2} className="hover-parent hover--visibility">
       <IconWrapper
-        p={1}
-        mr={1}
+        p={2}
+        mr={2}
         align="center"
         justify="center"
         onClick={

frontend/src/metabase/components/ItemTypeFilterBar.jsx

@@ -29,7 +29,7 @@ export const FILTERS = [
 const ItemTypeFilterBar = props => {
   const { location } = props;
   return (
-    <Flex align="center" className="border-bottom">
+    <Flex align="center" className="border-bottom mt1">
       {props.filters.map(f => {
         let isActive = location.query.type === f.filter;