diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureEnvironmentMetrics/FeatureEnvironmentMetrics.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureEnvironmentMetrics/FeatureEnvironmentMetrics.tsx
index 7931942584..2bb30ba93e 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureEnvironmentMetrics/FeatureEnvironmentMetrics.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureEnvironmentMetrics/FeatureEnvironmentMetrics.tsx
@@ -1,7 +1,7 @@
import classNames from 'classnames';
import PercentageCircle from '../../../../common/PercentageCircle/PercentageCircle';
import { useStyles } from './FeatureEnvironmentMetrics.styles';
-import PieChartIcon from '@material-ui/icons/PieChart';
+import {FiberManualRecord} from '@material-ui/icons';
import { useMediaQuery } from '@material-ui/core';
import { IFeatureEnvironmentMetrics } from '../../../../../interfaces/featureToggle';
import { parseISO } from 'date-fns';
@@ -75,7 +75,7 @@ const FeatureEnvironmentMetrics = ({
-
{
title="Environments can be switched off for a single toggle. Resulting in all calls towards the toggle to return false."
>
- Toggle status
+ Feature toggle status
{renderEnvironmentSwitches()}
diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
index cc07d9222b..66bd45038e 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
@@ -60,11 +60,11 @@ const FeatureOverviewEnvironment = ({
enabled={env.enabled}
className={styles.headerIcon}
/>
- Toggle execution for
+ Feature toggle execution for
- {
component={Link}
to={`/projects/${projectId}/features2/${featureId}/settings`}
>
-
+
@@ -60,12 +60,14 @@ const FeatureOverviewMetaData = () => {
No description.{' '}
-
-
-
+
+
}
diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetadata.styles.ts b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetadata.styles.ts
index 42f05b3002..5ceb483fae 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetadata.styles.ts
+++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetadata.styles.ts
@@ -3,7 +3,8 @@ import { makeStyles } from '@material-ui/core/styles';
export const useStyles = makeStyles(theme => ({
container: {
borderRadius: '10px',
- backgroundColor: '#fff',
+ color: '#fff',
+ backgroundColor: theme.palette.primary.light,
display: 'flex',
flexDirection: 'column',
maxWidth: '350px',
@@ -39,12 +40,15 @@ export const useStyles = makeStyles(theme => ({
marginRight: '1rem',
height: '40px',
width: '40px',
- fill: theme.palette.primary.main,
+ fill: '#fff',
},
descriptionContainer: {
display: 'flex',
alignItems: 'center',
- color: theme.palette.grey[600],
+ color: '#fff',
+ },
+ editIcon: {
+ color: '#fff',
},
[theme.breakpoints.down(1000)]: {
container: {
diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.styles.ts b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.styles.ts
index 24fe96935f..ba8d2b5312 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.styles.ts
+++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.styles.ts
@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles';
export const useStyles = makeStyles(theme => ({
container: {
borderRadius: '10px',
- backgroundColor: '#fff',
+ backgroundColor: theme.palette.primary.light,
display: 'flex',
flexDirection: 'column',
marginRight: '1rem',
@@ -28,6 +28,13 @@ export const useStyles = makeStyles(theme => ({
tagChip: {
marginRight: '0.25rem',
marginTop: '0.5rem',
+ backgroundColor: '#fff',
fontSize: theme.fontSizes.smallBody,
},
+ closeIcon: {
+ color: theme.palette.primary.light,
+ '&:hover': {
+ color: theme.palette.primary.light,
+ },
+ },
}));
diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx
index 7f04b42ea6..6120be660b 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx
@@ -1,6 +1,6 @@
import { useState, useContext } from 'react';
import { Chip } from '@material-ui/core';
-import { Label } from '@material-ui/icons';
+import { Label, Close } from '@material-ui/icons';
import { useParams } from 'react-router-dom';
import useTags from '../../../../../../hooks/api/getters/useTags/useTags';
import { IFeatureViewParams } from '../../../../../../interfaces/params';
@@ -101,6 +101,7 @@ const FeatureOverviewTags = () => {
data-loading
label={t.value}
key={`${t.type}:${t.value}`}
+ deleteIcon={}
onDelete={
canDeleteTag
? () => {