Work on cleaning up empty states for the home page and collections (#8106)

* clean up schema picker + add empty state for 'our analytics'

* smaller illustration

* more empty state space

* more reasonable card content size

* lint

* copy tweak [ci skip]

* admin based messaging

* lighten image

* lint

* boo

frontend/src/metabase/components/CollectionLanding.jsx

@@ -47,7 +47,7 @@ const EmptyStateWrapper = ({ children }) => (
   <Flex
     align="center"
     justify="center"
-    py={3}
+    p={5}
     flexDirection="column"
     w={1}
     h={"200px"}

frontend/src/metabase/components/ExplorePane.jsx

@@ -89,10 +89,8 @@ export class ExplorePane extends React.Component {
         )}
         {schemaNames &&
           schemaNames.length > 1 && (
-            <div className="px4 inline-block mb4">
-              <div className="pb1 text-paragraph">
-                Here's the schema I looked at:
-              </div>
+            <div className="flex align-center ml-auto">
+              <div className="mr1">{t`Based on the schema`}</div>
               <Select
                 value={schemaName}
                 onChange={e =>

frontend/src/metabase/containers/Overworld.jsx

@@ -17,6 +17,7 @@ import { Grid, GridItem } from "metabase/components/Grid";
 import Icon from "metabase/components/Icon";
 import Link from "metabase/components/Link";
 import Subhead from "metabase/components/Subhead";
+import RetinaImage from "react-retina-image";
 
 import { getUser } from "metabase/home/selectors";
 
@@ -56,12 +57,13 @@ const PAGE_PADDING = [1, 2, 4];
 })
 class Overworld extends React.Component {
   render() {
+    const { user } = this.props;
     return (
       <Box>
         <Flex px={PAGE_PADDING} pt={3} pb={1} align="center">
           <MetabotLogo />
           <Box ml={2}>
-            <Subhead>{Greeting.sayHello(this.props.user.first_name)}</Subhead>
+            <Subhead>{Greeting.sayHello(user.first_name)}</Subhead>
             <p className="text-paragraph m0 text-grey-3">{t`Don't tell anyone, but you're my favorite.`}</p>
           </Box>
         </Flex>
@@ -78,19 +80,20 @@ class Overworld extends React.Component {
                     return (
                       <Box mx={PAGE_PADDING} mt={2}>
                         <Box mb={1}>
-                          <h4>{t`Not sure where to start?`}</h4>
+                          <h4
+                          >{t`Not sure where to start? Try these x-rays based on your data.`}</h4>
                         </Box>
                         <Card px={3} pb={1}>
                           <ExplorePane
                             candidates={candidates}
                             withMetabot={false}
                             title=""
-                            gridColumns={1 / 3}
+                            gridColumns={[1, 1 / 3]}
                             asCards={false}
                             description={
                               isSample
                                 ? t`Once you connect your own data, I can show you some automatic explorations called x-rays. Here are some examples with sample data.`
-                                : t`I took a look at the data you have connected, and I have some explorations of interesting things I found. Hope you like them!`
+                                : t``
                             }
                           />
                         </Card>
@@ -142,14 +145,32 @@ class Overworld extends React.Component {
           <Box mb={2}>
             <h4>{t`Our analytics`}</h4>
           </Box>
-          <Card p={[2, 3]}>
-            <CollectionList collections={this.props.collections} />
+          <Card p={[1, 2]}>
+            {this.props.collections.filter(
+              c => c.id !== user.personal_collection_id,
+            ).length > 0 ? (
+              <CollectionList collections={this.props.collections} />
+            ) : (
+              <Box className="text-centered">
+                <Box style={{ opacity: 0.5 }}>
+                  <RetinaImage
+                    src="app/img/empty.png"
+                    className="block ml-auto mr-auto"
+                  />
+                </Box>
+                <h3 className="text-medium">
+                  {user.is_superuser
+                    ? t`Save  dashboards, questions, and collections in "Our Analytics"`
+                    : t`Access dashboards, questions, and collections in "Our Analytics"`}
+                </h3>
+              </Box>
+            )}
             <Link
               to="/collection/root"
               color={normal.grey2}
               className="text-brand-hover"
             >
-              <Flex bg={colors["bg-light"]} p={2} my={1} align="center">
+              <Flex color={colors["brand"]} p={2} my={1} align="center">
                 <Box ml="auto" mr="auto">
                   <Flex align="center">
                     <h4>{t`Browse all items`}</h4>

frontend/src/metabase/containers/UserCollectionList.jsx

@@ -47,9 +47,9 @@ const UserCollectionList = () => (
                               name="person"
                               mr={1}
                               color={colors["text-medium"]}
-                              size={22}
+                              size={18}
                             />
-                            <h2>{user.common_name}</h2>
+                            <h3>{user.common_name}</h3>
                           </Flex>
                         </Card>
                       </Link>