Merge branch 'main' into task/Add_strategy_information_to_playground_…

…results
Unleash · Aug 8, 2022 · 4128a7b · 4128a7b
2 parents d6a0189 + f9f6152
commit 4128a7b
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 50 deletions.
diff --git a/src/component/common/HelpIcon/HelpIcon.tsx b/src/component/common/HelpIcon/HelpIcon.tsx
@@ -1,24 +1,19 @@
-import { Tooltip } from '@mui/material';
+import { Tooltip, TooltipProps } from '@mui/material';
 import { Info } from '@mui/icons-material';
 import { useStyles } from 'component/common/HelpIcon/HelpIcon.styles';
 import React from 'react';
 
 interface IHelpIconProps {
     tooltip: string;
-    style?: React.CSSProperties;
+    placement?: TooltipProps['placement'];
 }
 
-export const HelpIcon = ({ tooltip, style }: IHelpIconProps) => {
+export const HelpIcon = ({ tooltip, placement }: IHelpIconProps) => {
     const { classes: styles } = useStyles();
 
     return (
-        <Tooltip title={tooltip} arrow>
-            <span
-                className={styles.container}
-                style={style}
-                tabIndex={0}
-                aria-label="Help"
-            >
+        <Tooltip title={tooltip} placement={placement} arrow>
+            <span className={styles.container} tabIndex={0} aria-label="Help">
                 <Info className={styles.icon} />
             </span>
         </Tooltip>

diff --git a/...atureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.styles.ts b/...atureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.styles.ts
diff --git a/...ure/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx b/...ure/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx
@@ -1,14 +1,47 @@
-import { Tooltip } from '@mui/material';
 import { useState } from 'react';
 import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import EnvironmentStrategyDialog from 'component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog';
 import FeatureOverviewEnvSwitch from './FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch';
-import { useStyles } from './FeatureOverviewEnvSwitches.styles';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
+import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
+import { styled } from '@mui/material';
+
+const StyledContainer = styled('div')(({ theme }) => ({
+    borderRadius: theme.shape.borderRadiusLarge,
+    backgroundColor: '#fff',
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '1.5rem',
+    maxWidth: '350px',
+    minWidth: '350px',
+    marginRight: '1rem',
+    marginTop: '1rem',
+    [theme.breakpoints.down(1000)]: {
+        marginBottom: '1rem',
+        width: '100%',
+        maxWidth: 'none',
+        minWidth: 'auto',
+    },
+}));
+
+const StyledHeader = styled('h3')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
+    alignItems: 'center',
+    fontSize: theme.fontSizes.bodySize,
+    fontWeight: 'normal',
+    margin: 0,
+    marginBottom: '0.5rem',
+
+    // Make the help icon align with the text.
+    '& > :last-child': {
+        position: 'relative',
+        top: 1,
+    },
+}));
 
 const FeatureOverviewEnvSwitches = () => {
-    const { classes: styles } = useStyles();
     const projectId = useRequiredPathParam('projectId');
     const featureId = useRequiredPathParam('featureId');
     const { feature } = useFeature(projectId, featureId);
@@ -37,15 +70,14 @@ const FeatureOverviewEnvSwitches = () => {
     };
 
     return (
-        <div className={styles.container}>
-            <Tooltip
-                arrow
-                title="Environments can be switched off for a single toggle. Resulting in all calls towards the toggle to return false."
-            >
-                <h3 className={styles.header} data-loading>
-                    Feature toggle status
-                </h3>
-            </Tooltip>
+        <StyledContainer>
+            <StyledHeader data-loading>
+                Feature toggle status
+                <HelpIcon
+                    tooltip="When a feature is switched off in an environment, it will always return false. When switched on, it will return true or false depending on its strategies."
+                    placement="top"
+                />
+            </StyledHeader>
             {renderEnvironmentSwitches()}
             <EnvironmentStrategyDialog
                 open={showInfoBox}
@@ -54,7 +86,7 @@ const FeatureOverviewEnvSwitches = () => {
                 featureId={featureId}
                 environmentName={environmentName}
             />
-        </div>
+        </StyledContainer>
     );
 };