chore: swap release template instruction svgs for pngs (#9642)

frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx

@@ -23,7 +23,7 @@ import MonitorHeartIcon from '@mui/icons-material/MonitorHeartOutlined';
 import { useNavigate } from 'react-router-dom';
 import { formatAssetPath } from 'utils/formatPath';
 import FactCheckOutlinedIcon from '@mui/icons-material/FactCheckOutlined';
-import { ReactComponent as ReleaseManagementPreview } from 'assets/img/releaseTemplatePreview.svg';
+import ReleaseTemplatePreviewImage from 'assets/img/releaseTemplatePreview.png';
 
 const StyledNewInUnleash = styled('div')(({ theme }) => ({
     margin: theme.spacing(2, 0, 1, 0),
@@ -167,7 +167,12 @@ export const NewInUnleash = ({
             label: 'Release templates',
             summary: 'Save time and optimize your process',
             icon: <StyledReleaseManagementIcon />,
-            preview: <ReleaseManagementPreview />,
+            preview: (
+                <StyledImg
+                    src={formatAssetPath(ReleaseTemplatePreviewImage)}
+                    alt='Release templates preview'
+                />
+            ),
             onCheckItOut: () => navigate('/release-templates'),
             docsLink: 'https://docs.getunleash.io/reference/release-templates',
             show: isEnterprise() && releasePlansEnabled,

frontend/src/component/releases/ReleaseManagement/ReleaseManagement.tsx

@@ -13,11 +13,12 @@ import { useUiFlag } from 'hooks/useUiFlag';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature';
 import { RELEASE_PLAN_TEMPLATE_CREATE } from '@server/types/permissions';
-import { ReactComponent as HowToApplyReleaseTemplates } from 'assets/img/howToApplyReleaseTemplates.svg';
+import HowToApplyReleaseTemplatesImage from 'assets/img/howToApplyReleaseTemplates.png';
-import { ReactComponent as HowToApplyReleaseTemplatesDark } from 'assets/img/howToApplyReleaseTemplatesDark.svg';
+import HowToApplyReleaseTemplatesDarkImage from 'assets/img/howToApplyReleaseTemplatesDark.png';
 import type { Link as RouterLink } from 'react-router-dom';
 import MenuBook from '@mui/icons-material/MenuBook';
 import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
+import { formatAssetPath } from 'utils/formatPath';
 
 const StyledLink = styled(Link<typeof RouterLink | 'a'>)(({ theme }) => ({
     display: 'flex',
@@ -35,6 +36,10 @@ const StyledMenuBook = styled(MenuBook)(({ theme }) => ({
     fontSize: theme.spacing(2.25),
 }));
 
+const StyledImg = styled('img')(() => ({
+    maxWidth: '100%',
+}));
+
 const CenteredHowTo = styled(Box)(({ theme }) => ({
     margin: theme.spacing(3, 0),
     display: 'flex',
@@ -99,8 +104,22 @@ export const ReleaseManagement = () => {
 
             <CenteredHowTo>
                 <ThemeMode
-                    darkmode={<HowToApplyReleaseTemplatesDark />}
+                    darkmode={
-                    lightmode={<HowToApplyReleaseTemplates />}
+                        <StyledImg
+                            src={formatAssetPath(
+                                HowToApplyReleaseTemplatesDarkImage,
+                            )}
+                            alt='How to setup release templates'
+                        />
+                    }
+                    lightmode={
+                        <StyledImg
+                            src={formatAssetPath(
+                                HowToApplyReleaseTemplatesImage,
+                            )}
+                            alt='How to setup release templates'
+                        />
+                    }
                 />
             </CenteredHowTo>
             <StyledLink