feat: new styling for strategy selector (#9683)

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx

@@ -24,6 +24,7 @@ const StyledContentContainer = styled('div')(() => ({
 
 const StyledName = styled(StringTruncator)(({ theme }) => ({
     fontWeight: theme.typography.fontWeightBold,
+    fontSize: theme.typography.caption.fontSize,
     display: 'block',
     marginBottom: theme.spacing(0.5),
 }));
@@ -71,7 +72,7 @@ export const FeatureReleasePlanCard = ({
                     title={description}
                     arrow
                     sx={{
-                        fontSize: (theme) => theme.typography.body2.fontSize,
+                        fontSize: (theme) => theme.typography.caption.fontSize,
                         fontWeight: (theme) =>
                             theme.typography.fontWeightRegular,
                         width: '100%',

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx

@@ -222,14 +222,11 @@ export const FeatureStrategyMenu = ({
                     vertical: 'bottom',
                     horizontal: 'left',
                 }}
-                PaperProps={{
+                transformOrigin={{
-                    sx: (theme) => ({
+                    vertical: 'top',
-                        paddingBottom: theme.spacing(1),
+                    horizontal: 'left',
-                        width: 'auto',
-                        maxWidth: '95vw',
-                        overflow: 'hidden',
-                    }),
                 }}
+                disableScrollLock={true}
             >
                 {newStrategyDropdownEnabled ? (
                     <FeatureStrategyMenuCards

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx

@@ -41,6 +41,7 @@ const StyledContentContainer = styled('div')(() => ({
 
 const StyledName = styled(StringTruncator)(({ theme }) => ({
     fontWeight: theme.typography.fontWeightBold,
+    fontSize: theme.typography.caption.fontSize,
     display: 'block',
     marginBottom: theme.spacing(0.5),
 }));
@@ -107,7 +108,7 @@ export const FeatureStrategyMenuCard = ({
                     title={strategy.description}
                     arrow
                     sx={{
-                        fontSize: (theme) => theme.typography.body2.fontSize,
+                        fontSize: (theme) => theme.typography.caption.fontSize,
                         width: '100%',
                     }}
                 >

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx

@@ -1,4 +1,11 @@
-import { Link, styled, Typography, Box, IconButton } from '@mui/material';
+import {
+    Link,
+    styled,
+    Typography,
+    Box,
+    IconButton,
+    Tooltip,
+} from '@mui/material';
 import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
 import { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCard';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -7,6 +14,7 @@ import { FeatureReleasePlanCard } from '../FeatureReleasePlanCard/FeatureRelease
 import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
 import { useNavigate } from 'react-router-dom';
 import CloseIcon from '@mui/icons-material/Close';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 
 interface IFeatureStrategyMenuCardsProps {
     projectId: string;
@@ -30,6 +38,15 @@ const StyledLink = styled(Link)(({ theme }) => ({
 
 const GridContainer = styled(Box)(() => ({
     width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+}));
+
+const ScrollableContent = styled(Box)(({ theme }) => ({
+    width: '100%',
+    maxHeight: '70vh',
+    overflowY: 'auto',
+    padding: theme.spacing(0, 0, 1, 0),
 }));
 
 const GridSection = styled(Box)(({ theme }) => ({
@@ -37,6 +54,7 @@ const GridSection = styled(Box)(({ theme }) => ({
     gridTemplateColumns: 'repeat(2, 1fr)',
     gap: theme.spacing(1.5),
     padding: theme.spacing(0, 2),
+    marginBottom: theme.spacing(3),
     width: '100%',
 }));
 
@@ -58,6 +76,19 @@ const TitleText = styled(Typography)(({ theme }) => ({
     margin: 0,
 }));
 
+const SectionTitle = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.5),
+    padding: theme.spacing(1, 2),
+    width: '100%',
+}));
+
+const StyledInfoIcon = styled(InfoOutlinedIcon)(({ theme }) => ({
+    fontSize: theme.typography.body2.fontSize,
+    color: theme.palette.text.secondary,
+}));
+
 export const FeatureStrategyMenuCards = ({
     projectId,
     featureId,
@@ -102,11 +133,20 @@ export const FeatureStrategyMenuCards = ({
                     </IconButton>
                 )}
             </TitleRow>
+            <ScrollableContent>
                 {allStrategies ? (
                     <>
-                    <StyledTypography color='textSecondary'>
+                        <SectionTitle>
-                        Default strategy for {environmentId} environment
+                            <Typography color='inherit' variant='body2'>
-                    </StyledTypography>
+                                Pre-defined strategy types
+                            </Typography>
+                            <Tooltip
+                                title='Select a starting setup, and customize the strategy to your need with targeting and variants'
+                                arrow
+                            >
+                                <StyledInfoIcon />
+                            </Tooltip>
+                        </SectionTitle>
                         <GridSection>
                             <CardWrapper key={defaultStrategy.name}>
                                 <FeatureStrategyMenuCard
@@ -117,6 +157,16 @@ export const FeatureStrategyMenuCards = ({
                                     defaultStrategy={true}
                                 />
                             </CardWrapper>
+                            {preDefinedStrategies.map((strategy) => (
+                                <CardWrapper key={strategy.name}>
+                                    <FeatureStrategyMenuCard
+                                        projectId={projectId}
+                                        featureId={featureId}
+                                        environmentId={environmentId}
+                                        strategy={strategy}
+                                    />
+                                </CardWrapper>
+                            ))}
                         </GridSection>
                     </>
                 ) : null}
@@ -124,9 +174,17 @@ export const FeatureStrategyMenuCards = ({
                     condition={templates.length > 0}
                     show={
                         <>
-                        <StyledTypography color='textSecondary'>
+                            <SectionTitle>
-                            Release templates
+                                <Typography color='inherit' variant='body2'>
-                        </StyledTypography>
+                                    Apply a release template
+                                </Typography>
+                                <Tooltip
+                                    title='Use one of the pre-defined templates defined in your company for rolling out features to users'
+                                    arrow
+                                >
+                                    <StyledInfoIcon />
+                                </Tooltip>
+                            </SectionTitle>
                             <GridSection>
                                 {templates.map((template) => (
                                     <CardWrapper key={template.id}>
@@ -149,7 +207,8 @@ export const FeatureStrategyMenuCards = ({
                             <StyledTypography
                                 color='textSecondary'
                                 sx={{
-                                padding: (theme) => theme.spacing(1, 2, 0, 2),
+                                    padding: (theme) =>
+                                        theme.spacing(1, 2, 0, 2),
                                 }}
                             >
                                 <p>No templates created.</p>
@@ -170,35 +229,33 @@ export const FeatureStrategyMenuCards = ({
                 />
                 {allStrategies ? (
                     <>
-                    <StyledTypography color='textSecondary'>
-                        Predefined strategy types
-                    </StyledTypography>
-                    <GridSection>
-                        {preDefinedStrategies.map((strategy) => (
-                            <CardWrapper key={strategy.name}>
-                                <FeatureStrategyMenuCard
-                                    projectId={projectId}
-                                    featureId={featureId}
-                                    environmentId={environmentId}
-                                    strategy={strategy}
-                                />
-                            </CardWrapper>
-                        ))}
-                    </GridSection>
                         <ConditionallyRender
                             condition={customStrategies.length > 0}
                             show={
                                 <>
-                                <StyledTypography color='textSecondary'>
+                                    <SectionTitle>
+                                        <Typography
+                                            color='inherit'
+                                            variant='body2'
+                                        >
                                             Custom strategies
-                                </StyledTypography>
+                                        </Typography>
+                                        <Tooltip
+                                            title='Custom strategies you have defined in Unleash'
+                                            arrow
+                                        >
+                                            <StyledInfoIcon />
+                                        </Tooltip>
+                                    </SectionTitle>
                                     <GridSection>
                                         {customStrategies.map((strategy) => (
                                             <CardWrapper key={strategy.name}>
                                                 <FeatureStrategyMenuCard
                                                     projectId={projectId}
                                                     featureId={featureId}
-                                                environmentId={environmentId}
+                                                    environmentId={
+                                                        environmentId
+                                                    }
                                                     strategy={strategy}
                                                 />
                                             </CardWrapper>
@@ -209,6 +266,7 @@ export const FeatureStrategyMenuCards = ({
                         />
                     </>
                 ) : null}
+            </ScrollableContent>
         </GridContainer>
     );
 };