From 52d63bc726f90ff4fc69dd034f4639e0abd08daa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Thu, 7 Mar 2024 11:12:56 +0000 Subject: [PATCH] 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 | 1 + .../IntegrationIcon/IntegrationIcon.tsx | 47 +++++-------------- .../ProjectActionsSourceCell.tsx | 11 +++-- 3 files changed, 21 insertions(+), 38 deletions(-) create mode 100644 frontend/src/assets/icons/signals.svg diff --git a/frontend/src/assets/icons/signals.svg b/frontend/src/assets/icons/signals.svg new file mode 100644 index 0000000000..73a895cdcf --- /dev/null +++ b/frontend/src/assets/icons/signals.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/component/integrations/IntegrationList/IntegrationIcon/IntegrationIcon.tsx b/frontend/src/component/integrations/IntegrationList/IntegrationIcon/IntegrationIcon.tsx index da5941af5e..b50c746b74 100644 --- a/frontend/src/component/integrations/IntegrationList/IntegrationIcon/IntegrationIcon.tsx +++ b/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 = sensors; -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 }, }; diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsSourceCell.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsSourceCell.tsx index 4322acf0e3..d3f3c20635 100644 --- a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsSourceCell.tsx +++ b/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 = ({ - - - +