X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/40952ad86a823635968c9abc5d6feacef316cffd..b2fcdb2fac8ba49fecca5c30fc56e63b71746cf3:/src/common/custom-theme.ts?ds=sidebyside

diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts
index 098e0090..df848642 100644
--- a/src/common/custom-theme.ts
+++ b/src/common/custom-theme.ts
@@ -4,129 +4,185 @@
 
 import { createMuiTheme } from '@material-ui/core/styles';
 import { ThemeOptions, Theme } from '@material-ui/core/styles/createMuiTheme';
-import purple from '@material-ui/core/colors/purple';
 import blue from '@material-ui/core/colors/blue';
 import grey from '@material-ui/core/colors/grey';
 import green from '@material-ui/core/colors/green';
 import yellow from '@material-ui/core/colors/yellow';
 import red from '@material-ui/core/colors/red';
+import teal from '@material-ui/core/colors/teal';
 
-interface ArvadosThemeOptions extends ThemeOptions {
-    customs: any;
+export interface ArvadosThemeOptions extends ThemeOptions {
+  customs: any;
 }
 
 export interface ArvadosTheme extends Theme {
-    customs: {
-        colors: Colors
-    };
+  customs: {
+    colors: Colors;
+  };
 }
 
 interface Colors {
-    green700: string;
-    yellow700: string;
+  green700: string;
+  yellow100: string;
+  yellow700: string;
+  yellow900: string;
+  red100: string;
+  red900: string;
+  blue500: string;
+  grey500: string;
+  purple: string;
+  orange: string;
 }
 
-const red900 = red["900"];
-const purple800 = purple["800"];
-const grey200 = grey["200"];
-const grey300 = grey["300"];
-const grey500 = grey["500"];
-const grey600 = grey["600"];
-const grey700 = grey["700"];
-const grey900 = grey["900"];
-const rocheBlue = '#06C';
+const arvadosPurple = '#361336';
+const grey500 = grey['500'];
+const grey600 = grey['600'];
+const grey700 = grey['700'];
+const grey900 = grey['900'];
 
-const themeOptions: ArvadosThemeOptions = {
-    customs: {
-        colors: {
-            green700: green["700"],
-            yellow700: yellow["700"]
-        }
-    },
-    overrides: {
-        MuiTypography: {
-            body1: {
-                fontSize: '0.8125rem'
-            }
-        },
-        MuiAppBar: {
-            colorPrimary: {
-                backgroundColor: purple800
-            }
-        },
-        MuiTabs: {
-            root: {
-                color: grey600
-            },
-            indicator: {
-                backgroundColor: purple800
-            }
-        },
-        MuiTab: {
-            selected: {
-                fontWeight: 700,
-                color: purple800
-            }
+export const themeOptions: ArvadosThemeOptions = {
+  typography: {
+    useNextVariants: true,
+  },
+  customs: {
+    colors: {
+      green700: green['700'],
+      yellow100: yellow['100'],
+      yellow700: yellow['700'],
+      yellow900: yellow['900'],
+      red100: red['100'],
+      red900: red['900'],
+      blue500: blue['500'],
+      grey500: grey500,
+      purple: arvadosPurple,
+      orange: '#f0ad4e',
+    },
+  },
+  overrides: {
+    MuiTypography: {
+      body1: {
+        fontSize: '0.8125rem',
+      },
+    },
+    MuiAppBar: {
+      colorPrimary: {
+        backgroundColor: arvadosPurple,
+      },
+    },
+    MuiTabs: {
+      root: {
+        color: grey600,
+      },
+      indicator: {
+        backgroundColor: arvadosPurple,
+      },
+    },
+    MuiTab: {
+      root: {
+        '&$selected': {
+          fontWeight: 700,
+          color: arvadosPurple,
         },
-        MuiList: {
-            root: {
-                color: grey900
-            }
+      },
+    },
+    MuiList: {
+      root: {
+        color: grey900,
+      },
+    },
+    MuiListItemText: {
+      root: {
+        padding: 0,
+      },
+    },
+    MuiListItemIcon: {
+      root: {
+        fontSize: '1.25rem',
+      },
+    },
+    MuiCardHeader: {
+      avatar: {
+        display: 'flex',
+        alignItems: 'center',
+      },
+      title: {
+        color: grey700,
+        fontSize: '1.25rem',
+      },
+    },
+    MuiExpansionPanel: {
+      expanded: {
+        marginTop: '8px',
+      },
+    },
+    MuiExpansionPanelDetails: {
+      root: {
+        marginBottom: 0,
+        paddingBottom: '4px',
+      },
+    },
+    MuiExpansionPanelSummary: {
+      content: {
+        '&$expanded': {
+          margin: 0,
         },
-        MuiListItemText: {
-            root: {
-                padding: 0
-            }
+        color: grey700,
+        fontSize: '1.25rem',
+        margin: 0,
+      },
+      expanded: {},
+    },
+    MuiMenuItem: {
+      root: {
+        padding: '8px 16px',
+      },
+    },
+    MuiInput: {
+      root: {
+        fontSize: '0.875rem',
+      },
+      underline: {
+        '&:after': {
+          borderBottomColor: arvadosPurple,
         },
-        MuiListItemIcon: {
-            root: {
-                fontSize: '1.25rem'
-            }
+        '&:hover:not($disabled):not($focused):not($error):before': {
+          borderBottom: '1px solid inherit',
         },
-        MuiCardHeader: {
-            avatar: {
-                display: 'flex',
-                alignItems: 'center'
-            },
-            title: {
-                color: grey700,
-                fontSize: '1.25rem'
-            }
+      },
+    },
+    MuiFormLabel: {
+      root: {
+        fontSize: '0.875rem',
+        '&$focused': {
+          '&$focused:not($error)': {
+            color: arvadosPurple,
+          },
         },
-        MuiMenuItem: {
-            root: {
-                padding: '8px 16px'
-            }
+      },
+    },
+    MuiStepIcon: {
+      root: {
+        '&$active': {
+          color: arvadosPurple,
         },
-        MuiInput: {
-            underline: {
-                '&:after': {
-                    borderBottomColor: purple800
-                },
-                '&:hover:not($disabled):not($focused):not($error):before': {
-                    borderBottom: '1px solid inherit'
-                }
-            }
+        '&$completed': {
+          color: 'inherited',
         },
-        MuiFormLabel: {
-            focused: {
-                "&$focused:not($error)": {
-                    color: purple800
-                }
-            }
-        }
-    },
-    mixins: {
-        toolbar: {
-            minHeight: '48px'
-        }
-    },
-    palette: {
-        primary: {
-            main: rocheBlue,
-            dark: blue.A100
-        }
-    }
+      },
+    },
+  },
+  mixins: {
+    toolbar: {
+      minHeight: '48px',
+    },
+  },
+  palette: {
+    primary: {
+      main: teal.A700,
+      dark: teal.A400,
+      contrastText: '#fff',
+    },
+  },
 };
 
-export const CustomTheme = createMuiTheme(themeOptions);
\ No newline at end of file
+export const CustomTheme = createMuiTheme(themeOptions);