mobile icons and width (#8034)

frontend/src/metabase/components/ItemTypeFilterBar.jsx

@@ -3,6 +3,7 @@ import { Flex } from "grid-styled";
 import { t } from "c-3po";
 import { withRouter } from "react-router";
 
+import Icon from "metabase/components/Icon";
 import Link from "metabase/components/Link";
 
 import colors from "metabase/lib/colors";
@@ -11,18 +12,22 @@ export const FILTERS = [
   {
     name: t`Everything`,
     filter: null,
+    icon: "list",
   },
   {
     name: t`Dashboards`,
     filter: "dashboard",
+    icon: "dashboard",
   },
   {
     name: t`Questions`,
     filter: "card",
+    icon: "beaker",
   },
   {
     name: t`Pulses`,
     filter: "pulse",
+    icon: "pulse",
   },
 ];
 
@@ -47,7 +52,8 @@ const ItemTypeFilterBar = props => {
             }}
             color={color}
             hover={{ color: colors.brand }}
-            mr={2}
+            className="flex-full flex align-center justify-center sm-block"
+            mr={[0, 2]}
             py={1}
             style={{
               borderBottom: `2px solid ${
@@ -55,8 +61,9 @@ const ItemTypeFilterBar = props => {
               }`,
             }}
           >
+            <Icon name={f.icon} className="sm-hide" size={20} />
             <h5
-              className="text-uppercase"
+              className="text-uppercase hide sm-show"
               style={{
                 color: isActive ? colors.brand : colors["text-medium"],
                 fontWeight: 900,

frontend/src/metabase/home/containers/SearchApp.jsx

@@ -15,21 +15,24 @@ import ItemTypeFilterBar, {
   FILTERS,
 } from "metabase/components/ItemTypeFilterBar";
 
+const PAGE_PADDING = [1, 2, 4];
+
 export default class SearchApp extends React.Component {
   render() {
     const { location } = this.props;
     return (
-      <Box mx={4}>
-        <Flex align="center" mb={2} py={3}>
+      <Box mx={PAGE_PADDING}>
+        <Flex align="center" mb={2} py={[2, 3]}>
           <Subhead>{jt`Results for "${location.query.q}"`}</Subhead>
         </Flex>
         <ItemTypeFilterBar
           filters={FILTERS.concat({
             name: t`'Collections`,
             filter: "collection",
+            icon: "all",
           })}
         />
-        <Box w={2 / 3}>
+        <Box w={[1, 2 / 3]}>
           <EntityListLoader
             entityType="search"
             entityQuery={location.query}