From e839155f484924576400cdc7a2be0af3e952d538 Mon Sep 17 00:00:00 2001 From: Youssef Khedher Date: Thu, 4 Nov 2021 14:40:09 +0100 Subject: [PATCH] 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 --- .../FeatureToggleListNew.styles.ts | 4 ++++ .../FeatureToggleListNewItem.tsx | 8 +++++++- .../FeatureStrategiesList.styles.ts | 14 +++++++++++++- .../FeatureStrategiesList.tsx | 4 ++-- .../FeatureStrategyCard.styles.ts | 7 +++++++ .../FeatureStrategyCard/FeatureStrategyCard.tsx | 2 +- 6 files changed, 34 insertions(+), 5 deletions(-) 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={ - + }