X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/d4ce9980b9f3a418a92741eddd8d58d5f7227137..cba0f400f56889778321bdc0fdcf6cee236f6a79:/src/common/custom-theme.ts diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts index c85acd90..2b0c5891 100644 --- a/src/common/custom-theme.ts +++ b/src/common/custom-theme.ts @@ -16,11 +16,17 @@ interface ArvadosThemeOptions extends ThemeOptions { } export interface ArvadosTheme extends Theme { - customs: any; + customs: { + colors: Colors + }; +} + +interface Colors { + green700: string; + yellow700: string; } const red900 = red["900"]; -const yellow700 = yellow["700"]; const purple800 = purple["800"]; const grey200 = grey["200"]; const grey300 = grey["300"]; @@ -28,11 +34,13 @@ const grey500 = grey["500"]; const grey600 = grey["600"]; const grey700 = grey["700"]; const grey900 = grey["900"]; +const rocheBlue = '#06C'; const themeOptions: ArvadosThemeOptions = { customs: { colors: { - green700: green["700"] + green700: green["700"], + yellow700: yellow["700"] } }, overrides: { @@ -74,6 +82,44 @@ const themeOptions: ArvadosThemeOptions = { root: { fontSize: '1.25rem' } + }, + MuiCardHeader: { + avatar: { + display: 'flex', + alignItems: 'center' + }, + title: { + color: grey700, + fontSize: '1.25rem' + } + }, + MuiMenuItem: { + root: { + padding: '8px 16px' + } + }, + MuiInput: { + root: { + fontSize: '0.875rem' + }, + underline: { + '&:after': { + borderBottomColor: purple800 + }, + '&:hover:not($disabled):not($focused):not($error):before': { + borderBottom: '1px solid inherit' + } + } + }, + MuiFormLabel: { + root: { + fontSize: '0.875rem' + }, + focused: { + "&$focused:not($error)": { + color: purple800 + } + } } }, mixins: { @@ -83,7 +129,7 @@ const themeOptions: ArvadosThemeOptions = { }, palette: { primary: { - main: '#06C', + main: rocheBlue, dark: blue.A100 } }