tweak crumbs

frontend/src/metabase/components/BrowserCrumbs.jsx

@@ -10,21 +10,32 @@ const BrowseHeader = ({ children }) => (
   <h2 style={{ fontWeight: 900 }}>{children}</h2>
 );
 
+const Crumb = ({ children }) => (
+  <h5 className="text-uppercase" style={{ color: "#93A1AB", fontWeight: 900 }}>
+    {children}
+  </h5>
+);
+
 const BrowserCrumbs = ({ crumbs }) => (
-  <Box>
+  <Flex align="center">
     {crumbs.filter(c => c).map((crumb, index, crumbs) => [
       crumb.to && (
         <Flex align="center">
           <Link key={"title" + index} to={crumb.to}>
-            {crumb.title}
+            <Crumb>{crumb.title}</Crumb>
           </Link>
           {index < crumbs.length - 1 ? (
-            <Icon key={"divider" + index} name="chevronright" mx={1} />
+            <Icon
+              key={"divider" + index}
+              name="chevronright"
+              color="#DCE1E4"
+              mx={1}
+            />
           ) : null}
         </Flex>
       ),
     ])}
-  </Box>
+  </Flex>
 );
 
 export default BrowserCrumbs;