X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/ca8b222695a58831ea5b2aeb62195f74a0808d6b..e4395f2bfb2a271303e9dc7f91bec6c890e792e3:/src/common/custom-theme.ts diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts index 3d56f78b..d93b37b7 100644 --- a/src/common/custom-theme.ts +++ b/src/common/custom-theme.ts @@ -27,8 +27,7 @@ interface Colors { yellow700: string; red900: string; blue500: string; - grey500: string; - grey700: string; + purple: string; } const arvadosPurple = '#361336'; @@ -40,14 +39,16 @@ const grey900 = grey["900"]; const rocheBlue = '#06C'; export const themeOptions: ArvadosThemeOptions = { + typography: { + useNextVariants: true, + }, customs: { colors: { green700: green["700"], yellow700: yellow["700"], red900: red['900'], blue500: blue['500'], - grey500, - grey700 + purple: arvadosPurple } }, overrides: { @@ -70,9 +71,11 @@ export const themeOptions: ArvadosThemeOptions = { } }, MuiTab: { - selected: { - fontWeight: 700, - color: arvadosPurple + root: { + '&$selected': { + fontWeight: 700, + color: arvadosPurple + } } }, MuiList: { @@ -100,6 +103,28 @@ export const themeOptions: ArvadosThemeOptions = { fontSize: '1.25rem' } }, + MuiExpansionPanel: { + expanded: { + marginTop: '8px', + } + }, + MuiExpansionPanelDetails: { + root: { + marginBottom: 0, + paddingBottom: '4px', + } + }, + MuiExpansionPanelSummary: { + content: { + '&$expanded': { + margin: 0, + }, + color: grey700, + fontSize: '1.25rem', + margin: 0, + }, + expanded: {}, + }, MuiMenuItem: { root: { padding: '8px 16px' @@ -120,13 +145,23 @@ export const themeOptions: ArvadosThemeOptions = { }, MuiFormLabel: { root: { - fontSize: '0.875rem' - }, - focused: { - "&$focused:not($error)": { - color: arvadosPurple + fontSize: '0.875rem', + "&$focused": { + "&$focused:not($error)": { + color: arvadosPurple + } } } + }, + MuiStepIcon: { + root: { + '&$active': { + color: arvadosPurple + }, + '&$completed': { + color: 'inherited' + }, + } } }, mixins: { @@ -137,10 +172,10 @@ export const themeOptions: ArvadosThemeOptions = { palette: { primary: { main: teal.A700, - dark: blue.A100, + dark: teal.A400, contrastText: '#fff' } - } + }, }; export const CustomTheme = createMuiTheme(themeOptions); \ No newline at end of file