[arvados-workbench2] updated: 2.4.0-360-g63a5dc75
git repository hosting
git at public.arvados.org
Mon Dec 19 19:37:30 UTC 2022
Summary of changes:
src/common/custom-theme.ts | 45 +++++++++++++++-------
.../collection-panel-files.tsx | 2 +-
src/components/data-table/data-table.tsx | 4 +-
.../details-attribute/details-attribute.tsx | 4 +-
src/store/processes/process.ts | 34 +++++++++++++---
src/views-components/data-explorer/renderers.tsx | 7 ++--
.../process-runtime-status.tsx | 4 +-
src/views/collection-panel/collection-panel.tsx | 4 +-
src/views/not-found-panel/not-found-panel-root.tsx | 2 +-
src/views/process-panel/process-cmd-card.tsx | 6 ++-
src/views/process-panel/process-details-card.tsx | 7 ++--
src/views/process-panel/process-io-card.tsx | 8 ++--
src/views/process-panel/process-log-card.tsx | 5 ++-
.../subprocess-panel/subprocess-panel-root.tsx | 2 +-
14 files changed, 91 insertions(+), 43 deletions(-)
via 63a5dc75ae9b68b3570e3bee1662155572cf5d1f (commit)
from 56e6dc7af513fd7bdb043e9c74a1d2848da41c38 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 63a5dc75ae9b68b3570e3bee1662155572cf5d1f
Author: Sarah Wait Zaranek <swz at curii.com>
Date: Mon Dec 19 14:37:07 2022 -0500
19462: Updating color scheme
Arvados-DCO-1.1-Signed-off-by: Sarah Wait Zaranek <swz at curii.com>
diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts
index 73ed8e06..135204a0 100644
--- a/src/common/custom-theme.ts
+++ b/src/common/custom-theme.ts
@@ -9,7 +9,6 @@ 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;
@@ -33,14 +32,26 @@ interface Colors {
blue700: string;
grey500: string;
grey600: string;
+ grey700: string;
+ grey900: string;
purple: string;
- orange: string;
+ orange: string;
+ greyL: string;
+ greyD: string;
+ darkblue: string;
}
-const arvadosPurple = '#361336';
+/**
+* arvadosGreyLight is the hex equivalent of rgba(0,0,0,0.87) on #fafafa background and arvadosGreyDark is the hex equivalent of rgab(0,0,0,0.54) on #fafafa background
+*/
+
+const arvadosDarkBlue = '#052a3c';
+const arvadosGreyLight = '#737373';
+const arvadosGreyDark = '#212121';
const grey500 = grey["500"];
const grey600 = grey["600"];
const grey700 = grey["700"];
+const grey800 = grey["800"];
const grey900 = grey["900"];
export const themeOptions: ArvadosThemeOptions = {
@@ -59,8 +70,14 @@ export const themeOptions: ArvadosThemeOptions = {
blue500: blue['500'],
blue700: blue['700'],
grey500: grey500,
- purple: arvadosPurple,
+ grey600: grey600,
+ grey700: grey700,
+ grey800: grey800,
+ grey900: grey900,
+ darkblue: arvadosDarkBlue,
orange: '#f0ad4e',
+ greyL: arvadosGreyLight,
+ greyD: arvadosGreyDark,
}
},
overrides: {
@@ -71,7 +88,7 @@ export const themeOptions: ArvadosThemeOptions = {
},
MuiAppBar: {
colorPrimary: {
- backgroundColor: arvadosPurple
+ backgroundColor: arvadosDarkBlue
}
},
MuiTabs: {
@@ -79,14 +96,13 @@ export const themeOptions: ArvadosThemeOptions = {
color: grey600
},
indicator: {
- backgroundColor: arvadosPurple
+ backgroundColor: arvadosDarkBlue
}
},
MuiTab: {
root: {
'&$selected': {
fontWeight: 700,
- color: arvadosPurple
}
}
},
@@ -102,7 +118,7 @@ export const themeOptions: ArvadosThemeOptions = {
},
MuiListItemIcon: {
root: {
- fontSize: '1.25rem'
+ fontSize: '1.25rem',
}
},
MuiCardHeader: {
@@ -111,7 +127,7 @@ export const themeOptions: ArvadosThemeOptions = {
alignItems: 'center'
},
title: {
- color: grey700,
+ color: arvadosGreyDark,
fontSize: '1.25rem'
}
},
@@ -148,7 +164,7 @@ export const themeOptions: ArvadosThemeOptions = {
},
underline: {
'&:after': {
- borderBottomColor: arvadosPurple
+ borderBottomColor: arvadosDarkBlue
},
'&:hover:not($disabled):not($focused):not($error):before': {
borderBottom: '1px solid inherit'
@@ -160,7 +176,7 @@ export const themeOptions: ArvadosThemeOptions = {
fontSize: '0.875rem',
"&$focused": {
"&$focused:not($error)": {
- color: arvadosPurple
+ color: arvadosDarkBlue
}
}
}
@@ -168,7 +184,7 @@ export const themeOptions: ArvadosThemeOptions = {
MuiStepIcon: {
root: {
'&$active': {
- color: arvadosPurple
+ color: arvadosDarkBlue
},
'&$completed': {
color: 'inherited'
@@ -183,8 +199,9 @@ export const themeOptions: ArvadosThemeOptions = {
},
palette: {
primary: {
- main: teal.A700,
- dark: teal.A400,
+ main: '#017ead',
+ dark: '#015272',
+ light: '#82cffd',
contrastText: '#fff'
}
},
diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index cf0b5e46..2ba29d44 100644
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -85,7 +85,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
wrapper: {
display: 'flex',
minHeight: '600px',
- color: 'rgba(0, 0, 0, 0.87)',
+ color: 'rgba(0,0,0,0.87)',
fontSize: '0.875rem',
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
fontWeight: 400,
diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index d942234d..f2b6f36d 100644
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -61,7 +61,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
},
tableCell: {
wordWrap: 'break-word',
- paddingRight: '24px'
+ paddingRight: '24px',
+ color: '#737373'
+
},
tableCellWorkflows: {
'&:nth-last-child(2)': {
diff --git a/src/components/details-attribute/details-attribute.tsx b/src/components/details-attribute/details-attribute.tsx
index e52c487d..92d31b0b 100644
--- a/src/components/details-attribute/details-attribute.tsx
+++ b/src/components/details-attribute/details-attribute.tsx
@@ -24,7 +24,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
},
label: {
boxSizing: 'border-box',
- color: theme.palette.grey["500"],
+ color: theme.palette.grey["600"],
width: '100%'
},
value: {
@@ -42,7 +42,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
},
copyIcon: {
marginLeft: theme.spacing.unit,
- color: theme.palette.grey["500"],
+ color: theme.palette.grey["600"],
cursor: 'pointer',
display: 'inline',
'& svg': {
diff --git a/src/store/processes/process.ts b/src/store/processes/process.ts
index 354d816b..e62e5036 100644
--- a/src/store/processes/process.ts
+++ b/src/store/processes/process.ts
@@ -73,20 +73,44 @@ export const getProcessRuntime = ({ container }: Process) => {
}
};
-export const getProcessStatusColor = (status: string, { customs }: ArvadosTheme) => {
+
+export const getProcessStatusStyles = (status: string, theme: ArvadosTheme): React.CSSProperties => {
+ let color = theme.customs.colors.grey500;
+ let running = false;
switch (status) {
case ProcessStatus.RUNNING:
- return customs.colors.green800;
+ color = theme.customs.colors.green800;
+ running = true;
+ break;
case ProcessStatus.COMPLETED:
+ color = theme.customs.colors.green800;
+ break;
case ProcessStatus.WARNING:
- return customs.colors.green800;
+ color = theme.customs.colors.green800;
+ running = true;
+ break;
case ProcessStatus.FAILING:
+ color = theme.customs.colors.red900;
+ running = true;
+ break;
case ProcessStatus.CANCELLED:
case ProcessStatus.FAILED:
- return customs.colors.red900;
+ color = theme.customs.colors.red900;
+ break;
default:
- return customs.colors.grey600;
+ color = theme.customs.colors.grey600;
+ break;
}
+
+ // Using color and running we build the text, border, and background style properties
+ return {
+ // Set background color when not running, otherwise use white
+ backgroundColor: running ? theme.palette.common.white : color,
+ // Set text color to status color when running, else use white text for solid button
+ color: running ? color : theme.palette.common.white,
+ // Set border color when running, else omit the style entirely
+ ...(running ? {border: `1px solid ${color}`} : {}),
+ };
};
export const getProcessStatus = ({ containerRequest, container }: Process): ProcessStatus => {
diff --git a/src/views-components/data-explorer/renderers.tsx b/src/views-components/data-explorer/renderers.tsx
index 47e5b287..cbe815c0 100644
--- a/src/views-components/data-explorer/renderers.tsx
+++ b/src/views-components/data-explorer/renderers.tsx
@@ -36,7 +36,7 @@ import { connect, DispatchProp } from 'react-redux';
import { RootState } from 'store/store';
import { getResource, filterResources } from 'store/resources/resources';
import { GroupContentsResource } from 'services/groups-service/groups-service';
-import { getProcess, Process, getProcessStatus, getProcessStatusColor, getProcessRuntime } from 'store/processes/process';
+import { getProcess, Process, getProcessStatus, getProcessStatusStyles, getProcessRuntime } from 'store/processes/process';
import { ArvadosTheme } from 'common/custom-theme';
import { compose, Dispatch } from 'redux';
import { WorkflowResource } from 'models/workflow';
@@ -883,15 +883,14 @@ export const ProcessStatus = compose(
style={{
height: props.theme.spacing.unit * 3,
width: props.theme.spacing.unit * 12,
- backgroundColor: getProcessStatusColor(
+ ...getProcessStatusStyles(
getProcessStatus(props.process), props.theme),
- color: props.theme.palette.common.white,
fontSize: '0.875rem',
borderRadius: props.theme.spacing.unit * 0.625,
}}
/>
: <Typography>-</Typography>
- );
+ );
export const ProcessStartDate = connect(
(state: RootState, props: { uuid: string }) => {
diff --git a/src/views-components/process-runtime-status/process-runtime-status.tsx b/src/views-components/process-runtime-status/process-runtime-status.tsx
index 3b5fae36..4761e12f 100644
--- a/src/views-components/process-runtime-status/process-runtime-status.tsx
+++ b/src/views-components/process-runtime-status/process-runtime-status.tsx
@@ -55,7 +55,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
whiteSpace: 'pre-line',
},
errorColor: {
- color: theme.customs.colors.red900,
+ color: theme.customs.colors.grey700,
},
error: {
backgroundColor: theme.customs.colors.red100,
@@ -65,7 +65,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
backgroundColor: theme.customs.colors.yellow100,
},
warningColor: {
- color: theme.customs.colors.yellow900,
+ color: theme.customs.colors.grey700,
},
paperRoot: {
minHeight: theme.spacing.unit * 6,
diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index b40e5af6..df1b1f1d 100644
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -73,14 +73,14 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
},
iconHeader: {
fontSize: '1.875rem',
- color: theme.customs.colors.grey600
+ color: theme.customs.colors.greyL
},
tag: {
marginRight: theme.spacing.unit / 2,
marginBottom: theme.spacing.unit / 2
},
label: {
- fontSize: '0.975rem',
+ fontSize: '0.875rem',
},
centeredLabel: {
fontSize: '0.875rem',
diff --git a/src/views/not-found-panel/not-found-panel-root.tsx b/src/views/not-found-panel/not-found-panel-root.tsx
index 06a74a68..e5d8507b 100644
--- a/src/views/not-found-panel/not-found-panel-root.tsx
+++ b/src/views/not-found-panel/not-found-panel-root.tsx
@@ -23,7 +23,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
fontSize: '18px'
},
active: {
- color: theme.customs.colors.green700,
+ color: theme.customs.colors.grey700,
textDecoration: 'none',
}
});
diff --git a/src/views/process-panel/process-cmd-card.tsx b/src/views/process-panel/process-cmd-card.tsx
index 4143501e..d8368449 100644
--- a/src/views/process-panel/process-cmd-card.tsx
+++ b/src/views/process-panel/process-cmd-card.tsx
@@ -35,7 +35,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
},
iconHeader: {
fontSize: '1.875rem',
- color: theme.customs.colors.green700,
+ color: theme.customs.colors.greyL,
},
avatar: {
alignSelf: 'flex-start',
@@ -50,7 +50,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
},
title: {
overflow: 'hidden',
- paddingTop: theme.spacing.unit * 0.5
+ paddingTop: theme.spacing.unit * 0.5,
+ color: theme.customs.colors.greyD,
+ fontSize: '1.875rem'
},
});
diff --git a/src/views/process-panel/process-details-card.tsx b/src/views/process-panel/process-details-card.tsx
index da6438a1..b09b499e 100644
--- a/src/views/process-panel/process-details-card.tsx
+++ b/src/views/process-panel/process-details-card.tsx
@@ -34,7 +34,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
},
iconHeader: {
fontSize: '1.875rem',
- color: theme.customs.colors.green700,
+ color: theme.customs.colors.greyL,
},
avatar: {
alignSelf: 'flex-start',
@@ -49,7 +49,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
},
title: {
overflow: 'hidden',
- paddingTop: theme.spacing.unit * 0.5
+ paddingTop: theme.spacing.unit * 0.5,
+ color: theme.customs.colors.green700,
},
cancelButton: {
paddingRight: theme.spacing.unit * 2,
@@ -81,7 +82,7 @@ export const ProcessDetailsCard = withStyles(styles)(
avatar={<ProcessIcon className={classes.iconHeader} />}
title={
<Tooltip title={process.containerRequest.name} placement="bottom-start">
- <Typography noWrap variant='h6' color='inherit'>
+ <Typography noWrap variant='h6'>
{process.containerRequest.name}
</Typography>
</Tooltip>
diff --git a/src/views/process-panel/process-io-card.tsx b/src/views/process-panel/process-io-card.tsx
index d541f6c0..3ac4d755 100644
--- a/src/views/process-panel/process-io-card.tsx
+++ b/src/views/process-panel/process-io-card.tsx
@@ -109,7 +109,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
},
iconHeader: {
fontSize: '1.875rem',
- color: theme.customs.colors.green700,
+ color: theme.customs.colors.greyL,
},
avatar: {
alignSelf: 'flex-start',
@@ -125,7 +125,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
},
title: {
overflow: 'hidden',
- paddingTop: theme.spacing.unit * 0.5
+ paddingTop: theme.spacing.unit * 0.5,
+ color: theme.customs.colors.greyD,
+ fontSize: '1.875rem'
},
tableWrapper: {
height: 'auto',
@@ -185,7 +187,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
top: '-9px',
},
emptyValue: {
- color: theme.customs.colors.grey600,
+ color: theme.customs.colors.grey700,
},
noBorderRow: {
'& td': {
diff --git a/src/views/process-panel/process-log-card.tsx b/src/views/process-panel/process-log-card.tsx
index 4890c726..e14f98f9 100644
--- a/src/views/process-panel/process-log-card.tsx
+++ b/src/views/process-panel/process-log-card.tsx
@@ -62,11 +62,12 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
},
title: {
overflow: 'hidden',
- paddingTop: theme.spacing.unit * 0.5
+ paddingTop: theme.spacing.unit * 0.5,
+ color: theme.customs.colors.greyD
},
iconHeader: {
fontSize: '1.875rem',
- color: theme.customs.colors.green700
+ color: theme.customs.colors.greyL
},
root: {
height: '100%',
diff --git a/src/views/subprocess-panel/subprocess-panel-root.tsx b/src/views/subprocess-panel/subprocess-panel-root.tsx
index c27673d2..7da74f22 100644
--- a/src/views/subprocess-panel/subprocess-panel-root.tsx
+++ b/src/views/subprocess-panel/subprocess-panel-root.tsx
@@ -25,7 +25,7 @@ type CssRules = 'iconHeader' | 'cardHeader';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
iconHeader: {
fontSize: '1.875rem',
- color: theme.customs.colors.green700,
+ color: theme.customs.colors.greyL,
marginRight: theme.spacing.unit * 2,
},
cardHeader: {
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list