refactor: normalize status badge designs (#1018)

frontend/src/component/common/DisabledIndicator/DisabledIndicator.styles.ts

@@ -1,13 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    indicator: {
-        padding: '0.2rem',
-        borderRadius: '5px',
-        marginLeft: '0.5rem',
-        backgroundColor: '#000',
-        color: '#fff',
-        fontSize: '0.9rem',
-        fontWeight: 'bold',
-    },
-}));

frontend/src/component/common/DisabledIndicator/DisabledIndicator.tsx

@@ -1,16 +0,0 @@
-import { useStyles } from './DisabledIndicator.styles';
-import classnames from 'classnames';
-interface IDisabledIndicator {
-    className?: string;
-}
-
-const DisabledIndicator = ({ className }: IDisabledIndicator) => {
-    const { classes: styles } = useStyles();
-    return (
-        <span className={classnames(styles.indicator, className)}>
-            disabled
-        </span>
-    );
-};
-
-export default DisabledIndicator;

frontend/src/component/common/StatusBadge/StatusBadge.tsx

@@ -0,0 +1,34 @@
+import { styled, useTheme } from '@mui/material';
+import { ReactNode } from 'react';
+
+interface IStatusBadgeProps {
+    severity: 'success' | 'warning';
+    className?: string;
+    children: ReactNode;
+}
+
+export const StatusBadge = ({
+    severity,
+    className,
+    children,
+}: IStatusBadgeProps) => {
+    const theme = useTheme();
+    const background = theme.palette.statusBadge[severity];
+
+    return (
+        <StyledStatusBadge sx={{ background }} className={className}>
+            {children}
+        </StyledStatusBadge>
+    );
+};
+
+const StyledStatusBadge = styled('div')(({ theme }) => ({
+    padding: theme.spacing(0.5, 1),
+    textDecoration: 'none',
+    color: theme.palette.text.primary,
+    display: 'inline-block',
+    borderRadius: theme.shape.borderRadius,
+    marginLeft: theme.spacing(1.5),
+    fontSize: theme.fontSizes.smallerBody,
+    lineHeight: 1,
+}));

frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx

@@ -23,9 +23,9 @@ import {
 } from 'component/providers/AccessProvider/permissions';
 import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
 import { XYCoord, Identifier } from 'dnd-core';
-import DisabledIndicator from 'component/common/DisabledIndicator/DisabledIndicator';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { useNavigate } from 'react-router-dom';
+import { StatusBadge } from 'component/common/StatusBadge/StatusBadge';
 
 interface IEnvironmentListItemProps {
     env: IEnvironment;
@@ -146,7 +146,11 @@ const EnvironmentListItem = ({
                         </strong>
                         <ConditionallyRender
                             condition={!env.enabled}
-                            show={<DisabledIndicator />}
+                            show={
+                                <StatusBadge severity="warning">
+                                    Disabled
+                                </StatusBadge>
+                            }
                         />
                     </>
                 }

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx

@@ -15,7 +15,6 @@ import {
     formatStrategyName,
 } from 'utils/strategyNames';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import DisabledIndicator from 'component/common/DisabledIndicator/DisabledIndicator';
 import EnvironmentIcon from 'component/common/EnvironmentIcon/EnvironmentIcon';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { useStyles } from './FeatureOverviewEnvironment.styles';
@@ -25,6 +24,7 @@ import FeatureOverviewEnvironmentMetrics from './FeatureOverviewEnvironmentMetri
 import { FeatureStrategyMenu } from 'component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu';
 import { FEATURE_ENVIRONMENT_ACCORDION } from 'utils/testIds';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
+import { StatusBadge } from 'component/common/StatusBadge/StatusBadge';
 
 interface IStrategyIconObject {
     count: number;
@@ -164,9 +164,12 @@ const FeatureOverviewEnvironment = ({
                         <ConditionallyRender
                             condition={!env.enabled}
                             show={
-                                <DisabledIndicator
+                                <StatusBadge
+                                    severity="warning"
                                     className={styles.disabledIndicatorPos}
-                                />
+                                >
+                                    Disabled
+                                </StatusBadge>
                             }
                         />
                     </div>

frontend/src/component/strategies/StrategiesList/PredefinedBadge/PredefinedBadge.tsx

@@ -1,15 +0,0 @@
-import { styled } from '@mui/material';
-
-export const PredefinedBadge = () => {
-    return <StyledBadge>Predefined</StyledBadge>;
-};
-
-const StyledBadge = styled('div')(({ theme }) => ({
-    padding: theme.spacing(0.3, 1.25),
-    backgroundColor: theme.palette.predefinedBadgeColor,
-    textDecoration: 'none',
-    color: theme.palette.text.primary,
-    display: 'inline-block',
-    borderRadius: theme.shape.borderRadius,
-    marginLeft: theme.spacing(1.5),
-}));

frontend/src/component/strategies/StrategiesList/StrategiesList.tsx

@@ -37,7 +37,8 @@ import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightC
 import { sortTypes } from 'utils/sortTypes';
 import { useTable, useGlobalFilter, useSortBy } from 'react-table';
 import { AddStrategyButton } from './AddStrategyButton/AddStrategyButton';
-import { PredefinedBadge } from './PredefinedBadge/PredefinedBadge';
+import { StatusBadge } from 'component/common/StatusBadge/StatusBadge';
+
 interface IDialogueMetaData {
     show: boolean;
     title: string;
@@ -116,7 +117,11 @@ export const StrategiesList = () => {
                         >
                             <ConditionallyRender
                                 condition={!editable}
-                                show={() => <PredefinedBadge />}
+                                show={() => (
+                                    <StatusBadge severity="success">
+                                        Predefined
+                                    </StatusBadge>
+                                )}
                             />
                         </LinkCell>
                     );

frontend/src/themes/theme.ts

@@ -81,7 +81,6 @@ export default createTheme({
         highlight: '#FFEACC',
         sidebarContainer: 'rgba(32,32,33, 0.2)',
         grey: colors.grey,
-        predefinedBadgeColor: colors.green[100],
         text: {
             primary: colors.grey[900],
             secondary: colors.grey[800],
@@ -101,6 +100,10 @@ export default createTheme({
             inactive: colors.orange[200],
             abandoned: colors.red[200],
         },
+        statusBadge: {
+            success: colors.green[100],
+            warning: colors.orange[200],
+        },
         inactiveIcon: colors.grey[600],
     },
     components: {

frontend/src/themes/themeTypes.ts

@@ -49,11 +49,13 @@ declare module '@mui/material/styles' {
             abandoned: string;
         };
         dividerAlternative: string;
-
         /**
-         * Color for predefined badge
+         * Background colors for status badges.
          */
-        predefinedBadgeColor: string;
+        statusBadge: {
+            success: string;
+            warning: string;
+        };
         /**
          * For table header hover effect.
          */