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-front/src/modules/ui/layout/banner/components/Banner.tsx

@@ -1,22 +0,0 @@
-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-front/src/modules/ui/layout/banner/components/__stories__/Banner.stories.tsx

@@ -1,34 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator, IconRefresh } from 'twenty-ui';
-
-import { Button } from '@/ui/input/button/components/Button';
-
-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:
-      <Button
-        variant="secondary"
-        title="Reconnect"
-        Icon={IconRefresh}
-        size="small"
-        inverted
-      />
-    </Banner>
-  ),
-  argTypes: {
-    as: { control: false },
-    theme: { control: false },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Banner>;
-
-export const Default: Story = {};

packages/twenty-front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx

@@ -1,9 +1,10 @@
-import { JSX } from 'react';
 import styled from '@emotion/styled';
+import { JSX } from 'react';
 import { IconComponent } from 'twenty-ui';
 
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
+import { InformationBanner } from '@/information-banner/InformationBanner';
 import { PageBody } from './PageBody';
 import { PageHeader } from './PageHeader';
 
@@ -32,7 +33,10 @@ export const SubMenuTopBarContainer = ({
   return (
     <StyledContainer isMobile={isMobile} className={className}>
       {isMobile && <PageHeader title={title} Icon={Icon} />}
-      <PageBody>{children}</PageBody>
+      <PageBody>
+        <InformationBanner />
+        {children}
+      </PageBody>
     </StyledContainer>
   );
 };