Fix/strategy sidepanel (#479)

* make addButton color white when hover on strategy card

* fix: change arrow in side panel

* make sidepanel button responsive

* add ellipse to icons in sidepanel

* remove important property from css

* remove ellipse from disabled icons

* fix navigation with tab for features list in project view

Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>

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',

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}
                 >
-                    <span data-loading>{name}</span>
+                    <Link
+                        to={getTogglePath(projectId, name, uiConfig.flags.E)}
+                        className={styles.link}
+                    >
+                        <span data-loading>{name}</span>
+                    </Link>
                 </TableCell>
                 <TableCell
                     className={classNames(

frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategiesList.styles.ts

@@ -23,22 +23,34 @@ export const useStyles = makeStyles(theme => ({
         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)',

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}
                 >
-                    <DoubleArrow className={iconClasses} />
+                    <NavigateNext className={iconClasses} />
                 </PermissionIconButton>
             </span>
 

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,

frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesList/FeatureStrategyCard/FeatureStrategyCard.tsx

@@ -98,7 +98,7 @@ const FeatureStrategyCard = ({
                     </div>
                 }
                 elseShow={
-                    <IconButton disabled>
+                    <IconButton disabled className={styles.disabledButton}>
                         <Icon />
                     </IconButton>
                 }