From 3d07b6c12bec14a9d72f78936f00ee5efb959331 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 26 Jun 2019 15:17:16 +0200
Subject: [PATCH] styling

---
 .../packages/ui-components/src/Breadcrumb.js  | 55 ++++++++++++-------
 1 file changed, 35 insertions(+), 20 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/Breadcrumb.js b/scm-ui-components/packages/ui-components/src/Breadcrumb.js
index 7196a4ba3a..48342a5a25 100644
--- a/scm-ui-components/packages/ui-components/src/Breadcrumb.js
+++ b/scm-ui-components/packages/ui-components/src/Breadcrumb.js
@@ -1,44 +1,59 @@
 //@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">
-          <ul>
-            {paths.map((path, index) => {
-              if (paths.length - 1 === index) {
+        <>
+          <nav
+            className={classNames("breadcrumb", classes.margin)}
+            aria-label="breadcrumbs"
+          >
+            <ul>
+              {paths.map((path, index) => {
+                if (paths.length - 1 === index) {
+                  return (
+                    <li className="is-active" key={index}>
+                      <Link to={"#"} aria-current="page">
+                        {path}
+                      </Link>
+                    </li>
+                  );
+                }
                 return (
-                  <li className="is-active" key={index}>
-                    <Link to={"#"} aria-current="page">
-                      {path}
-                    </Link>
+                  <li key={index}>
+                    <Link to={baseUrl + "/" + path}>{path}</Link>
                   </li>
                 );
-              }
-              return (
-                <li key={index}>
-                  <Link to={baseUrl + "/" + path}>{path}</Link>
-                </li>
-              );
-            })}
-          </ul>
-        </nav>
+              })}
+            </ul>
+          </nav>
+          <hr />
+        </>
       );
     }
     return null;
   }
 }
 
-export default Breadcrumb;
+export default injectSheet(styles)(Breadcrumb);