fix: new signals icon (#6461)

https://linear.app/unleash/issue/2-2010/use-svg-icon-for-signals

Uses a new SVG icon for Signals for consistency.


![image](https://github.com/Unleash/unleash/assets/14320932/32b46172-d483-4fd8-8b12-957a32a877f5)

frontend/src/assets/icons/signals.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#F7F7FA" d="M0 0h32v32H0z"/><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="4" y="4" width="24" height="24"><path fill="#D9D9D9" d="M4 4h24v24H4z"/></mask><g mask="url(#a)"><path d="M8 16c0 .933.142 1.812.425 2.637a7.4 7.4 0 0 0 1.225 2.238c.183.233.275.487.275.762s-.1.513-.3.713c-.2.2-.442.296-.725.287a.888.888 0 0 1-.7-.362 9.96 9.96 0 0 1-1.625-2.888A9.87 9.87 0 0 1 6 16c0-1.2.192-2.334.575-3.4A9.58 9.58 0 0 1 8.2 9.725a.889.889 0 0 1 .7-.363.946.946 0 0 1 .725.288c.2.2.3.437.3.712 0 .275-.092.53-.275.763a7.734 7.734 0 0 0-1.225 2.262A7.987 7.987 0 0 0 8 16Zm4 0a3.853 3.853 0 0 0 .575 2.05c.15.233.22.491.213.775a1.033 1.033 0 0 1-.313.725c-.2.2-.442.296-.725.287a.755.755 0 0 1-.65-.362 5.713 5.713 0 0 1-.813-1.625A6.042 6.042 0 0 1 10 16c0-.65.096-1.271.287-1.863.192-.591.463-1.129.813-1.612a.777.777 0 0 1 .662-.35c.275 0 .513.1.713.3.2.2.304.437.313.712.008.275-.063.53-.213.763A3.853 3.853 0 0 0 12 16Zm4 2c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 14 16c0-.55.196-1.021.588-1.413A1.926 1.926 0 0 1 16 14c.55 0 1.02.196 1.413.587.391.392.587.863.587 1.413s-.196 1.02-.587 1.412A1.926 1.926 0 0 1 16 18Zm4-2a3.853 3.853 0 0 0-.575-2.05 1.26 1.26 0 0 1-.2-.775c.017-.284.125-.525.325-.725.2-.2.433-.296.7-.288.267.009.483.13.65.363.35.483.62 1.02.813 1.612.191.592.287 1.213.287 1.863 0 .633-.096 1.25-.288 1.85a5.713 5.713 0 0 1-.812 1.625.727.727 0 0 1-.65.35.988.988 0 0 1-.725-.3 1.02 1.02 0 0 1-.313-.713c-.008-.275.063-.529.213-.762A3.853 3.853 0 0 0 20 16Zm4 0c0-.934-.142-1.813-.425-2.638a7.4 7.4 0 0 0-1.225-2.237 1.273 1.273 0 0 1-.288-.763.93.93 0 0 1 .288-.712.96.96 0 0 1 .737-.288.9.9 0 0 1 .713.363 9.58 9.58 0 0 1 1.625 2.875c.383 1.066.575 2.2.575 3.4 0 1.2-.192 2.329-.575 3.387a9.96 9.96 0 0 1-1.625 2.888.888.888 0 0 1-.7.362.946.946 0 0 1-.725-.287c-.2-.2-.3-.438-.3-.713 0-.275.092-.529.275-.762a7.734 7.734 0 0 0 1.225-2.263A7.988 7.988 0 0 0 24 16Z" fill="#6C65E5"/></g></svg>

frontend/src/component/integrations/IntegrationList/IntegrationIcon/IntegrationIcon.tsx

@@ -1,15 +1,16 @@
 import { ReactNode } from 'react';
-import { Avatar, Icon, styled } from '@mui/material';
+import { Avatar, styled } from '@mui/material';
 import { DeviceHub } from '@mui/icons-material';
 import { formatAssetPath } from 'utils/formatPath';
 import { capitalizeFirst } from 'utils/capitalizeFirst';
 
-import slackIcon from 'assets/icons/slack.svg';
-import jiraCommentIcon from 'assets/icons/jira-comment.svg';
-import jiraIcon from 'assets/icons/jira.svg';
-import webhooksIcon from 'assets/icons/webhooks.svg';
-import teamsIcon from 'assets/icons/teams.svg';
 import dataDogIcon from 'assets/icons/datadog.svg';
+import jiraIcon from 'assets/icons/jira.svg';
+import jiraCommentIcon from 'assets/icons/jira-comment.svg';
+import signals from 'assets/icons/signals.svg';
+import slackIcon from 'assets/icons/slack.svg';
+import teamsIcon from 'assets/icons/teams.svg';
+import webhooksIcon from 'assets/icons/webhooks.svg';
 import unleashIcon from 'assets/icons/unleash-integration.svg';
 import android from 'assets/icons/sdks/Logo-android.svg';
 import dotnet from 'assets/icons/sdks/Logo-net.svg';
@@ -41,25 +42,6 @@ const StyledAvatar = styled(Avatar)(({ theme }) => ({
     fontSize: '28px',
 }));
 
-const StyledCustomIcon = styled(Icon)({
-    '&&&': {
-        display: 'flex',
-        height: '100%',
-        width: '100%',
-        justifyContent: 'center',
-        alignItems: 'center',
-        fontSize: 'inherit',
-    },
-});
-
-const StyledSignalsIcon = styled(StyledCustomIcon)(({ theme }) => ({
-    background: theme.palette.background.alternative,
-    color: theme.palette.primary.contrastText,
-}));
-
-const signalsIcon = <StyledSignalsIcon>sensors</StyledSignalsIcon>;
-export const SignalsIcon = () => signalsIcon;
-
 const integrations: Record<
     string,
     {
@@ -67,13 +49,14 @@ const integrations: Record<
         title: string;
     }
 > = {
-    slack: { title: 'Slack', icon: slackIcon },
-    'slack-app': { title: 'Slack', icon: slackIcon },
-    'jira-comment': { title: 'Jira', icon: jiraCommentIcon },
-    webhook: { title: 'Webhook', icon: webhooksIcon },
-    teams: { title: 'Teams', icon: teamsIcon },
     datadog: { title: 'Datadog', icon: dataDogIcon },
     jira: { title: 'Jira', icon: jiraIcon },
+    'jira-comment': { title: 'Jira', icon: jiraCommentIcon },
+    signals: { title: 'Signals', icon: signals },
+    slack: { title: 'Slack', icon: slackIcon },
+    'slack-app': { title: 'Slack', icon: slackIcon },
+    teams: { title: 'Teams', icon: teamsIcon },
+    webhook: { title: 'Webhook', icon: webhooksIcon },
     unleash: { title: 'Unleash', icon: unleashIcon },
     android: { title: 'Android', icon: android },
     dotnet: { title: 'Dotnet', icon: dotnet },
@@ -88,10 +71,6 @@ const integrations: Record<
     react: { title: 'React', icon: react },
     ruby: { title: 'Ruby', icon: ruby },
     rust: { title: 'Rust', icon: rust },
-    signals: {
-        title: 'Signals',
-        icon: signalsIcon,
-    },
     svelte: { title: 'Svelte', icon: svelte },
     vue: { title: 'Vue', icon: vue },
 };

frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsSourceCell.tsx

@@ -5,8 +5,9 @@ import { ISignalEndpoint } from 'interfaces/signal';
 import { Link as RouterLink } from 'react-router-dom';
 import { ComponentType } from 'react';
 import { wrapperStyles } from 'component/common/Table/cells/LinkCell/LinkCell.styles';
-import { SignalsIcon } from 'component/integrations/IntegrationList/IntegrationIcon/IntegrationIcon';
+import signals from 'assets/icons/signals.svg';
 import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
+import { formatAssetPath } from 'utils/formatPath';
 
 const StyledCell = styled(Box)({
     display: 'flex',
@@ -53,9 +54,11 @@ export const ProjectActionsSourceCell = ({
                 <TextCell>
                     <StyledCell>
                         <HtmlTooltip title='Signal endpoint' arrow>
-                            <StyledIcon alt='Signal endpoint' variant='rounded'>
+                            <StyledIcon
-                                <SignalsIcon />
+                                src={formatAssetPath(signals)}
-                            </StyledIcon>
+                                alt='Signal endpoint'
+                                variant='rounded'
+                            />
                         </HtmlTooltip>
                         <StyledLink
                             component={RouterLink}