19504: Revert breadcrumbs ro transparent background, use primary color for parent...

Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>

diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts
index 67a514b10ca8de49577d457983a717da1b87ff4d..89fa6f3132b3f4c987284007363788f70c08cc3f 100644 (file)
--- a/src/common/custom-theme.ts
+++ b/src/common/custom-theme.ts
@@ -29,15 +29,13 @@ interface Colors {
     red100: string;
     red900: string;
     blue500: string;
-    grey300: string;
-    grey400: string;
     grey500: string;
+    grey700: string;
     purple: string;
     orange: string;
 }
 
 const arvadosPurple = '#361336';
-const grey500 = grey["500"];
 const grey600 = grey["600"];
 const grey700 = grey["700"];
 const grey900 = grey["900"];
@@ -55,9 +53,8 @@ export const themeOptions: ArvadosThemeOptions = {
             red100: red["100"],
             red900: red['900'],
             blue500: blue['500'],
-            grey300: grey["300"],
-            grey400: grey["400"],
-            grey500: grey500,
+            grey500: grey["500"],
+            grey700: grey["700"],
             purple: arvadosPurple,
             orange: '#f0ad4e',
         }

diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx
index 301f3041f1c0dca08708eef219c921b85760623f..1d4b7b272ab3d311e662e9c2bf0526b7be5f7e92 100644 (file)
--- a/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/src/components/breadcrumbs/breadcrumbs.tsx
@@ -25,15 +25,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     item: {
         borderRadius: '16px',
         height: '32px',
-        backgroundColor: theme.customs.colors.grey300,
+        color: theme.customs.colors.grey700,
         '&.parentItem': {
-            backgroundColor: `${theme.customs.colors.grey300}99`,
-        },
-        '&:hover': {
-            backgroundColor: theme.customs.colors.grey400,
-        },
-        '&.parentItem:hover': {
-            backgroundColor: `${theme.customs.colors.grey400}99`,
+            color: `${theme.palette.primary.main}`,
         },
     },
     label: {
@@ -84,6 +78,7 @@ export const Breadcrumbs = withStyles(styles)(
                                 isLastItem ? null : 'parentItem',
                                 classes.item
                             )}
+                            color="inherit"
                             onClick={() => onClick(item)}
                             onContextMenu={event => onContextMenu(event, item)}>
                             <Icon className={classes.icon} />