X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/b4405043d5d6b397a53c4c5351b64d242fea3b48..0c688f48e779c65c1bb849c5acd204817b295bc6:/src/common/custom-theme.ts diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts index be8e77ff68..98380b968e 100644 --- a/src/common/custom-theme.ts +++ b/src/common/custom-theme.ts @@ -10,6 +10,7 @@ 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'; export interface ArvadosThemeOptions extends ThemeOptions { customs: any; @@ -28,10 +29,8 @@ interface Colors { blue500: string; } -const red900 = red["900"]; +const arvadosPurple = '#361336'; const purple800 = purple["800"]; -const grey200 = grey["200"]; -const grey300 = grey["300"]; const grey500 = grey["500"]; const grey600 = grey["600"]; const grey700 = grey["700"]; @@ -55,7 +54,7 @@ export const themeOptions: ArvadosThemeOptions = { }, MuiAppBar: { colorPrimary: { - backgroundColor: purple800 + backgroundColor: arvadosPurple } }, MuiTabs: { @@ -63,13 +62,13 @@ export const themeOptions: ArvadosThemeOptions = { color: grey600 }, indicator: { - backgroundColor: purple800 + backgroundColor: arvadosPurple } }, MuiTab: { selected: { fontWeight: 700, - color: purple800 + color: arvadosPurple } }, MuiList: { @@ -108,7 +107,7 @@ export const themeOptions: ArvadosThemeOptions = { }, underline: { '&:after': { - borderBottomColor: purple800 + borderBottomColor: arvadosPurple }, '&:hover:not($disabled):not($focused):not($error):before': { borderBottom: '1px solid inherit' @@ -121,9 +120,19 @@ export const themeOptions: ArvadosThemeOptions = { }, focused: { "&$focused:not($error)": { - color: purple800 + color: arvadosPurple } } + }, + MuiStepIcon: { + root: { + '&$active': { + color: arvadosPurple + }, + '&$completed': { + color: 'inherited' + }, + } } }, mixins: { @@ -133,8 +142,9 @@ export const themeOptions: ArvadosThemeOptions = { }, palette: { primary: { - main: rocheBlue, - dark: blue.A100 + main: teal.A700, + dark: teal.A400, + contrastText: '#fff' } } };