5899 display a banner to alert users which need to reconnect their account (#6301)

Closes #5899

<img width="1280" alt="Index - banner"
src="https://github.com/twentyhq/twenty/assets/71827178/313cf20d-eb34-496a-8c7c-7589fbd55954">

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-ui/src/display/banner/components/Banner.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+const StyledBanner = styled.div`
+  align-items: center;
+  backdrop-filter: blur(5px);
+  background: ${({ theme }) => theme.color.blue};
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(3)};
+  height: 40px;
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(2) + ' ' + theme.spacing(3)};
+  width: 100%;
+  color: ${({ theme }) => theme.font.color.inverted};
+  font-family: Inter;
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-style: normal;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  line-height: 150%;
+  box-sizing: border-box;
+`;
+
+export { StyledBanner as Banner };

packages/twenty-ui/src/display/banner/components/__stories__/Banner.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '@ui/testing';
+import { Banner } from '../Banner';
+
+const meta: Meta<typeof Banner> = {
+  title: 'UI/Layout/Banner/Banner',
+  component: Banner,
+  decorators: [ComponentDecorator],
+  render: (args) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <Banner {...args}>
+      Sync lost with mailbox hello@twenty.com. Please reconnect for updates:
+    </Banner>
+  ),
+  argTypes: {
+    as: { control: false },
+    theme: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Banner>;
+
+export const Default: Story = {};

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

@@ -4,6 +4,7 @@ export * from './avatar/components/states/isInvalidAvatarUrlState';
 export * from './avatar/constants/AvatarPropertiesBySize';
 export * from './avatar/types/AvatarSize';
 export * from './avatar/types/AvatarType';
+export * from './banner/components/Banner';
 export * from './checkmark/components/AnimatedCheckmark';
 export * from './checkmark/components/Checkmark';
 export * from './chip/components/AvatarChip';