X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/fb48b7f876cf7c8b402ba05c16dffaade0a9f655..a2e786b48045eb414c39c3265ab2992712706711:/src/common/custom-theme.ts diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts index c4d3dbc3..f7559eed 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; @@ -26,13 +27,11 @@ interface Colors { yellow700: string; red900: string; blue500: string; - grey500: string; + purple: 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"]; @@ -46,7 +45,7 @@ export const themeOptions: ArvadosThemeOptions = { yellow700: yellow["700"], red900: red['900'], blue500: blue['500'], - grey500, + purple: arvadosPurple } }, overrides: { @@ -57,7 +56,7 @@ export const themeOptions: ArvadosThemeOptions = { }, MuiAppBar: { colorPrimary: { - backgroundColor: purple800 + backgroundColor: arvadosPurple } }, MuiTabs: { @@ -65,13 +64,13 @@ export const themeOptions: ArvadosThemeOptions = { color: grey600 }, indicator: { - backgroundColor: purple800 + backgroundColor: arvadosPurple } }, MuiTab: { selected: { fontWeight: 700, - color: purple800 + color: arvadosPurple } }, MuiList: { @@ -110,7 +109,7 @@ export const themeOptions: ArvadosThemeOptions = { }, underline: { '&:after': { - borderBottomColor: purple800 + borderBottomColor: arvadosPurple }, '&:hover:not($disabled):not($focused):not($error):before': { borderBottom: '1px solid inherit' @@ -123,9 +122,19 @@ export const themeOptions: ArvadosThemeOptions = { }, focused: { "&$focused:not($error)": { - color: purple800 + color: arvadosPurple } } + }, + MuiStepIcon: { + root: { + '&$active': { + color: arvadosPurple + }, + '&$completed': { + color: 'inherited' + }, + } } }, mixins: { @@ -135,8 +144,9 @@ export const themeOptions: ArvadosThemeOptions = { }, palette: { primary: { - main: rocheBlue, - dark: blue.A100 + main: teal.A700, + dark: teal.A400, + contrastText: '#fff' } } };