mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-25 00:07:47 +01:00
fix/strategy tab (#519)
* fix: add the toggle switch inside the strategies list * fix: styling strategy execution tab * fix: remove visual execution from strategy tab * fix: test fail on yarn build * fix: add style for the strategy container * fix: remove overlapping of switch * fix: remove border from select strategy * fix: remove borders and adjust icon rollout * fix: use theme grey Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>
This commit is contained in:
Youssef Khedher
GitHub
parent
d706bfc7bc
commit
f2a85ebf79
@ -21,7 +21,7 @@ const PercentageCircle = ({
|
||||
color: '#fff',
|
||||
backgroundColor: theme.palette.grey[200],
|
||||
backgroundImage: `conic-gradient(${
|
||||
theme.palette.primary.main
|
||||
theme.palette.primary.light
|
||||
} ${percentage}%, ${secondaryPieColor || theme.palette.grey[200]} 1%)`,
|
||||
};
|
||||
|
||||
|
||||
@ -4,17 +4,21 @@ export const useStyles = makeStyles(theme => ({
|
||||
container: {
|
||||
border: `1px solid ${theme.palette.grey[300]}`,
|
||||
borderRadius: '5px',
|
||||
width: '500px',
|
||||
width: '50%',
|
||||
marginLeft: '1rem',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
},
|
||||
headerContainer: {
|
||||
width: '100%',
|
||||
backgroundColor: '#efefef',
|
||||
},
|
||||
header: {
|
||||
color: theme.palette.primary.main,
|
||||
textAlign: 'center',
|
||||
margin: '0.5rem 0',
|
||||
fontSize: theme.fontSizes.mainHeader,
|
||||
marginTop: '1rem',
|
||||
color: '#000',
|
||||
textAlign: 'left',
|
||||
margin: '1rem 1.2rem',
|
||||
fontSize: theme.fontSizes.bodySize,
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
}));
|
||||
|
||||
@ -36,9 +36,12 @@ const FeatureEnvironmentStrategyExecution = ({
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<h3 className={styles.header}>
|
||||
Visual overview of your strategy configuration
|
||||
</h3>
|
||||
<div className={styles.headerContainer}>
|
||||
<h6 className={styles.header}>
|
||||
Visual overview of your strategy configuration
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
{renderStrategies()}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -5,7 +5,6 @@ const FeatureEnvironmentStrategyExecutionSeparator = () => {
|
||||
const styles = useStyles();
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.separatorBorder} />
|
||||
<div className={styles.textContainer}>
|
||||
<div className={styles.textPositioning}>
|
||||
<FeatureStrategiesSeparator text="OR" />
|
||||
|
||||
@ -44,7 +44,6 @@ export const useStyles = makeStyles(theme => ({
|
||||
top: '-65px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
[theme.breakpoints.down(700)]: {
|
||||
top: '-94px',
|
||||
},
|
||||
|
||||
@ -149,16 +149,18 @@ const FeatureStrategiesEnvironmentList = ({
|
||||
condition={!expandedSidebar}
|
||||
show={
|
||||
<div className={styles.headerContainer}>
|
||||
<FeatureOverviewEnvSwitch
|
||||
text={
|
||||
activeEnvironment.enabled
|
||||
? 'Toggle is enabled and the following strategies are executing'
|
||||
: 'Toggle is disabled and no strategies are executing'
|
||||
}
|
||||
env={activeEnvironment}
|
||||
setToastData={setToastData}
|
||||
callback={updateFeatureEnvironmentCache}
|
||||
/>
|
||||
<div className={styles.headerInnerContainer}>
|
||||
<FeatureOverviewEnvSwitch
|
||||
text={
|
||||
activeEnvironment.enabled
|
||||
? 'Toggle is enabled and the following strategies are executing'
|
||||
: 'Toggle is disabled and no strategies are executing'
|
||||
}
|
||||
env={activeEnvironment}
|
||||
setToastData={setToastData}
|
||||
callback={updateFeatureEnvironmentCache}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
@ -24,8 +24,8 @@ export const useStyles = makeStyles(theme => ({
|
||||
},
|
||||
},
|
||||
outerTabContentContainer: {
|
||||
marginTop: '1rem',
|
||||
padding: '0rem 2rem 2rem 2rem',
|
||||
margin: '1rem 2rem',
|
||||
paddingBottom: '2rem',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
[theme.breakpoints.down(700)]: {
|
||||
@ -73,7 +73,10 @@ export const useStyles = makeStyles(theme => ({
|
||||
configureStrategy: {
|
||||
display: 'none',
|
||||
},
|
||||
addStrategyButton: { marginLeft: 'auto' },
|
||||
addStrategyButton: {
|
||||
marginLeft: 'auto',
|
||||
marginTop: '10px',
|
||||
},
|
||||
tabNavigation: {
|
||||
backgroundColor: 'transparent',
|
||||
textTransform: 'none',
|
||||
|
||||
@ -20,7 +20,6 @@ import FeatureStrategiesUIContext from '../../../../../contexts/FeatureStrategie
|
||||
import ConditionallyRender from '../../../../common/ConditionallyRender';
|
||||
import FeatureStrategiesConfigure from './FeatureStrategiesConfigure/FeatureStrategiesConfigure';
|
||||
import FeatureStrategiesRefresh from './FeatureStrategiesRefresh/FeatureStrategiesRefresh';
|
||||
import FeatureEnvironmentStrategyExecution from './FeatureEnvironmentStrategyExecution/FeatureEnvironmentStrategyExecution';
|
||||
import ResponsiveButton from '../../../../common/ResponsiveButton/ResponsiveButton';
|
||||
import AccessContext from '../../../../../contexts/AccessContext';
|
||||
|
||||
@ -291,26 +290,11 @@ const FeatureStrategiesEnvironments = () => {
|
||||
env.strategies.length > 0 || expandedSidebar
|
||||
}
|
||||
show={
|
||||
<>
|
||||
<div className={listContainerClasses}>
|
||||
<FeatureStrategiesEnvironmentList
|
||||
strategies={env.strategies}
|
||||
/>
|
||||
</div>
|
||||
<ConditionallyRender
|
||||
condition={
|
||||
!expandedSidebar &&
|
||||
!configureNewStrategy &&
|
||||
!smallScreen
|
||||
}
|
||||
show={
|
||||
<FeatureEnvironmentStrategyExecution
|
||||
strategies={env.strategies}
|
||||
env={env}
|
||||
/>
|
||||
}
|
||||
<div className={listContainerClasses}>
|
||||
<FeatureStrategiesEnvironmentList
|
||||
strategies={env.strategies}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
}
|
||||
elseShow={
|
||||
<ConditionallyRender
|
||||
|
||||
@ -40,7 +40,8 @@ export const useStyles = makeStyles(theme => ({
|
||||
marginLeft: 'auto',
|
||||
},
|
||||
icon: {
|
||||
fill: theme.palette.primary.main,
|
||||
marginRight: '0.5rem',
|
||||
fill: theme.palette.grey[600],
|
||||
minWidth: '50px',
|
||||
},
|
||||
rollout: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user