style(console): successful tooltip state (#2789)

packages/console/src/components/CopyToClipboard/index.module.scss

@@ -65,7 +65,3 @@
     }
   }
 }
-
-.successfulTooltip {
-  background-color: var(--color-success-60);
-}

packages/console/src/components/CopyToClipboard/index.tsx

@@ -83,7 +83,7 @@ const CopyToClipboard = ({
           </IconButton>
         )}
         <Tooltip
-          className={classNames(copyState === 'copied' && styles.successfulTooltip)}
+          isSuccessful={copyState === 'copied'}
           anchorClassName={styles.copyToolTipAnchor}
           content={t(copyState)}
         >

packages/console/src/components/Tip/TipBubble/index.module.scss

@@ -10,6 +10,10 @@
   font: var(--font-body-medium);
   max-width: 300px;
 
+  &.successful {
+    background: var(--color-success-60);
+  }
+
   &.invisible {
     opacity: 0%;
   }

packages/console/src/components/Tip/TipBubble/index.tsx

@@ -16,6 +16,7 @@ type Props = HTMLProps<HTMLDivElement> & {
   placement?: TipBubblePlacement;
   horizontalAlignment?: HorizontalAlignment;
   className?: string;
+  isSuccessful?: boolean;
 };
 
 const supportHorizontalAlignmentPlacements = new Set<TipBubblePlacement>(['top', 'bottom']);
@@ -28,6 +29,7 @@ const TipBubble = (
     horizontalAlignment = 'center',
     className,
     anchorRef,
+    isSuccessful,
     ...rest
   }: Props,
   reference: ForwardedRef<HTMLDivElement>
@@ -53,6 +55,7 @@ const TipBubble = (
         styles.tipBubble,
         styles[placement],
         !position && styles.invisible,
+        isSuccessful && styles.successful,
         className
       )}
       style={{ ...position }}

packages/console/src/components/Tip/Tooltip/index.tsx

@@ -18,6 +18,7 @@ import * as styles from './index.module.scss';
 type Props = {
   className?: string;
   isKeepOpen?: boolean;
+  isSuccessful?: boolean;
   placement?: TipBubblePlacement;
   horizontalAlign?: HorizontalAlignment;
   anchorClassName?: string;
@@ -28,6 +29,7 @@ type Props = {
 const Tooltip = ({
   className,
   isKeepOpen = false,
+  isSuccessful = false,
   placement = 'top',
   horizontalAlign = 'center',
   anchorClassName,
@@ -135,6 +137,7 @@ const Tooltip = ({
             position={position}
             placement={placement}
             horizontalAlignment={positionState.horizontalAlign}
+            isSuccessful={isSuccessful}
           >
             <div className={styles.content}>{content}</div>
           </TipBubble>,

packages/console/src/pages/ConnectorDetails/components/SenderTester/index.module.scss

@@ -24,7 +24,3 @@
   font: var(--font-body-medium);
   color: var(--color-text-secondary);
 }
-
-.successfulTooltip {
-  background-color: var(--color-success-60);
-}

packages/console/src/pages/ConnectorDetails/components/SenderTester/index.tsx

@@ -103,8 +103,8 @@ const SenderTester = ({ connectorId, connectorType, config, className }: Props)
         </FormField>
         <Tooltip
           isKeepOpen
+          isSuccessful
           anchorClassName={styles.send}
-          className={styles.successfulTooltip}
           content={conditional(showTooltip && t('connector_details.test_message_sent'))}
         >
           <Button