fix(designer-ui): Migrate ConnectorSummaryCard from LESS to Fluent UI v9 makeStyles for dark theme

libs/designer-ui/src/lib/connectorsummarycard/connectorsummarycard.less

@@ -1,6 +1,5 @@
 .msla-connector-summary-card {
   position: relative;
-  background-color: #fff;
   border-radius: 2px;
   border: none;
   outline: none;
@@ -22,11 +21,6 @@
   border: 2px solid #ffffff00;
   &:focus {
     outline: 0;
-    border: 2px solid rgba(96, 94, 92, 1);
-  }
-
-  &:active {
-    border: 2px solid rgba(0, 120, 212, 1);
   }
 }
 
@@ -96,20 +90,3 @@
   }
 }
 
-.msla-theme-dark {
-  .msla-connector-summary-card {
-    background: @ms-color-primaryBackground;
-
-    &:focus {
-      outline: 1px solid #fff;
-    }
-
-    &:hover {
-      background: @ms-color-primaryBackgroundHover;
-    }
-  }
-
-  .msla-connector-summary-title {
-    color: @ms-color-black;
-  }
-}

libs/designer-ui/src/lib/connectorsummarycard/connectorsummarycard.styles.ts

@@ -0,0 +1,40 @@
+import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
+
+export const useConnectorSummaryCardStyles = makeStyles({
+  card: {
+    position: 'relative',
+    backgroundColor: tokens.colorNeutralBackground1,
+    borderRadius: '2px',
+    ...shorthands.border('2px', 'solid', 'transparent'),
+    outline: 'none',
+    boxShadow: '0px 0.3px 4px 0px rgba(0, 0, 0, 0.1), 0px 1.6px 4px 0px rgba(0, 0, 0, 0.14)',
+    cursor: 'pointer',
+    alignItems: 'center',
+    padding: '8px',
+    width: '100%',
+    overflow: 'hidden',
+    boxSizing: 'border-box',
+    color: tokens.colorNeutralForeground1,
+
+    '&:focus, &:hover': {
+      boxShadow: '0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13)',
+    },
+
+    '&:hover': {
+      backgroundColor: tokens.colorNeutralBackground1Hover,
+    },
+
+    '&:focus': {
+      outline: '0',
+      ...shorthands.borderColor(tokens.colorNeutralStroke1),
+    },
+
+    '&:active': {
+      ...shorthands.borderColor(tokens.colorBrandStroke1),
+    },
+  },
+
+  title: {
+    color: tokens.colorNeutralForeground1,
+  },
+});

libs/designer-ui/src/lib/connectorsummarycard/index.tsx

@@ -8,6 +8,7 @@ import { OperationRuntimeBadges } from './operationRuntimeBadges';
 import { useCallback } from 'react';
 import { ChevronRight12Regular } from '@fluentui/react-icons';
 import { FavoriteButton } from '../panel';
+import { useConnectorSummaryCardStyles } from './connectorsummarycard.styles';
 
 export interface ConnectorSummaryCardProps {
   connector: Connector | OperationApi;
@@ -20,6 +21,7 @@ export interface ConnectorSummaryCardProps {
 export const ConnectorSummaryCard = (props: ConnectorSummaryCardProps) => {
   const { connector, onClick, isCard = true, displayRuntimeInfo, hideFavorites } = props;
   const { id } = connector;
+  const styles = useConnectorSummaryCardStyles();
 
   const connectorName = getDisplayNameFromConnector(connector);
   const description = getDescriptionFromConnector(connector);
@@ -37,7 +39,7 @@ export const ConnectorSummaryCard = (props: ConnectorSummaryCardProps) => {
     <>
       <div className="msla-connector-summary-header">
         {isCard ? <ConnectorImage /> : null}
-        <Text className="msla-connector-summary-title">{connectorName}</Text>
+        <Text className={mergeClasses('msla-connector-summary-title', styles.title)}>{connectorName}</Text>
         <InfoDot
           title={connectorName}
           description={description}
@@ -66,7 +68,7 @@ export const ConnectorSummaryCard = (props: ConnectorSummaryCardProps) => {
   if (isCard) {
     return (
       <div
-        className="msla-connector-summary-card"
+        className={mergeClasses('msla-connector-summary-card', styles.card)}
         onClick={handleClick}
         onKeyDown={(e) => {
           if (e.key === 'Enter' || e.key === ' ') {