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 ? () => {