diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts
index da4fd83798..858b683234 100644
--- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts
+++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts
@@ -44,6 +44,10 @@ export const useStyles = makeStyles(theme => ({
display: 'none',
},
},
+ link:{
+ textDecoration: 'none',
+ color: 'inherit'
+ },
envName: {
display: 'inline-block',
width: '90px',
diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx
index 10c5aed07f..f8bc9a3408 100644
--- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx
+++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx
@@ -16,6 +16,7 @@ import CreatedAt from './CreatedAt';
import useProject from '../../../../hooks/api/getters/useProject/useProject';
import { UPDATE_FEATURE } from '../../../providers/AccessProvider/permissions';
import PermissionSwitch from '../../../common/PermissionSwitch/PermissionSwitch';
+import { Link } from 'react-router-dom';
interface IFeatureToggleListNewItemProps {
name: string;
@@ -102,7 +103,12 @@ const FeatureToggleListNewItem = ({
align="left"
onClick={onClick}
>
- {name}
+
+ {name}
+
({
width: '10%',
[theme.breakpoints.down(700)]: {
width: '15%',
+ paddingRight: '45px',
+ paddingLeft: '40px',
},
},
iconButtonWrapper: {
position: 'absolute',
top: '300px',
right: '-25px',
+ [theme.breakpoints.down(700)]: {
+ right: '-15px',
+ },
},
iconButton: {
- backgroundColor: `${theme.palette.grey[300]}!important`,
[theme.breakpoints.down(700)]: {
right: '-10px',
+ background: `conic-gradient(rgba(255, 0, 0, 0), 50%, rgb(196, 196, 196) 50%)`,
+ },
+ background: `conic-gradient(rgb(255, 255, 255), 50%, rgb(196, 196, 196) 50%)`,
+ color: '#fff',
+ '&:hover': {
+ background: `conic-gradient(rgba(255, 0, 0, 0), 50%, rgb(196, 196, 196) 50%)`,
},
},
icon: {
transition: 'transform 0.4s ease',
transitionDelay: '0.4s',
+ position: 'relative',
+ left: '-8px',
},
expandedIcon: {
transform: 'rotate(180deg)',
diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategiesList.tsx b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategiesList.tsx
index ed75590aab..cbfd64fb4d 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategiesList.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategiesList.tsx
@@ -6,7 +6,7 @@ import { useContext } from 'react';
import FeatureStrategiesUIContext from '../../../../../contexts/FeatureStrategiesUIContext';
import classnames from 'classnames';
import { Button, useMediaQuery } from '@material-ui/core';
-import { DoubleArrow } from '@material-ui/icons';
+import { NavigateNext } from '@material-ui/icons';
import ConditionallyRender from '../../../../common/ConditionallyRender';
import { UPDATE_FEATURE } from '../../../../providers/AccessProvider/permissions';
import PermissionIconButton from '../../../../common/PermissionIconButton/PermissionIconButton';
@@ -74,7 +74,7 @@ const FeatureStrategiesList = () => {
permission={UPDATE_FEATURE}
projectId={projectId}
>
-
+
diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategyCard/FeatureStrategyCard.styles.ts b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategyCard/FeatureStrategyCard.styles.ts
index f4d4b367a1..d6f99c92e1 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategyCard/FeatureStrategyCard.styles.ts
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategyCard/FeatureStrategyCard.styles.ts
@@ -43,6 +43,13 @@ export const useStyles = makeStyles(theme => ({
icon: {
fill: theme.palette.primary.main,
},
+ disabledButton: {
+ '&:disabled': {
+ color: '#000',
+ opacity: 0.4,
+ marginBottom: '5px',
+ },
+ },
description: {
marginTop: '0.5rem',
fontSize: theme.fontSizes.smallerBody,
diff --git a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategyCard/FeatureStrategyCard.tsx b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategyCard/FeatureStrategyCard.tsx
index d84f486857..fec6787d93 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategyCard/FeatureStrategyCard.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategyCard/FeatureStrategyCard.tsx
@@ -98,7 +98,7 @@ const FeatureStrategyCard = ({
}
elseShow={
-
+
}