Fix style (#8475)

## Before

![image](https://github.com/user-attachments/assets/1c96c30c-da06-4caa-a05d-1c58006dcfa5)

## After

![image](https://github.com/user-attachments/assets/523fac64-7521-4c0f-bfa8-457d48493628)

packages/twenty-ui/src/display/index.ts

@@ -50,6 +50,7 @@ export * from './info/components/Info';
 export * from './status/components/Status';
 export * from './tag/components/Tag';
 export * from './text/components/SeparatorLineText';
+export * from './text/components/HorizontalSeparator';
 export * from './tooltip/AppTooltip';
 export * from './tooltip/OverflowingTextWithTooltip';
 export * from './typography/components/H1Title';

packages/twenty-ui/src/display/text/components/HorizontalSeparator.tsx

@@ -0,0 +1,53 @@
+import { JSX } from 'react';
+import styled from '@emotion/styled';
+
+type HorizontalSeparatorProps = {
+  visible?: boolean;
+  text?: string;
+  noMargin?: boolean;
+};
+const StyledSeparator = styled.div<HorizontalSeparatorProps>`
+  background-color: ${({ theme }) => theme.border.color.medium};
+  height: ${({ visible }) => (visible ? '1px' : 0)};
+  margin-bottom: ${({ theme, noMargin }) => (noMargin ? 0 : theme.spacing(3))};
+  margin-top: ${({ theme, noMargin }) => (noMargin ? 0 : theme.spacing(3))};
+  width: 100%;
+`;
+
+const StyledSeparatorContainer = styled.div<{ noMargin: boolean }>`
+  align-items: center;
+  display: flex;
+  margin-bottom: ${({ theme, noMargin }) => (noMargin ? 0 : theme.spacing(3))};
+  margin-top: ${({ theme, noMargin }) => (noMargin ? 0 : theme.spacing(3))};
+  width: 100%;
+`;
+
+const StyledLine = styled.div<HorizontalSeparatorProps>`
+  background-color: ${({ theme }) => theme.border.color.medium};
+  height: ${({ visible }) => (visible ? '1px' : 0)};
+  flex-grow: 1;
+`;
+
+const StyledText = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  margin: 0 ${({ theme }) => theme.spacing(2)};
+  white-space: nowrap;
+`;
+
+export const HorizontalSeparator = ({
+  visible = true,
+  text = '',
+  noMargin = false,
+}: HorizontalSeparatorProps): JSX.Element => (
+  <>
+    {text ? (
+      <StyledSeparatorContainer noMargin={noMargin}>
+        <StyledLine visible={visible} />
+        {text && <StyledText>{text}</StyledText>}
+        <StyledLine visible={visible} />
+      </StyledSeparatorContainer>
+    ) : (
+      <StyledSeparator visible={visible} noMargin={noMargin} />
+    )}
+  </>
+);

packages/twenty-ui/src/display/text/components/__stories__/HorizontalSeparator.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ComponentDecorator } from '@ui/testing';
+
+import { HorizontalSeparator } from '../HorizontalSeparator';
+
+const meta: Meta<typeof HorizontalSeparator> = {
+  title: 'UI/Display/Text/HorizontalSeparator',
+  component: HorizontalSeparator,
+  decorators: [ComponentDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof HorizontalSeparator>;
+
+export const Default: Story = {};