diff --git a/frontend/src/metabase/components/BrowseApp.jsx b/frontend/src/metabase/components/BrowseApp.jsx
index 4952947395bf83e1be803016a4cce70b9bee7d30..7caabfc49d015481d8df65d3ab788a7971d36ede 100644
--- a/frontend/src/metabase/components/BrowseApp.jsx
+++ b/frontend/src/metabase/components/BrowseApp.jsx
@@ -101,7 +101,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" },
diff --git a/frontend/src/metabase/components/Card.jsx b/frontend/src/metabase/components/Card.jsx
index e6072c9ac137922ff8073cca40cebef9117373c6..13b9acedd4ba53024bc2bd54efc20e71536cd3b8 100644
--- a/frontend/src/metabase/components/Card.jsx
+++ b/frontend/src/metabase/components/Card.jsx
@@ -5,14 +5,17 @@ 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;
+ line-height: 24px;
${props =>
props.hoverable &&
`&:hover {
- box-shadow: 0 5px 16px ${alpha(colors["shadow"], 0.1)};
+ box-shadow: 0 10px 22px ${alpha(colors["shadow"], 0.09)};
}`};
`;
diff --git a/frontend/src/metabase/components/CollectionLanding.jsx b/frontend/src/metabase/components/CollectionLanding.jsx
index 8612d0853c02ae955e30c0ea868101af8d8422d7..73b35294b1065e7d606ed01ff30f1408af7cda82 100644
--- a/frontend/src/metabase/components/CollectionLanding.jsx
+++ b/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";
@@ -308,8 +308,8 @@ export const NormalItem = ({
onToggleSelected,
onMove,
}) => (
- <Link to={item.getUrl()}>
- <EntityItem
+ <Link to={item.getUrl()} className="block">
+ <EntityListItem
showSelect={selection.size > 0}
selectable
item={item}
@@ -414,7 +414,7 @@ class CollectionLanding extends React.Component {
return (
<Box>
<Box>
- <Flex align="center" mt={2} mb={3} mx={4}>
+ <Flex align="center" my={3} mx={4}>
<Box>
<Box mb={1}>
<BrowserCrumbs
@@ -430,7 +430,9 @@ 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">
diff --git a/frontend/src/metabase/components/EntityItem.jsx b/frontend/src/metabase/components/EntityItem.jsx
index b77542e0675cdeaa7eb348020405d38364420e8a..a711682fd47e2a31c94ad32f684ca750acc406df 100644
--- a/frontend/src/metabase/components/EntityItem.jsx
+++ b/frontend/src/metabase/components/EntityItem.jsx
@@ -1,7 +1,7 @@
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";
@@ -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 {
@@ -20,6 +20,14 @@ const EntityItemWrapper = Flex.extend`
}
`;
+export const EntityListItem = props => <EntityItem {...props} />;
+
+export const EntityCardItem = props => (
+ <Box my={1}>
+ <EntityItem {...props} />
+ </Box>
+);
+
const EntityItem = ({
name,
iconName,
@@ -55,7 +63,7 @@ const EntityItem = ({
<EntityItemWrapper py={2} className="hover-parent hover--visibility">
<IconWrapper
p={1}
- mr={1}
+ mr={2}
align="center"
justify="center"
onClick={
@@ -70,11 +78,13 @@ const EntityItem = ({
{selectable ? (
<Swapper
startSwapped={selected}
- defaultElement={<Icon name={iconName} color={iconColor} />}
- swappedElement={<CheckBox checked={selected} />}
+ defaultElement={
+ <Icon name={iconName} color={iconColor} size={18} />
+ }
+ swappedElement={<CheckBox checked={selected} size={18} />}
/>
) : (
- <Icon name={iconName} color={iconColor} />
+ <Icon name={iconName} color={iconColor} size={18} />
)}
</IconWrapper>
<h3>
diff --git a/frontend/src/metabase/components/ItemTypeFilterBar.jsx b/frontend/src/metabase/components/ItemTypeFilterBar.jsx
index 5e2cbf2b0b0ba22b86aa221d112a110692cdec66..72d95c6fac0b082907f2c29d4a50bdec0a6ead81 100644
--- a/frontend/src/metabase/components/ItemTypeFilterBar.jsx
+++ b/frontend/src/metabase/components/ItemTypeFilterBar.jsx
@@ -34,7 +34,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;
diff --git a/frontend/src/metabase/containers/Overworld.jsx b/frontend/src/metabase/containers/Overworld.jsx
index 74eca11aecc53e904279a867de8486eea39fc3d3..32bc06c1c33de863c556fa247e71a39089015030 100644
--- a/frontend/src/metabase/containers/Overworld.jsx
+++ b/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>
diff --git a/frontend/test/internal/__snapshots__/components.unit.spec.js.snap b/frontend/test/internal/__snapshots__/components.unit.spec.js.snap
index 70fb8030fb5b216bb6e5ccefa1a879224d149b02..cc07a5ea1568a173a9a8a47cc8c71001b35c17de 100644
--- a/frontend/test/internal/__snapshots__/components.unit.spec.js.snap
+++ b/frontend/test/internal/__snapshots__/components.unit.spec.js.snap
@@ -2,7 +2,7 @@
exports[`Card should render "dark" correctly 1`] = `
<div
- className="Card-RQot jvlGhM"
+ className="Card-RQot fgzjUV"
>
<div
className="p4"
@@ -14,7 +14,7 @@ exports[`Card should render "dark" correctly 1`] = `
exports[`Card should render "hoverable" correctly 1`] = `
<div
- className="Card-RQot lhSKsP"
+ className="Card-RQot gCQWtx"
>
<div
className="p4"
@@ -26,7 +26,7 @@ exports[`Card should render "hoverable" correctly 1`] = `
exports[`Card should render "normal" correctly 1`] = `
<div
- className="Card-RQot eykJzW"
+ className="Card-RQot krKrLM"
>
<div
className="p4"