improved sizing, added slash at the end

scm-ui-components/packages/ui-components/src/Breadcrumb.js

@@ -2,7 +2,6 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import injectSheet from "react-jss";
-import classNames from "classnames";
 
 type Props = {
   revision: string,
@@ -12,26 +11,18 @@ type Props = {
 };
 
 const styles = {
-  margin: {
+  noMargin: {
-    margin: "1rem 1.25rem 0rem"
+    margin: "0"
   }
 };
 
 class Breadcrumb extends React.Component<Props> {
-  render() {
+  renderPath() {
-    const { revision, path, baseUrl, classes } = this.props;
+    const { revision, path, baseUrl } = this.props;
 
     if (path) {
       const paths = path.split("/");
-
+      const map = paths.map((path, index) => {
-      return (
-        <>
-          <nav
-            className={classNames("breadcrumb", classes.margin)}
-            aria-label="breadcrumbs"
-          >
-            <ul>
-              {paths.map((path, index) => {
         const currPath = paths.slice(0, index + 1).join("/");
         if (paths.length - 1 === index) {
           return (
@@ -44,20 +35,27 @@ class Breadcrumb extends React.Component<Props> {
         }
         return (
           <li key={index}>
-                    <Link to={baseUrl + "/" + revision + "/" + currPath}>
+            <Link to={baseUrl + "/" + revision + "/" + currPath}>{path}</Link>
-                      {path}
-                    </Link>
           </li>
         );
-              })}
+      });
-            </ul>
+      return map;
+    }
+    return <li />;
+  }
+
+  render() {
+    const { classes } = this.props;
+
+    return (
+      <>
+        <nav className="breadcrumb sources-breadcrumb" aria-label="breadcrumbs">
+          <ul>{this.renderPath()}</ul>
         </nav>
-          <hr />
+        <hr className={classes.noMargin} />
       </>
     );
   }
-    return null;
-  }
 }
 
 export default injectSheet(styles)(Breadcrumb);

scm-ui/styles/scm.scss

@@ -339,6 +339,16 @@ form .field:not(.is-grouped) {
   }
 }
 
+// sources breadcrumb
+.sources-breadcrumb {
+  margin: 1rem 1.25rem !important;
+
+  li:last-child:after {
+    color: #b5b5b5;
+    content: "\0002f";
+  }
+}
+
 // pagination
 .pagination-next,
 .pagination-link,