Toggle light/dark themes

web/packages/design/src/ResourceIcon/icons.ts

@@ -105,6 +105,7 @@ import eks from './assets/eks.svg';
 import elastic from './assets/elastic.svg';
 import emailDark from './assets/email-dark.svg';
 import emailLight from './assets/email-light.svg';
+import entraid from './assets/entra-id.svg';
 import eventbrite from './assets/eventbrite.svg';
 import excalidraw from './assets/excalidraw.svg';
 import figma from './assets/figma.svg';
@@ -384,6 +385,7 @@ export {
   elastic,
   emailDark,
   emailLight,
+  entraid,
   eventbrite,
   excalidraw,
   figma,

web/packages/design/src/ResourceIcon/resourceIconSpecs.ts

@@ -106,6 +106,7 @@ export const resourceIconSpecs = {
   eks: forAllThemes(i.eks),
   elastic: forAllThemes(i.elastic),
   email: { dark: i.emailDark, light: i.emailLight },
+  entraid: forAllThemes(i.entraid),
   eventbrite: forAllThemes(i.eventbrite),
   excalidraw: forAllThemes(i.excalidraw),
 

web/packages/teleport/src/Integrations/IntegrationList.tsx

@@ -21,25 +21,12 @@ import styled from 'styled-components';
 import { useHistory } from 'react-router';
 import { Link as InternalRouteLink } from 'react-router-dom';
 
-import { Box, Flex, Image } from 'design';
+import { Box, Flex } from 'design';
 import { AWSIcon, AzureIcon } from 'design/SVGIcon';
-import slackIcon from 'design/assets/images/icons/slack.svg';
-import openaiIcon from 'design/assets/images/icons/openai.svg';
-import jamfIcon from 'design/assets/images/icons/jamf.svg';
-import opsgenieIcon from 'design/assets/images/icons/opsgenie.svg';
-import oktaIcon from 'design/assets/images/icons/okta.svg';
-import jiraIcon from 'design/assets/images/icons/jira.svg';
-import mattermostIcon from 'design/assets/images/icons/mattermost.svg';
-import pagerdutyIcon from 'design/assets/images/icons/pagerduty.svg';
-import servicenowIcon from 'design/assets/images/icons/servicenow.svg';
-import discordIcon from 'design/assets/images/icons/discord.svg';
-import emailIcon from 'design/assets/images/icons/email.svg';
-import msteamIcon from 'design/assets/images/icons/msteams.svg';
-import entraIdIcon from 'design/assets/images/icons/entra-id.svg';
-import datadogIcon from 'design/assets/images/icons/datadog.svg';
 import Table, { Cell } from 'design/DataTable';
 import { MenuButton, MenuItem } from 'shared/components/MenuAction';
 import { ToolTipInfo } from 'shared/components/ToolTip';
+import { ResourceIcon } from 'design/ResourceIcon';
 
 import {
   getStatusCodeDescription,
@@ -303,59 +290,55 @@ const IconCell = ({ item }: { item: IntegrationLike }) => {
     switch (item.kind) {
       case 'slack':
         formattedText = 'Slack';
-        icon = <IconContainer src={slackIcon} />;
-        break;
-      case 'openai':
-        formattedText = 'OpenAI';
-        icon = <IconContainer src={openaiIcon} />;
+        icon = <IconContainer name="slack" />;
         break;
       case 'jamf':
         formattedText = 'Jamf';
-        icon = <IconContainer src={jamfIcon} />;
+        icon = <IconContainer name="jamf" />;
         break;
       case 'okta':
         formattedText = 'Okta';
-        icon = <IconContainer src={oktaIcon} />;
+        icon = <IconContainer name="okta" />;
         break;
       case 'opsgenie':
         formattedText = 'Opsgenie';
-        icon = <IconContainer src={opsgenieIcon} />;
+        icon = <IconContainer name="opsgenie" />;
         break;
       case 'jira':
         formattedText = 'Jira';
-        icon = <IconContainer src={jiraIcon} />;
+        icon = <IconContainer name="jira" />;
         break;
       case 'mattermost':
         formattedText = 'Mattermost';
-        icon = <IconContainer src={mattermostIcon} />;
+        icon = <IconContainer name="mattermost" />;
         break;
       case 'servicenow':
         formattedText = 'ServiceNow';
-        icon = <IconContainer src={servicenowIcon} />;
+        icon = <IconContainer name="servicenow" />;
         break;
       case 'pagerduty':
         formattedText = 'PagerDuty';
-        icon = <IconContainer src={pagerdutyIcon} />;
+        icon = <IconContainer name="pagerduty" />;
         break;
       case 'discord':
         formattedText = 'Discord';
-        icon = <IconContainer src={discordIcon} />;
+        icon = <IconContainer name="discord" />;
         break;
       case 'email':
         formattedText = 'Email';
-        icon = <IconContainer src={emailIcon} />;
+        icon = <IconContainer name="email" />;
         break;
       case 'msteams':
         formattedText = 'Microsoft Teams';
-        icon = <IconContainer src={msteamIcon} />;
+        icon = <IconContainer name="microsoftteams" />;
         break;
       case 'entra-id':
         formattedText = 'Microsoft Entra ID';
-        icon = <IconContainer src={entraIdIcon} />;
+        icon = <IconContainer name="entraid" />;
         break;
       case 'datadog':
         formattedText = 'Datadog Incident Management';
-        icon = <IconContainer src={datadogIcon} />;
+        icon = <IconContainer name="datadog" />;
         break;
     }
   } else {
@@ -395,7 +378,7 @@ const IconCell = ({ item }: { item: IntegrationLike }) => {
   );
 };
 
-const IconContainer = styled(Image)`
+const IconContainer = styled(ResourceIcon)`
   width: 22px;
   margin-right: 10px;
 `;