diff --git a/packages/core/src/components/Status/Status.stories.tsx b/packages/core/src/components/Status/Status.stories.tsx index 7a6a58caa8..0e3717d082 100644 --- a/packages/core/src/components/Status/Status.stories.tsx +++ b/packages/core/src/components/Status/Status.stories.tsx @@ -17,8 +17,7 @@ import React from 'react'; import { StatusError, - StatusFailed, - StatusNA, + StatusAborted, StatusOK, StatusPending, StatusRunning, @@ -34,45 +33,34 @@ export default { const data = [ { - status: , + status: OK, label: 'OK', usage: 'Deployment successful', }, { - status: , - label: 'Warning', + status: Warning, usage: 'CPU utilization at 90%', }, { - status: , - label: 'Error', + status: Error, usage: 'Service could not be created', }, { - status: , - label: 'Failed', - usage: 'Build for PR #34 failed', + status: Aborted, + usage: 'Build for PR #34 aborted', }, { - status: , - label: 'Pending', + status: Pending, usage: 'Job is waiting', }, { - status: , - label: 'Running', + status: Running, usage: 'Job is running', }, - { - status: , - label: 'N/A', - usage: 'Not sure what to do', - }, ]; const columns = [ { field: 'status', title: 'Status' }, - { field: 'label', title: 'Label' }, { field: 'usage', title: 'Example usage' }, ]; @@ -97,7 +85,6 @@ export const Default = () => ( export const statusOK = () => ; export const statusWarning = () => ; export const statusError = () => ; -export const statusFailed = () => ; +export const statusAborted = () => ; export const statusPending = () => ; export const statusRunning = () => ; -export const statusNA = () => ; diff --git a/packages/core/src/components/Status/Status.tsx b/packages/core/src/components/Status/Status.tsx index a232aceb62..b34f8a3c31 100644 --- a/packages/core/src/components/Status/Status.tsx +++ b/packages/core/src/components/Status/Status.tsx @@ -21,32 +21,46 @@ import React, { FC } from 'react'; const useStyles = makeStyles((theme) => ({ status: { - width: 12, - height: 12, - display: 'inline-block', - marginRight: 1, + fontWeight: 500, + '&::before': { + width: '0.7em', + height: '0.7em', + display: 'inline-block', + marginRight: 8, + borderRadius: '50%', + content: '""', + }, }, ok: { - backgroundColor: theme.palette.status.ok, - borderRadius: '50%', + '&::before': { + backgroundColor: theme.palette.status.ok, + }, }, warning: { - backgroundColor: theme.palette.status.warning, + '&::before': { + backgroundColor: theme.palette.status.warning, + }, }, error: { - // Use same for Failed status. - width: '0', - height: '0', - borderLeft: '7px solid transparent', - borderRight: '7px solid transparent', - borderBottom: `14px solid ${theme.palette.status.error}`, + '&::before': { + backgroundColor: theme.palette.status.error, + }, }, pending: { - backgroundColor: theme.palette.status.pending, + '&::before': { + backgroundColor: theme.palette.status.pending, + }, }, running: { - animation: '$blink 0.8s step-start 0s infinite', - backgroundColor: theme.palette.status.running, + '&::before': { + backgroundColor: theme.palette.status.running, + animation: '$blink 0.8s step-start 0s infinite', + }, + }, + aborted: { + '&::before': { + backgroundColor: theme.palette.status.aborted, + }, }, '@keyframes blink': { '50%': { @@ -57,43 +71,23 @@ const useStyles = makeStyles((theme) => ({ export const StatusOK: FC<{}> = (props) => { const classes = useStyles(props); - return ( - - ); + return ; }; export const StatusWarning: FC<{}> = (props) => { const classes = useStyles(props); return ( - + ); }; export const StatusError: FC<{}> = (props) => { const classes = useStyles(props); return ( - + ); }; -export const StatusNA: FC<{}> = (props) => ( - - N/A - -); - export const StatusPending: FC<{}> = (props) => { const classes = useStyles(props); return ( @@ -116,12 +110,12 @@ export const StatusRunning: FC<{}> = (props) => { ); }; -export const StatusFailed: FC<{}> = (props) => { +export const StatusAborted: FC<{}> = (props) => { const classes = useStyles(props); return ( ); diff --git a/packages/core/src/components/Status/index.ts b/packages/core/src/components/Status/index.ts index 35d2ca1c48..4c0fd6322b 100644 --- a/packages/core/src/components/Status/index.ts +++ b/packages/core/src/components/Status/index.ts @@ -16,8 +16,7 @@ export { StatusError, - StatusFailed, - StatusNA, + StatusAborted, StatusOK, StatusPending, StatusRunning, diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts index f2c26e6e4a..86fb5a1982 100644 --- a/packages/theme/src/themes.ts +++ b/packages/theme/src/themes.ts @@ -23,11 +23,12 @@ export const lightTheme = createTheme({ default: '#F8F8F8', }, status: { - ok: '#1db855', - warning: '#f49b20', - error: '#CA001B', - running: '#BEBEBE', - pending: '#5BC0DE', + ok: '#1DB954', + warning: '#FF9800', + error: '#E22134', + running: '#2E77D0', + pending: '#FFED51', + aborted: '#757575', background: '#F8F8F8', }, bursts: { @@ -63,12 +64,13 @@ export const darkTheme = createTheme({ default: '#333333', }, status: { - ok: '#1db855', - warning: '#f49b20', - error: '#CA001B', - running: '#BEBEBE', - pending: '#5BC0DE', - background: '#282828', + ok: '#1DB954', + warning: '#FF9800', + error: '#E22134', + running: '#2E77D0', + pending: '#FFED51', + aborted: '#757575', + background: '#F8F8F8', }, bursts: { fontColor: '#FEFEFE', diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index c020fbb4e1..54bca9d61b 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -27,6 +27,7 @@ type PaletteAdditions = { error: string; pending: string; running: string; + aborted: string; background: string; }; border: string;