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;