From ff8eab78da3d9d352c196d98d6fd3d14753d8272 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 8 Sep 2021 18:35:17 +1000
Subject: [PATCH] update breadcrumbs style

---
 src/components/Navigation/Breadcrumbs.tsx | 49 ++++++-----------------
 1 file changed, 13 insertions(+), 36 deletions(-)

diff --git a/src/components/Navigation/Breadcrumbs.tsx b/src/components/Navigation/Breadcrumbs.tsx
index dd842afd..6ced1cb7 100644
--- a/src/components/Navigation/Breadcrumbs.tsx
+++ b/src/components/Navigation/Breadcrumbs.tsx
@@ -3,7 +3,6 @@ import queryString from "query-string";
 import { Link as RouterLink } from "react-router-dom";
 import _camelCase from "lodash/camelCase";
 
-import { makeStyles, createStyles } from "@material-ui/styles";
 import {
   Breadcrumbs as MuiBreadcrumbs,
   BreadcrumbsProps,
@@ -15,41 +14,8 @@ import ArrowRightIcon from "@material-ui/icons/ChevronRight";
 import { useProjectContext } from "contexts/ProjectContext";
 import useRouter from "hooks/useRouter";
 import routes from "constants/routes";
-import { DRAWER_COLLAPSED_WIDTH } from "components/SideDrawer";
-
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    ol: {
-      // alignItems: "baseline",
-
-      paddingLeft: theme.spacing(2),
-      // paddingRight: DRAWER_COLLAPSED_WIDTH,
-
-      userSelect: "none",
-    },
-
-    li: {
-      // display: "flex",
-      // alignItems: "center",
-      // lineHeight: 32,
-
-      textTransform: "capitalize",
-      "&:first-of-type": { textTransform: "capitalize" },
-    },
-
-    separator: {
-      // alignSelf: "flex-end",
-      // "& svg": {
-      //   position: "relative",
-      //   bottom: -1.5,
-      // },
-    },
-  })
-);
 
 export default function Breadcrumbs(props: BreadcrumbsProps) {
-  const classes = useStyles();
-
   const { tables, tableState } = useProjectContext();
   const collection = tableState?.tablePath || "";
 
@@ -68,8 +34,19 @@ export default function Breadcrumbs(props: BreadcrumbsProps) {
     <MuiBreadcrumbs
       separator={<ArrowRightIcon />}
       aria-label="sub-table breadcrumbs"
-      classes={classes}
-      // component="div"
+      sx={{
+        "& ol": {
+          pl: 2,
+          userSelect: "none",
+          flexWrap: "nowrap",
+          whiteSpace: "nowrap",
+        },
+
+        "& li": {
+          textTransform: "capitalize",
+          "&:first-of-type": { textTransform: "capitalize" },
+        },
+      }}
       {...(props as any)}
     >
       {/* Section name */}