diff --git a/frontend/src/assets/img/strategyCustom.svg b/frontend/src/assets/img/strategyCustom.svg
new file mode 100644
index 0000000000..75ca770d00
--- /dev/null
+++ b/frontend/src/assets/img/strategyCustom.svg
@@ -0,0 +1,23 @@
+
diff --git a/frontend/src/assets/img/strategyDefault.svg b/frontend/src/assets/img/strategyDefault.svg
new file mode 100644
index 0000000000..86188b5c99
--- /dev/null
+++ b/frontend/src/assets/img/strategyDefault.svg
@@ -0,0 +1,17 @@
+
diff --git a/frontend/src/assets/img/strategyGradual.svg b/frontend/src/assets/img/strategyGradual.svg
new file mode 100644
index 0000000000..5a91b84f12
--- /dev/null
+++ b/frontend/src/assets/img/strategyGradual.svg
@@ -0,0 +1,18 @@
+
diff --git a/frontend/src/assets/img/strategyHosts.svg b/frontend/src/assets/img/strategyHosts.svg
new file mode 100644
index 0000000000..29140f8924
--- /dev/null
+++ b/frontend/src/assets/img/strategyHosts.svg
@@ -0,0 +1,23 @@
+
diff --git a/frontend/src/assets/img/strategyIPs.svg b/frontend/src/assets/img/strategyIPs.svg
new file mode 100644
index 0000000000..d53aa8a699
--- /dev/null
+++ b/frontend/src/assets/img/strategyIPs.svg
@@ -0,0 +1,24 @@
+
diff --git a/frontend/src/assets/img/strategyOn.svg b/frontend/src/assets/img/strategyOn.svg
new file mode 100644
index 0000000000..aeea9bf6d9
--- /dev/null
+++ b/frontend/src/assets/img/strategyOn.svg
@@ -0,0 +1,18 @@
+
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
index cfe28a2012..fac62b2ed7 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
@@ -6,8 +6,8 @@ const StyledIcon = styled('div')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
'& > svg': {
- width: theme.spacing(3.5),
- height: theme.spacing(3.5),
+ width: theme.spacing(6),
+ height: theme.spacing(6),
fill: theme.palette.primary.main,
},
}));
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCardIcon.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCardIcon.tsx
new file mode 100644
index 0000000000..43e06af197
--- /dev/null
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCardIcon.tsx
@@ -0,0 +1,32 @@
+import { ReactComponent as StrategyDefaultIcon } from 'assets/img/strategyDefault.svg';
+import { ReactComponent as StrategyGradualIcon } from 'assets/img/strategyGradual.svg';
+import { ReactComponent as StrategyIPsIcon } from 'assets/img/strategyIPs.svg';
+import { ReactComponent as StrategyOnIcon } from 'assets/img/strategyOn.svg';
+import { ReactComponent as ReleaseTemplateIcon } from 'assets/img/releaseTemplates.svg';
+import { ReactComponent as StrategyHostsIcon } from 'assets/img/strategyHosts.svg';
+import { ReactComponent as StrategyCustomIcon } from 'assets/img/strategyCustom.svg';
+
+interface IFeatureStrategyMenuCardIconProps {
+ name: string;
+}
+
+export const FeatureStrategyMenuCardIcon = ({
+ name,
+}: IFeatureStrategyMenuCardIconProps) => {
+ switch (name) {
+ case 'defaultStrategy':
+ return ;
+ case 'default':
+ return ;
+ case 'flexibleRollout':
+ return ;
+ case 'remoteAddress':
+ return ;
+ case 'applicationHostname':
+ return ;
+ case 'releasePlanTemplate':
+ return ;
+ default:
+ return ;
+ }
+};
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx
index 7475b7f0db..518fe63820 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx
@@ -19,15 +19,13 @@ import {
UPDATE_PROJECT,
} from 'component/providers/AccessProvider/permissions.ts';
import AccessContext from 'contexts/AccessContext.ts';
-import {
- formatStrategyName,
- getFeatureStrategyIcon,
-} from 'utils/strategyNames.tsx';
+import { formatStrategyName } from 'utils/strategyNames.tsx';
import { FeatureStrategyMenuCardAction } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCardAction.tsx';
import { formatCreateStrategyPath } from '../../FeatureStrategyCreate/FeatureStrategyCreate.tsx';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker.ts';
import { FeatureStrategyMenuCardsDefaultStrategy } from './FeatureStrategyMenuCardsDefaultStrategy.tsx';
import type { IStrategy } from 'interfaces/strategy.ts';
+import { FeatureStrategyMenuCardIcon } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCardIcon.tsx';
const FILTERS = [
{ label: 'All', value: null },
@@ -162,14 +160,13 @@ export const FeatureStrategyMenuCards = ({
const renderStrategy = (strategy: IStrategy) => {
const name = strategy.displayName || formatStrategyName(strategy.name);
- const Icon = getFeatureStrategyIcon(strategy.name);
return (
}
+ icon={}
>
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsDefaultStrategy.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsDefaultStrategy.tsx
index 187e3d09ac..2405b7d532 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsDefaultStrategy.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsDefaultStrategy.tsx
@@ -7,7 +7,7 @@ import useToast from 'hooks/useToast.tsx';
import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
import { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx';
import { FeatureStrategyMenuCardAction } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCardAction.tsx';
-import { getFeatureStrategyIcon } from 'utils/strategyNames.tsx';
+import { FeatureStrategyMenuCardIcon } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCardIcon.tsx';
interface IFeatureStrategyMenuCardsDefaultStrategyProps {
projectId: string;
@@ -95,13 +95,11 @@ export const FeatureStrategyMenuCardsDefaultStrategy = ({
projectDefaultStrategy.title ||
'This is the default strategy defined for this environment in the project';
- const Icon = getFeatureStrategyIcon(strategyName);
-
return (
}
+ icon={}
isDefault
>
{shouldShowHeader && (
@@ -158,7 +156,9 @@ export const FeatureStrategyMenuCardsReleaseTemplates = ({
key={template.id}
name={template.name}
description={template.description}
- icon={}
+ icon={
+
+ }
>
onReviewReleasePlan(template)}