From b0ceea2a52ef53d267ad68ba0e8104bfa4186388 Mon Sep 17 00:00:00 2001
From: Tal Koren <talko@monday.com>
Date: Mon, 19 Feb 2024 10:46:17 +0200
Subject: [PATCH] fix(Tipseen): add gap between title and close button (#1972)

---
 packages/core/src/components/Tipseen/Tipseen.module.scss      | 2 +-
 packages/core/src/components/Tipseen/TipseenTitle.module.scss | 3 +++
 packages/core/src/components/Tipseen/TipseenTitle.tsx         | 4 +++-
 .../__tests__/__snapshots__/tipseen-tests.jest.js.snap        | 2 +-
 4 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 packages/core/src/components/Tipseen/TipseenTitle.module.scss

diff --git a/packages/core/src/components/Tipseen/Tipseen.module.scss b/packages/core/src/components/Tipseen/Tipseen.module.scss
index edcdc4a022..39cbcb3976 100644
--- a/packages/core/src/components/Tipseen/Tipseen.module.scss
+++ b/packages/core/src/components/Tipseen/Tipseen.module.scss
@@ -25,7 +25,7 @@
     }
 
     &Title {
-      padding: var(--spacing-medium) var(--spacing-medium) 0 var(--spacing-medium);
+      padding: var(--spacing-medium) var(--spacing-xl) 0 var(--spacing-medium);
     }
 
     &Content {
diff --git a/packages/core/src/components/Tipseen/TipseenTitle.module.scss b/packages/core/src/components/Tipseen/TipseenTitle.module.scss
new file mode 100644
index 0000000000..084819f9e1
--- /dev/null
+++ b/packages/core/src/components/Tipseen/TipseenTitle.module.scss
@@ -0,0 +1,3 @@
+.title {
+  padding-right: var(--spacing-medium);
+}
diff --git a/packages/core/src/components/Tipseen/TipseenTitle.tsx b/packages/core/src/components/Tipseen/TipseenTitle.tsx
index 9b9c6b8a2f..be9f407bba 100644
--- a/packages/core/src/components/Tipseen/TipseenTitle.tsx
+++ b/packages/core/src/components/Tipseen/TipseenTitle.tsx
@@ -3,6 +3,8 @@ import { VibeComponentProps } from "../../types";
 import { getTestId } from "../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../tests/constants";
 import Text from "../Text/Text";
+import cx from "classnames";
+import styles from "./TipseenTitle.module.scss";
 
 interface TipseenTitleProps extends VibeComponentProps {
   text?: string;
@@ -17,7 +19,7 @@ const TipseenTitle: FC<TipseenTitleProps> = ({ text, className, id, "data-testid
       color={Text.colors.ON_PRIMARY}
       aria-level={3}
       maxLines={2}
-      className={className}
+      className={cx(styles.title, className)}
       id={id}
       data-testid={dataTestId || getTestId(ComponentDefaultTestId.TIPSEEN_TITLE, id)}
     >
diff --git a/packages/core/src/components/Tipseen/__tests__/__snapshots__/tipseen-tests.jest.js.snap b/packages/core/src/components/Tipseen/__tests__/__snapshots__/tipseen-tests.jest.js.snap
index f4b4e67040..c40c5ab159 100644
--- a/packages/core/src/components/Tipseen/__tests__/__snapshots__/tipseen-tests.jest.js.snap
+++ b/packages/core/src/components/Tipseen/__tests__/__snapshots__/tipseen-tests.jest.js.snap
@@ -526,7 +526,7 @@ Array [
 exports[`Snapshot tests TipseenTitle should render correctly with given text 1`] = `
 <div
   aria-level={3}
-  className="typography onPrimary start multiLineEllipsis text text1Bold"
+  className="typography onPrimary start multiLineEllipsis text text1Bold title"
   data-testid="tipseen-title"
   role="heading"
 >