19462: Updating color scheme

Arvados-DCO-1.1-Signed-off-by: Sarah Wait Zaranek <swz@curii.com>

diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts
index 73ed8e0660ec6e2c11d6a728e76bece6ca961467..135204a066da6ba0734139061bc0378fdbc94e4e 100644 (file)
--- 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 cf0b5e46e8b98f2f89dc9e5783a679736894bbcb..2ba29d44801435ccc258ebfd0fea533186567bd7 100644 (file)
--- 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 d942234d0fcb4841d609850de408ed3c3cdfe3e1..f2b6f36daf412cd1a62a0a4898d7c56867aed916 100644 (file)
--- 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 e52c487d6bbe33967e4786c54eb0655e947173b2..92d31b0b8e278b924bfc7fb2d25a61f5a497de1d 100644 (file)
--- 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 354d816b2f8ca7bd19c65c80634d82b8c4ab99bd..e62e503600b0838bf9dee8a4e88928281a564677 100644 (file)
--- 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 47e5b287ae7acb3fce265916da02964286b68748..cbe815c0582897e19064e622791c03fa83625152 100644 (file)
--- 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 3b5fae3639591a224a6860e24ab57921afa3fbf0..4761e12f4c6a4b8f47aa95dad5afa59a618182ec 100644 (file)
--- 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 b40e5af67534a2b838dcd00c05897119d070279b..df1b1f1dfe8d4e8626b64ae5244899d982abff1d 100644 (file)
--- 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 06a74a6882d5f7f390d058652b7647cfbcd6230b..e5d8507b5cfce976b734442a29c3667ff10d5794 100644 (file)
--- 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 4143501e23f495e99d97f1557f0ae48de5e4a689..d8368449cbad9902f818d379c0270d781b19070d 100644 (file)
--- 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 da6438a1b83fab34d76e096b8a18a93ddfc0d274..b09b499e1c424f3db24c9a122725b376cfb47e2f 100644 (file)
--- 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 d541f6c02614650de4715f8da10bd0df8f7a297d..3ac4d75519ed50d4d701cc813b86b3512c3bf97e 100644 (file)
--- 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 4890c726f4c73c601f20a526400abfe6f765bd01..e14f98f9b2af156d7d16be8e085e6b8a2d0f1286 100644 (file)
--- 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 c27673d268123e6ac7e4df421d5bfe217a57f887..7da74f221a956391a6bb011a09f80a179f564a5b 100644 (file)
--- 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: {