tweak cards and browse all link

frontend/src/metabase/components/Card.jsx

@@ -5,14 +5,15 @@ import colors, { alpha } from "metabase/lib/colors";
 const Card = styled.div`
   ${space} background-color: ${props =>
       props.dark ? colors["text-dark"] : "white"};
-  border: 1px solid ${props => (props.dark ? "transparent" : colors["border"])};
+  border: 1px solid ${props => (props.dark ? "transparent" : colors["bg-medium"])};
   ${props => props.dark && `color: white`};
   border-radius: 6px;
-  box-shadow: 0 5px 22px ${props => colors["shadow"]};
+  box-shadow: 0 7px 20px ${props => colors["shadow"]};
+  transition: all 0.2s linear;
   ${props =>
     props.hoverable &&
     `&:hover {
-    box-shadow: 0 5px 16px ${alpha(colors["shadow"], 0.1)};
+    box-shadow: 0 10px 22px ${alpha(colors["shadow"], 0.09)};
   }`};
 `;
 

frontend/src/metabase/components/CollectionLanding.jsx

@@ -15,7 +15,7 @@ import Button from "metabase/components/Button";
 import Card from "metabase/components/Card";
 import Modal from "metabase/components/Modal";
 import StackedCheckBox from "metabase/components/StackedCheckBox";
-import EntityItem from "metabase/components/EntityItem";
+import EntityListItem from "metabase/components/EntityItem";
 import { Grid, GridItem } from "metabase/components/Grid";
 import Icon from "metabase/components/Icon";
 import Link from "metabase/components/Link";
@@ -309,7 +309,7 @@ export const NormalItem = ({
   onMove,
 }) => (
   <Link to={item.getUrl()}>
-    <EntityItem
+    <EntityListItem
       showSelect={selection.size > 0}
       selectable
       item={item}
@@ -414,7 +414,7 @@ class CollectionLanding extends React.Component {
     return (
       <Box>
         <Box>
-          <Flex align="center" mt={3} mb={3} mx={4}>
+          <Flex align="center" my={3} mx={4}>
             <Box>
               <Box mb={1}>
                 <BrowserCrumbs

frontend/src/metabase/components/EntityItem.jsx

 import React from "react";
 import { t } from "c-3po";
 
-import { Flex } from "grid-styled";
+import { Box, Flex } from "grid-styled";
 import EntityMenu from "metabase/components/EntityMenu";
 import Swapper from "metabase/components/Swapper";
 import IconWrapper from "metabase/components/IconWrapper";
@@ -20,6 +20,16 @@ const EntityItemWrapper = Flex.extend`
   }
 `;
 
+export const EntityListItem = (props) =>
+    <Box mt={1} mb={2}>
+        <EntityItem {...props} />
+    </Box>
+
+export const EntityCardItem = (props) =>
+    <Box my={1}>
+        <EntityItem {...props} />
+    </Box>
+
 const EntityItem = ({
   name,
   iconName,
@@ -52,7 +62,7 @@ const EntityItem = ({
   ].filter(action => action);
 
   return (
-    <EntityItemWrapper pb={1} pt={2} className="hover-parent hover--visibility">
+    <EntityItemWrapper py={2} className="hover-parent hover--visibility">
       <IconWrapper
         p={2}
         mr={2}

frontend/src/metabase/containers/Overworld.jsx

@@ -146,10 +146,10 @@ class Overworld extends React.Component {
               color={normal.grey2}
               className="text-brand-hover"
             >
-              <Flex bg={colors["bg-light"]} p={2} mb={1} align="center">
+              <Flex bg={colors["bg-light"]} p={2} my={1} align="center">
                 <Box ml="auto" mr="auto">
                   <Flex align="center">
-                    <h3>{t`Browse all items`}</h3>
+                    <h4>{t`Browse all items`}</h4>
                     <Icon name="chevronright" size={14} ml={1} />
                   </Flex>
                 </Box>