styling

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

@@ -1,21 +1,34 @@
 //@flow
 import React from "react";
 import { Link } from "react-router-dom";
+import injectSheet from "react-jss";
+import classNames from "classnames";
 
 type Props = {
   path: string,
-  baseUrl: string
+  baseUrl: string,
+  classes: any
+};
+
+const styles = {
+  margin: {
+    margin: "1rem 1.25rem 0rem"
+  }
 };
 
 class Breadcrumb extends React.Component<Props> {
   render() {
-    const { path, baseUrl } = this.props;
+    const { path, baseUrl, classes } = this.props;
 
     if (path) {
       const paths = path.split("/");
 
       return (
-        <nav className="breadcrumb" aria-label="breadcrumbs">
+        <>
+          <nav
+            className={classNames("breadcrumb", classes.margin)}
+            aria-label="breadcrumbs"
+          >
             <ul>
               {paths.map((path, index) => {
                 if (paths.length - 1 === index) {
@@ -35,10 +48,12 @@ class Breadcrumb extends React.Component<Props> {
               })}
             </ul>
           </nav>
+          <hr />
+        </>
       );
     }
     return null;
   }
 }
 
-export default Breadcrumb;
+export default injectSheet(styles)(Breadcrumb);