From ea26e008d0483cefe27381226347353f31a7427e Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Mon, 12 May 2025 11:38:33 +0300
Subject: [PATCH] chore: update styling for variant box (#9953)

---
 .../feature/StrategyTypes/NewStrategyVariants.tsx     | 11 +++--------
 .../MilestoneStrategy/MilestoneStrategyVariants.tsx   | 11 +++--------
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/frontend/src/component/feature/StrategyTypes/NewStrategyVariants.tsx b/frontend/src/component/feature/StrategyTypes/NewStrategyVariants.tsx
index 2ff4ee2fe5..3773012190 100644
--- a/frontend/src/component/feature/StrategyTypes/NewStrategyVariants.tsx
+++ b/frontend/src/component/feature/StrategyTypes/NewStrategyVariants.tsx
@@ -7,7 +7,7 @@ import PermissionButton from 'component/common/PermissionButton/PermissionButton
 import { UPDATE_FEATURE_ENVIRONMENT_VARIANTS } from '../../providers/AccessProvider/permissions';
 import { v4 as uuidv4 } from 'uuid';
 import { WeightType } from '../../../constants/variantTypes';
-import { Box, styled, Typography, useTheme } from '@mui/material';
+import { Box, styled, Typography, useTheme, Alert } from '@mui/material';
 import type { IFeatureStrategy } from 'interfaces/strategy';
 import { VariantsSplitPreview } from 'component/common/VariantsSplitPreview/VariantsSplitPreview';
 import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
@@ -28,11 +28,6 @@ const StyledHelpIconBox = styled(Box)(({ theme }) => ({
     marginBottom: theme.spacing(1),
 }));
 
-const StyledVariantsHeader = styled('div')(({ theme }) => ({
-    color: theme.palette.text.secondary,
-    marginTop: theme.spacing(1.5),
-}));
-
 export const NewStrategyVariants: FC<{
     setStrategy: React.Dispatch<
         React.SetStateAction<Partial<IFeatureStrategy>>
@@ -123,10 +118,10 @@ export const NewStrategyVariants: FC<{
 
     return (
         <>
-            <StyledVariantsHeader>
+            <Alert severity='info' icon={false}>
                 Variants enhance a feature flag by providing a version of the
                 feature to be enabled
-            </StyledVariantsHeader>
+            </Alert>
             <StyledHelpIconBox>
                 <Typography>Variants</Typography>
                 <HelpIcon
diff --git a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/MilestoneStrategyVariants.tsx b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/MilestoneStrategyVariants.tsx
index 8cc6de3eb0..141edb409b 100644
--- a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/MilestoneStrategyVariants.tsx
+++ b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/MilestoneStrategyVariants.tsx
@@ -1,6 +1,6 @@
 import type { IReleasePlanMilestoneStrategy } from 'interfaces/releasePlans';
 import { useEffect, useState } from 'react';
-import { Box, styled, Typography, Button } from '@mui/material';
+import { Box, styled, Typography, Button, Alert } from '@mui/material';
 import { HelpIcon } from '../../../../common/HelpIcon/HelpIcon';
 import { StrategyVariantsUpgradeAlert } from 'component/common/StrategyVariantsUpgradeAlert/StrategyVariantsUpgradeAlert';
 import { VariantForm } from 'component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsModal/VariantForm/VariantForm';
@@ -24,11 +24,6 @@ const StyledHelpIconBox = styled(Box)(({ theme }) => ({
     marginBottom: theme.spacing(1),
 }));
 
-const StyledVariantsHeader = styled('div')(({ theme }) => ({
-    color: theme.palette.text.secondary,
-    marginTop: theme.spacing(1.5),
-}));
-
 interface IMilestoneStrategyVariantsProps {
     strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>;
     setStrategy: React.Dispatch<
@@ -115,10 +110,10 @@ export const MilestoneStrategyVariants = ({
 
     return (
         <>
-            <StyledVariantsHeader>
+            <Alert severity='info' icon={false}>
                 Variants enhance a feature flag by providing a version of the
                 feature to be enabled
-            </StyledVariantsHeader>
+            </Alert>
             <StyledHelpIconBox>
                 <Typography>Variants</Typography>
                 <HelpIcon