*feat tooltip secondary color

packages/ui/__stories__/Tooltip.stories.module.scss

@@ -0,0 +1,7 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 380px;
+  height: 340px;
+}

packages/ui/__stories__/Tooltip.stories.tsx

@@ -4,6 +4,8 @@ import { Meta, Story } from '@storybook/react'
 import { Tooltip, TooltipProps } from '../src/Tooltip'
 import { Button } from '../src/Button'
 
+import styles from './Tooltip.stories.module.scss'
+
 export default {
   title: 'Components/Tooltip',
   component: Tooltip,
@@ -22,22 +24,33 @@ export default {
 } as Meta<TooltipProps>
 
 const Template: Story<TooltipProps> = (args) => (
-  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 380, height: 320 }}>
-    <Tooltip {...args}>
-      {(ref) => (
-        <Button ref={ref} aria-labelledby={args.id} style={{ height: 80 }}>
-          This button has a tooltip
-        </Button>
-      )}
-    </Tooltip>
-    <Tooltip color="dark" {...args}>
-      {(ref) => (
-        <Button ref={ref} aria-labelledby={args.id} style={{ height: 80 }}>
-          This button has a tooltip
-        </Button>
-      )}
-    </Tooltip>
-  </div>
+  <>
+    <div className={styles.wrapper}>
+      <Tooltip {...args}>
+        {(ref) => (
+          <Button ref={ref} aria-labelledby={args.id} style={{ height: 80 }}>
+            This button has a tooltip
+          </Button>
+        )}
+      </Tooltip>
+      <Tooltip color="dark" {...args}>
+        {(ref) => (
+          <Button ref={ref} aria-labelledby={args.id} style={{ height: 80 }}>
+            This button has a tooltip
+          </Button>
+        )}
+      </Tooltip>
+    </div>
+    <div className={styles.wrapper}>
+      <Tooltip color="secondary" {...args}>
+        {(ref) => (
+          <Button ref={ref} aria-labelledby={args.id} style={{ height: 80 }}>
+            This button has a tooltip
+          </Button>
+        )}
+      </Tooltip>
+    </div>
+  </>
 )
 
 export const AutoPlacement = Template.bind({})

packages/ui/src/AppHeader/SelectCluster/SelectCluster.module.scss

@@ -33,9 +33,9 @@ $selectFieldIndicators: ':global .hz-select-field__indicators';
   }
 
   #{$selectControl} {
-    border: none;
     background: none;
-    border-radius: unset;
+    border-radius: c.$borderRadius;
+    border: 1px solid c.$colorTextSecondary;
 
     #{$selectInputContainer},
     #{$selectValueContainer},

packages/ui/src/Tooltip.module.scss

@@ -141,6 +141,14 @@ $tooltipArrowSize2-3: math.div(c.$tooltipArrowSize, 3) * 2;
     left: -99999px !important;
   }
 
+  &.secondary {
+    border: none;
+    color: c.$colorNeutralWhite;
+    background-color: c.$colorTextSubdued;
+
+    @include arrowPlacements(c.$colorTextSubdued, transparent);
+  }
+
   &.dark {
     border: none;
     color: c.$brandColorText;

packages/ui/src/Tooltip.tsx

@@ -40,7 +40,7 @@ export type TooltipProps = {
   hideTimeoutDuration?: number
   offset?: number
   arrow?: boolean
-  color?: 'dark'
+  color?: 'dark' | 'secondary'
   padding?: number
   placement?: Placement
   visible?: boolean
@@ -234,10 +234,13 @@ export const Tooltip: FC<TooltipProps> = ({
               <>
                 <span
                   ref={setPopperElement}
-                  className={cn(styles.overlay, {
-                    [styles.dark]: color === 'dark',
-                    [styles.hidden]: !isTooltipVisible,
-                  })}
+                  className={cn(
+                    styles.overlay,
+                    {
+                      [styles.hidden]: !isTooltipVisible,
+                    },
+                    color && [styles[color]],
+                  )}
                   style={{ ...popper.styles.popper, ...{ zIndex: context ? zIndex + 1 : zIndex }, wordBreak }}
                   data-test="tooltip-overlay"
                   aria-hidden